@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/View/Components/ExternalRenderer.js

@@ -1,9 +1,7 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { useAdaptable } from '../AdaptableContext';
-export const ExternalRenderer = (_a) => {
-    var { render, frameworkComponent, componentName = 'N/A', onDestroy } = _a, rest = __rest(_a, ["render", "frameworkComponent", "componentName", "onDestroy"]);
-    const ref = React.useRef();
+export const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', onDestroy, ...rest }) => {
+    const ref = React.useRef(null);
     const adaptable = useAdaptable();
     const [contentsHTML, setContentsHTML] = React.useState('');
     React.useLayoutEffect(() => {
@@ -11,12 +9,9 @@ export const ExternalRenderer = (_a) => {
         const adaptableApi = adaptable.api;
         if (render) {
             const html = render({
-                visible: true,
                 phase: 'onMount',
                 element,
-                adaptableApi,
-                userName: adaptableApi.optionsApi.getUserName(),
-                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                ...adaptableApi.internalApi.buildBaseContext(),
             });
             setContentsHTML(html);
         }
@@ -26,16 +21,13 @@ export const ExternalRenderer = (_a) => {
         return () => {
             if (render) {
                 render({
-                    visible: false,
                     phase: 'onDestroy',
                     element: element,
-                    adaptableApi,
-                    userName: adaptableApi.optionsApi.getUserName(),
-                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                    ...adaptableApi.internalApi.buildBaseContext(),
                 });
             }
             else if (frameworkComponent) {
-                onDestroy === null || onDestroy === void 0 ? void 0 : onDestroy();
+                onDestroy?.();
                 adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                 // @ts-ignore
                 componentName);
@@ -43,6 +35,6 @@ export const ExternalRenderer = (_a) => {
         };
     }, []);
     const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
-    return RFC ? (React.createElement("div", Object.assign({}, rest, { ref: ref }),
-        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref })));
+    return RFC ? (React.createElement("div", { ...rest, ref: ref },
+        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
 };

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -1,23 +1,16 @@
 import * as React from 'react';
 import { AdaptableColumn, AdaptableColumnDataType } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { ListGroupProps } from '../../../components/List/ListGroup';
-export interface ListBoxFilterFormProps extends ListGroupProps {
-    currentColumn: AdaptableColumn;
-    columns: AdaptableColumn[];
-    useAgGridStyle?: boolean;
-    columnDistinctValues: {
+import { SelectProps } from '../../../components/Select';
+export interface ColumnValuesSelectProps {
+    column: AdaptableColumn;
+    options: {
         label: string;
         value: any;
     }[];
-    uiSelectedColumnValues: Array<string>;
-    onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
+    value: Array<string>;
+    onChange: (value: Array<any>) => void;
     dataType: AdaptableColumnDataType;
     isLoading?: boolean;
-    suppressClientSideFilter?: boolean;
-    onFilterChange?: (filter: string) => void;
+    selectProps?: Partial<SelectProps<any, false>>;
 }
-export interface ListBoxFilterFormState extends React.ClassAttributes<any> {
-    UiSelectedColumnValues: Array<string>;
-    FilterValue: string;
-}
-export declare const ListBoxFilterForm: (props: ListBoxFilterFormProps) => JSX.Element;
+export declare const ColumnValuesSelect: (props: ColumnValuesSelectProps) => React.JSX.Element;

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -1,86 +1,40 @@
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import ListGroupItem from '../../../components/List/ListGroupItem';
-import { Box } from 'rebass';
-import { CheckBox } from '../../../components/CheckBox';
-import join from '../../../components/utils/join';
-import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
-import GridList from '../../../components/List/GridList';
-import { useState, useEffect } from 'react';
-import { Loader } from '../../../components/Loader';
 import isDatesEqual from 'date-fns/isEqual';
 import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
-export const ListBoxFilterForm = (props) => {
-    const [FilterValue, setFilterValue] = useState('');
-    const handleFilterValueChange = React.useCallback((newValue) => {
-        setFilterValue(newValue);
-        props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
-    }, [props.onFilterChange]);
-    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = useState(props.uiSelectedColumnValues);
-    const setUiSelectedColumnValues = (values) => {
-        internalUpdateUISelectedColumnValues(values);
-        props.onColumnValueSelectedChange(values);
-    };
-    useEffect(() => {
-        internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
-    }, [props.uiSelectedColumnValues]);
-    const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
-    };
-    const onClickItemColumnValue = (item) => {
-        let index = UiSelectedColumnValues.indexOf(item);
-        if (item instanceof Date) {
-            index = UiSelectedColumnValues.findIndex((selectedValue) => isDatesEqual(parseDateValue(selectedValue), parseDateValue(item)));
-        }
-        if (index >= 0) {
-            const newArray = [...UiSelectedColumnValues];
-            newArray.splice(index, 1);
-            setUiSelectedColumnValues(newArray);
-        }
-        else {
-            setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
-        }
-    };
-    const permittedValuesOptions = props.columnDistinctValues;
-    const columnValuesItemsElements = permittedValuesOptions.map((distinctValue, index) => {
-        let isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+import join from '../../../components/utils/join';
+import { Select } from '../../../components/Select';
+const baseClassName = 'ab-ListBoxFilterForm';
+export const ColumnValuesSelect = (props) => {
+    const column = props.column;
+    const selectedColumnValues = props.value;
+    const value = [];
+    const options = props.options.filter((distinctValue, index) => {
+        let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = UiSelectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+            isActive = selectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
         if (StringExtensions.IsNullOrEmpty(columnLabel)) {
-            return null;
-        }
-        const noMatch = StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
-            StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
-            columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
-        if (!props.suppressClientSideFilter &&
-            StringExtensions.IsNotNullOrEmpty(FilterValue) &&
-            noMatch) {
-            return null;
+            return false;
         }
-        if (props.useAgGridStyle) {
-            return renderItemForAgGridStyle({
-                key: 'columnValue' + index,
-                children: distinctValue.label,
-                checked: isActive,
-                onChange: () => onClickItemColumnValue(distinctValue.value),
-                disabled: props.disabled,
-                style: { width: '100%' },
-            });
+        if (isActive) {
+            value.push(distinctValue.value);
         }
-        return (React.createElement(ListGroupItem, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
+        return true;
     });
-    const textClear = (React.createElement(AdaptableFormControlTextClear, { autoFocus: false, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
-            paddingTop: 'var(--ab-space-1)',
-            paddingBottom: 'var(--ab-space-1)',
-        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
-    const baseClassName = 'ab-ListBoxFilterForm';
-    return (React.createElement("div", { className: join(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
-        React.createElement(Box, { px: 2 },
-            React.createElement(Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
-                textClear,
-                props.isLoading && React.createElement(Loader, null, "Loading"))),
-        !props.isLoading && (React.createElement(GridList, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
+    const component = (React.createElement(Select, { isMulti: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
+            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
+        }, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
+    return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`), onKeyDownCapture: (e) => {
+            const event = e.nativeEvent || e;
+            event.stopPropagation = () => {
+                // see #ensure-keyboard-navigation-works-in-column-values-filter
+                // we want to prevent ag grid from stopping the propagation of the event
+                // so that the event can be handled by the select component and thus makes keyboard navigation work
+                //
+                // the solution is to reassign the stopPropagation method to a function that does nothing
+            };
+        } }, component));
 };

package/src/View/Components/FilterForm/ListBoxMenu.d.ts

@@ -9,6 +9,6 @@ export interface ListBoxMenuState extends React.ClassAttributes<ListBoxMenu> {
 }
 export declare class ListBoxMenu extends React.Component<ListBoxMenuProps, ListBoxMenuState> {
     constructor(props: ListBoxMenuProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onClick(menuItem: AdaptableMenuItem): void;
 }

package/src/View/Components/FilterForm/Waiting.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { Flex } from 'rebass';
 import IconRefresh from '../../../components/icons/refresh';
 export class Waiting extends React.Component {
     render() {
-        const _a = this.props, { WaitingMessage } = _a, props = __rest(_a, ["WaitingMessage"]);
-        return (React.createElement(Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
+        const { WaitingMessage, ...props } = this.props;
+        return (React.createElement(Flex, { flexDirection: "column", marginTop: 2, marginBottom: 2, ...props },
             React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement(IconRefresh, null)),
             React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { InputProps } from '../../../components/Input';
 import { CSSProperties } from 'react';
 export type AdaptableFormControlTextClearProps = {
@@ -6,4 +7,4 @@ export type AdaptableFormControlTextClearProps = {
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
 } & InputProps;
-export declare const AdaptableFormControlTextClear: (props: AdaptableFormControlTextClearProps) => JSX.Element;
+export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -7,7 +7,12 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
+    return (React.createElement(FieldWrap, { onClick: props.onClick, className: props.className, style: {
+            background: 'var(--ab-color-defaultbackground)',
+            overflow: 'visible',
+            width: '100%',
+            ...props.style,
+        } },
         React.createElement(Input, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {

package/src/View/Components/ListBox/DualListBoxEditor.d.ts

@@ -19,4 +19,4 @@ export interface DualListBoxEditorState extends React.ClassAttributes<any> {
     SelectedValuesSortOrder: SortOrder;
     AllValues: Array<any>;
 }
-export declare const DualListBoxEditor: (props: DualListBoxEditorProps) => JSX.Element;
+export declare const DualListBoxEditor: (props: DualListBoxEditorProps) => React.JSX.Element;

package/src/View/Components/ListBox/DualListBoxEditor.js

@@ -18,7 +18,7 @@ const listGroupItemStyle = {
     fontSize: 'small',
     padding: 'var(--ab-space-1)',
 };
-const ButtonDirection = (props) => (React.createElement(SimpleButton, Object.assign({}, props, { style: Object.assign({ whiteSpace: 'nowrap', justifyContent: 'center' }, props.style) })));
+const ButtonDirection = (props) => (React.createElement(SimpleButton, { ...props, style: { whiteSpace: 'nowrap', justifyContent: 'center', ...props.style } }));
 export const DualListBoxEditor = (props) => {
     const [placeholder] = useState(() => {
         let placeholder = document.createElement('button');
@@ -28,7 +28,7 @@ export const DualListBoxEditor = (props) => {
         return placeholder;
     });
     const refDraggedHTMLElement = useRef(null);
-    const refDraggedElement = useRef();
+    const refDraggedElement = useRef(null);
     const refOverHTMLElement = useRef(null);
     const refFirstSelected = useRef(null);
     const createAvailableValuesList = (availableValues, sortOrder) => {
@@ -56,7 +56,7 @@ export const DualListBoxEditor = (props) => {
     const callbackRefs = useRef([]);
     const getProps = useLatest(props);
     const setState = (newState, callback) => {
-        updateState(Object.assign(Object.assign({}, state), newState));
+        updateState({ ...state, ...newState });
         if (newState.SelectedValues && props.SelectedValues !== newState.SelectedValues) {
             getProps().onChange(newState.SelectedValues);
         }
@@ -491,7 +491,7 @@ export const DualListBoxEditor = (props) => {
     });
     const headerFirstListBox = (React.createElement(ListBoxFilterSortComponent, { FilterValue: state.FilterValue, sortColumnValues: sortColumnValues, SortOrder: state.SortOrder, handleChangeFilterValue: handleChangeFilterValue }));
     const headerSecondListBox = (React.createElement(ListBoxFilterSortComponent, { FilterValue: state.SelectedValuesFilterValue, sortColumnValues: sortSelectedColumnValues, SortOrder: state.SelectedValuesSortOrder, handleChangeFilterValue: handleChangeSelectedValuesFilterValue }));
-    return (React.createElement(Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: Object.assign(Object.assign({}, props.style), { maxHeight: '100%', width: '100%' }) },
+    return (React.createElement(Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: { ...props.style, maxHeight: '100%', width: '100%' } },
         React.createElement(Panel, { header: props.HeaderAvailable, className: "ab-DualListBoxEditor__source", bodyProps: { padding: 0 }, marginRight: 2, style: { flex: '4 0 0%' }, bodyScroll: true },
             headerFirstListBox,
             React.createElement(SelectableList, { getItemId: getAvailableItemId, onSelectedChange: onAvailableListSelectionChange },

package/src/View/Components/ListBox/ListBoxFilterSortComponent.d.ts

@@ -7,7 +7,7 @@ export interface ListBoxFilterSortComponentProps extends React.ClassAttributes<L
     sortColumnValues: () => void;
 }
 export declare class ListBoxFilterSortComponent extends React.Component<ListBoxFilterSortComponentProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     handleChangeFilterValue(x: React.FormEvent<any>): void;
     clearFilter(): void;
 }

package/src/View/Components/ModuleValueSelector/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
 export interface ModuleValueSelectorProps extends Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'> {
     isDisabled?: (module: AdaptableModule) => boolean;
 }
-export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => JSX.Element;
+export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => React.JSX.Element;

package/src/View/Components/ModuleValueSelector/index.js

@@ -1,12 +1,11 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { ValueSelector } from '../ValueSelector';
 import { useAdaptable } from '../../AdaptableContext';
 import { useMemo, useCallback } from 'react';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 export const ModuleValueSelector = (props) => {
-    const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = __rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
-    const { api } = useAdaptable();
+    const { options, value, onChange, selectionBoxPosition = 'top', ...valueSelectorProps } = props;
+    const adaptable = useAdaptable();
     const selectedModulesMap = useMemo(() => {
         if (!value || !value.length) {
             return new Map();
@@ -21,11 +20,11 @@ export const ModuleValueSelector = (props) => {
     }, [selectedModulesMap]);
     const moduleLabelMap = useMemo(() => {
         const labelMap = new Map();
-        options.forEach((module) => { var _a; return labelMap.set(module, (_a = api.internalApi.getModuleFriendlyName(module)) !== null && _a !== void 0 ? _a : module); });
+        options.forEach((module) => labelMap.set(module, adaptable.ModuleService.getModuleFriendlyName(module) ?? module));
         return labelMap;
     }, [options]);
     const sortedOptions = useMemo(() => {
         return ArrayExtensions.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
+    return (React.createElement(ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };

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

@@ -8,7 +8,7 @@ export declare const renderScopeSummary: (scope: ColumnScope, labels: {
     scopeWholeRow: string;
     scopeColumns: string;
     scopeDataTypes: string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     scope: ColumnScope;
     scopeColumns?: AdaptableColumn[];
@@ -25,4 +25,4 @@ export interface NewScopeComponentProps extends React.ClassAttributes<any> {
     disableColumns?: boolean;
     isColumnAvailable?: (column: AdaptableColumn) => boolean;
 }
-export declare const NewScopeComponent: (props: NewScopeComponentProps) => JSX.Element;
+export declare const NewScopeComponent: (props: NewScopeComponentProps) => React.JSX.Element;

package/src/View/Components/NewScopeComponent.js

@@ -25,25 +25,25 @@ export const isScopeValid = ({ Scope }) => {
 const DATA_TYPES_MAP = {
     Date: {
         label: 'Date',
-        value: 'Date',
+        value: 'date',
     },
     Number: {
         label: 'Number',
-        value: 'Number',
+        value: 'number',
     },
     String: {
-        label: 'String',
-        value: 'String',
+        label: 'Text',
+        value: 'text',
     },
     Boolean: {
         label: 'Boolean',
-        value: 'Boolean',
+        value: 'boolean',
     },
 };
 export const renderScopeSummary = (scope, labels) => {
     const adaptable = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
-    const columnsInScope = scopeApi.getColumnsForScope(scope);
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, null,
             React.createElement(SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
@@ -56,12 +56,11 @@ export const renderScopeSummary = (scope, labels) => {
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {
-    var _a, _b;
     const { api } = useAdaptable();
     const { columnScopeApi: scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = useState('');
     const scopeColumns = React.useMemo(() => {
-        const allColumns = props.scopeColumns || columnApi.getStandardColumns();
+        const allColumns = props.scopeColumns || columnApi.getUIAvailableColumns();
         if (typeof props.isColumnAvailable === 'function') {
             return allColumns.filter((c) => props.isColumnAvailable(c));
         }
@@ -138,10 +137,9 @@ export const NewScopeComponent = (props) => {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
     const hasColumnTypes = React.useMemo(() => {
-        var _a;
-        return ((_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
+    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
             React.createElement(Radio, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         !props.disableColumns && (React.createElement(Tabs.Tab, { value: "Column" },
@@ -165,20 +163,17 @@ export const NewScopeComponent = (props) => {
                 React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
         hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
             React.createElement(Box, null,
-                React.createElement(Flex, { flexDirection: "column" }, (_b = (_a = api.columnApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
-                    var _a;
-                    return (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
-                            let columnTypes = [].concat(props.scope.ColumnTypes);
-                            if (checked) {
-                                columnTypes.push(columnType);
-                            }
-                            else {
-                                columnTypes = columnTypes.filter((ct) => ct !== columnType);
-                            }
-                            let newScope = {
-                                ColumnTypes: columnTypes,
-                            };
-                            props.updateScope(newScope);
-                        } }, columnType));
-                })))))));
+                React.createElement(Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+                        let columnTypes = [].concat(props.scope.ColumnTypes);
+                        if (checked) {
+                            columnTypes.push(columnType);
+                        }
+                        else {
+                            columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                        }
+                        let newScope = {
+                            ColumnTypes: columnTypes,
+                        };
+                        props.updateScope(newScope);
+                    } }, columnType)))))))));
 };

package/src/View/Components/Panels/PanelDashboard/index.d.ts

@@ -5,11 +5,11 @@ export interface PanelDashboardProps extends PanelProps {
     headerText: string;
     onClose: () => void;
     onConfigure: () => void;
-    showConfigureButton?: boolean;
-    showCloseButton?: boolean;
+    showConfigureActionButton?: boolean;
+    showCloseActionButton?: boolean;
     accessLevel: AccessLevel;
 }
 export declare class PanelDashboard extends React.Component<PanelDashboardProps, {}> {
     static defaultProps: PanelDashboardProps;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
 export class PanelDashboard extends React.Component {
     render() {
-        const { headerText, showConfigureButton, showCloseButton, onConfigure, onClose, accessLevel, children, } = this.props;
-        return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureButton, showClose: showCloseButton, onClose: onClose, accessLevel: accessLevel }, children));
+        const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
+        return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
 PanelDashboard.defaultProps = {
-    showConfigureButton: true,
-    showCloseButton: true,
+    showConfigureActionButton: true,
+    showCloseActionButton: true,
     headerText: 'Module',
     onClose: null,
     onConfigure: null,

package/src/View/Components/Panels/PanelFooter.js

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { Flex, Box } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
 export const PanelFooter = (props) => {
-    var _a, _b;
     return (React.createElement(Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-        React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
+        React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
         React.createElement(Box, { flex: 1 }),
-        React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
+        React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
 };

package/src/View/Components/Panels/PanelToolPanel/index.d.ts

@@ -10,5 +10,5 @@ export interface PanelToolPanelProps extends PanelProps {
 }
 export declare class PanelToolPanel extends React.Component<PanelToolPanelProps, {}> {
     static defaultProps: PanelToolPanelProps;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import { ButtonClose } from '../../Buttons/ButtonClose';
@@ -9,13 +8,36 @@ import join from '../../../../components/utils/join';
 import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
 export class PanelToolPanel extends React.Component {
     render() {
-        const _a = this.props, { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure } = _a, props = __rest(_a, ["useDefaultPanelStyle", "isMinimised", "onMinimiseChanged", "headerText", "onClose", "onConfigure"]);
+        const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
             !isMinimised ? (React.createElement(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
             React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
             onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
             onClose && (React.createElement(ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel, Object.assign({ border: "var(--ab-cmp-toolpanelpanel__border)" }, props, { className: join('ab-ToolPanelPanel', props.className), header: header, style: Object.assign({ color: 'var(--ab-cmp-toolpanelpanel__color)', fill: 'var(--ab-cmp-toolpanelpanel__fill)' }, props.style), headerProps: Object.assign(Object.assign({}, props.headerProps), { alignItems: 'stretch', style: Object.assign({ padding: 'var(--ab-cmp-toolpanelpanel_header__padding)', background: 'var(--ab-cmp-toolpanelpanel_header__background)', color: 'var(--ab-cmp-toolpanelpanel_header__color)', fill: 'var(--ab-cmp-toolpanelpanel_header__fill)' }, (props.headerProps ? props.headerProps.style : null)) }), bodyProps: Object.assign(Object.assign({}, props.bodyProps), { style: Object.assign(Object.assign({ padding: 'var(--ab-cmp-dashboardpanel_body__padding)', background: 'var(--ab-cmp-dashboardpanel_body__background)' }, (props.bodyProps ? props.bodyProps.style : null)), { display: 'flex', flexDirection: 'column' }) }) })));
+        return (React.createElement(Panel, { border: "var(--ab-cmp-toolpanelpanel__border)", ...props, className: join('ab-ToolPanelPanel', props.className), header: header, style: {
+                color: 'var(--ab-cmp-toolpanelpanel__color)',
+                fill: 'var(--ab-cmp-toolpanelpanel__fill)',
+                ...props.style,
+            }, headerProps: {
+                ...props.headerProps,
+                alignItems: 'stretch',
+                style: {
+                    padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
+                    background: 'var(--ab-cmp-toolpanelpanel_header__background)',
+                    color: 'var(--ab-cmp-toolpanelpanel_header__color)',
+                    fill: 'var(--ab-cmp-toolpanelpanel_header__fill)',
+                    ...(props.headerProps ? props.headerProps.style : null),
+                },
+            }, bodyProps: {
+                ...props.bodyProps,
+                style: {
+                    padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
+                    background: 'var(--ab-cmp-dashboardpanel_body__background)',
+                    ...(props.bodyProps ? props.bodyProps.style : null),
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+            } }));
     }
 }
 PanelToolPanel.defaultProps = {

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -18,6 +18,4 @@ export interface PanelWithButtonProps extends PanelProps {
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }
-export declare class PanelWithButton extends React.Component<PanelWithButtonProps & PanelProps, {}> {
-    render(): JSX.Element;
-}
+export declare const PanelWithButton: (props: PanelWithButtonProps) => React.JSX.Element;