@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.1

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -8,7 +8,13 @@ const fillStyle = {
     right: 0,
     bottom: 0,
 };
-const hostStyle = Object.assign(Object.assign({}, fillStyle), { boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center' });
+const hostStyle = {
+    ...fillStyle,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
 const inputStyle = {
     position: 'relative',
     background: 'transparent',
@@ -18,20 +24,24 @@ const inputStyle = {
     width: '100%',
     border: 'none',
 };
+const disallowedChars = new Set(['e', 'E']);
+const preventDisallowedChars = (e) => {
+    // prevent the user from entering the 'e' character - issue #2839
+    if (disallowedChars.has(e.key)) {
+        e.preventDefault();
+    }
+};
 export const InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
-    var _a;
     const inputRef = React.useRef(null);
     const focus = () => {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.current?.focus();
     };
     const [value, setValue] = useProperty(props, 'value', props.defaultValue, {
         onChange: (value) => {
-            var _a;
             if (value !== '' && value == Number(value)) {
                 value = Number(value);
             }
-            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+            props.onValueChange?.(value);
         },
     });
     React.useEffect(() => {
@@ -51,7 +61,7 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
                 e.stopPropagation();
             }
         } },
-        React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', value: value, onChange: React.useCallback((event) => {
+        React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: props.type ?? 'number', value: value, onKeyDown: preventDisallowedChars, onChange: React.useCallback((event) => {
                 setValue(event.target.value);
             }, []), style: inputStyle, ref: inputRef }),
         showClear ? (React.createElement("div", { style: {

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
+import { ICellEditorComp, ICellEditorParams } from 'ag-grid-enterprise';
 export declare function getStartValue(params: ICellEditorParams): any;
 /**
  * Adaptable number editor parameters extending the AG Grid {@link ICellEditorParams}.
@@ -19,7 +19,7 @@ export interface AdaptableNumberCellEditorParams extends ICellEditorParams {
 }
 export declare const AdaptableReactNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
 /**
- * Number Editor provided by AdapTable and used by default for all `abColDefNumber` columns
+ * Number Editor provided by AdapTable and used by default for all `number` columns
  */
 export declare class AdaptableNumberEditor implements ICellEditorComp {
     private value;

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
 import { InternalAdaptableNumberEditor, } from './InternalAdaptableNumberEditor';
-import { KeyCode, } from '@ag-grid-community/core';
+import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
@@ -31,7 +31,6 @@ const style = {
     bottom: '0px',
 };
 export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
-    var _a, _b;
     const [initialValue] = useState(() => getStartValue(props));
     const valueRef = useRef(initialValue);
     const columnId = props.column.getColId();
@@ -39,19 +38,21 @@ export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
     const colValueParser = props.column.getColDef().valueParser;
     const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
     function onValueChange(value) {
-        var _a;
         value = valueParser
-            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            ? valueParser({
+                ...props,
+                oldValue: props.value,
+                newValue: value,
+            })
             : value;
         valueRef.current = value;
-        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+        props.onValueChange?.(value);
     }
     const editorRef = useRef(null);
     useImperativeHandle(ref, () => {
         return {
             focusIn() {
-                var _a;
-                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                editorRef.current?.focus();
             },
             // the final value to send to the grid, on completion of editing
             getValue() {
@@ -59,9 +60,9 @@ export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
             },
         };
     });
-    const editorElement = (React.createElement(InternalAdaptableNumberEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+    const editorElement = (React.createElement(InternalAdaptableNumberEditor, { defaultValue: initialValue, showClearButton: props.showClearButton ?? true, emptyValue: props.emptyValue ?? '', onValueChange: onValueChange, ref: (editor) => {
             editorRef.current = editor;
-            editor === null || editor === void 0 ? void 0 : editor.focus();
+            editor?.focus();
         } }));
     function onKeyDown(keyDownEvent) {
         adaptable._emit('CellEditorKeyDown', {
@@ -77,14 +78,18 @@ export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
 });
 AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
 /**
- * Number Editor provided by AdapTable and used by default for all `abColDefNumber` columns
+ * Number Editor provided by AdapTable and used by default for all `number` columns
  */
 export class AdaptableNumberEditor {
     constructor() {
         this.valueParser = defaultValueParser;
         this.onValueChange = (value) => {
             this.value = this.valueParser
-                ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
+                ? this.valueParser({
+                    ...this.params,
+                    oldValue: this.params.value,
+                    newValue: value,
+                })
                 : value;
         };
     }
@@ -112,18 +117,16 @@ export class AdaptableNumberEditor {
         return this.value;
     }
     focusIn() {
-        var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+        this.editor?.focus();
     }
     focusOut() { }
     // after this component has been created and inserted into the grid
     afterGuiAttached() {
-        var _a, _b;
         const adaptable = this.params.context.__adaptable;
         const defaultValue = this.value;
-        const editorElement = (React.createElement(InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+        const editorElement = (React.createElement(InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: this.params.showClearButton ?? true, emptyValue: this.params.emptyValue ?? '', onValueChange: this.onValueChange, ref: (editor) => {
                 this.editor = editor;
-                editor === null || editor === void 0 ? void 0 : editor.focus();
+                editor?.focus();
             } }));
         this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
@@ -138,7 +141,6 @@ export class AdaptableNumberEditor {
         });
     }
     destroy() {
-        var _a;
-        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountReactRoot?.();
     }
 }

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -9,7 +9,13 @@ const fillStyle = {
     right: 0,
     bottom: 0,
 };
-const hostStyle = Object.assign(Object.assign({}, fillStyle), { boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center' });
+const hostStyle = {
+    ...fillStyle,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
 const inputStyle = {
     position: 'relative',
     background: 'transparent',
@@ -24,19 +30,16 @@ const inputStyle = {
     paddingRight: '3ch',
 };
 export const InternalAdaptablePercentageEditor = React.forwardRef(function InternalAdaptablePercentageEditorFn(props, ref) {
-    var _a;
     const inputRef = React.useRef(null);
     const focus = () => {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.current?.focus();
     };
     const [value, setValue] = useProperty(props, 'value', props.defaultValue, {
         onChange: (value) => {
-            var _a;
             if (value !== '' && value == Number(value)) {
                 value = Number(value);
             }
-            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+            props.onValueChange?.(value);
         },
     });
     React.useImperativeHandle(ref, () => {
@@ -51,7 +54,7 @@ export const InternalAdaptablePercentageEditor = React.forwardRef(function Inter
                 e.stopPropagation();
             }
         } },
-        React.createElement(NumberInput, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', className: "ab-PercentageEditor-Input", value: value, noArrows: true, autoFocus: true, onChange: React.useCallback((value) => {
+        React.createElement(NumberInput, { type: props.type ?? 'number', className: "ab-PercentageEditor-Input", value: value, noArrows: true, autoFocus: true, onChange: React.useCallback((value) => {
                 setValue(value);
             }, []), style: inputStyle, ref: inputRef }),
         showClear ? (React.createElement("div", { style: {

package/src/agGrid/editors/AdaptablePercentageEditor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICellEditorComp } from '@ag-grid-community/core';
+import { ICellEditorComp } from 'ag-grid-enterprise';
 import { AdaptableNumberCellEditorParams } from '../AdaptableNumberEditor';
 /**
  * AdapTablePercentageCellEditor parameters - extends AdaptableNumberCellEditorParams

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -3,8 +3,7 @@ import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableCon
 import { InternalAdaptablePercentageEditor, } from './InternalAdaptablePercentageEditor';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { getStartValue } from '../AdaptableNumberEditor';
-import { times100 } from '../../../Utilities/times100';
-import { divideBy100 } from '../../../Utilities/divideBy100';
+import NumberExtensions from '../../../Utilities/Extensions/NumberExtensions';
 const defaultValueParser = ({ newValue, oldValue: _ }) => {
     return newValue;
 };
@@ -16,37 +15,38 @@ const style = {
     bottom: '0px',
 };
 export const AdaptableReactPercentageEditor = forwardRef((props, ref) => {
-    var _a, _b;
-    const [initialValue] = useState(() => times100(getStartValue(props)));
+    const [initialValue] = useState(() => NumberExtensions.timesBy100(getStartValue(props)));
     const valueRef = useRef(initialValue);
     const columnId = props.column.getColId();
     const adaptable = props.context.__adaptable;
     const colValueParser = props.column.getColDef().valueParser;
     const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
     function onValueChange(value) {
-        var _a;
         const newValue = valueParser
-            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            ? valueParser({
+                ...props,
+                oldValue: props.value,
+                newValue: value,
+            })
             : value;
         valueRef.current = newValue;
-        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, divideBy100(newValue));
+        props.onValueChange?.(NumberExtensions.divideBy100(newValue));
     }
     const editorRef = useRef(null);
     useImperativeHandle(ref, () => {
         return {
             focusIn() {
-                var _a;
-                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                editorRef.current?.focus();
             },
             // the final value to send to the grid, on completion of editing
             getValue() {
-                return divideBy100(valueRef.current);
+                return NumberExtensions.divideBy100(valueRef.current);
             },
         };
     });
-    const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+    const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: props.showClearButton ?? true, emptyValue: props.emptyValue ?? '', onValueChange: onValueChange, ref: (editor) => {
             editorRef.current = editor;
-            editor === null || editor === void 0 ? void 0 : editor.focus();
+            editor?.focus();
         } }));
     function onKeyDown(keyDownEvent) {
         adaptable._emit('CellEditorKeyDown', {
@@ -69,9 +69,13 @@ export class AdaptablePercentageEditor {
         this.valueParser = defaultValueParser;
         this.onValueChange = (value) => {
             const newValue = this.valueParser
-                ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
+                ? this.valueParser({
+                    ...this.params,
+                    oldValue: this.params.value,
+                    newValue: value,
+                })
                 : value;
-            this.value = divideBy100(newValue);
+            this.value = NumberExtensions.divideBy100(newValue);
         };
     }
     init(params) {
@@ -98,18 +102,16 @@ export class AdaptablePercentageEditor {
         return this.value;
     }
     focusIn() {
-        var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+        this.editor?.focus();
     }
     focusOut() { }
     // after this component has been created and inserted into the grid
     afterGuiAttached() {
-        var _a, _b;
         const adaptable = this.params.context.__adaptable;
-        const defaultValue = times100(this.value);
-        const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+        const defaultValue = NumberExtensions.timesBy100(this.value);
+        const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: this.params.showClearButton ?? true, emptyValue: this.params.emptyValue ?? '', onValueChange: this.onValueChange, ref: (editor) => {
                 this.editor = editor;
-                editor === null || editor === void 0 ? void 0 : editor.focus();
+                editor?.focus();
             } }));
         this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
@@ -124,7 +126,6 @@ export class AdaptablePercentageEditor {
         });
     }
     destroy() {
-        var _a;
-        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountReactRoot?.();
     }
 }

package/src/components/Accordion.js

@@ -12,14 +12,12 @@ export const Accordion = ({ title, children }) => {
     useEffect(() => {
         if (content.current) {
             observer.current = new MutationObserver(() => {
-                var _a;
-                setHeight(`${(_a = content.current) === null || _a === void 0 ? void 0 : _a.scrollHeight}px`);
+                setHeight(`${content.current?.scrollHeight}px`);
             });
             observer.current.observe(content.current, { childList: true, subtree: true });
         }
         return () => {
-            var _a;
-            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            observer.current?.disconnect();
         };
     }, []);
     const toggleAccordion = () => {

package/src/components/AdaptableFormComponent/AdaptableFormComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableFormData, AdaptableForm } from '../../PredefinedConfig/Common/AdaptableForm';
 import { SimpleButtonProps } from '../SimpleButton';
 import { BaseContext } from '../../types';
@@ -22,6 +22,6 @@ export declare function AdaptableFormComponentButtons({ formDef, onClick, defaul
     api: AdaptableApi;
     context: BaseContext;
     focusFirstButton?: boolean;
-}): JSX.Element;
-export declare function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displayTitle, api, context, focusFirstButton, }: AdaptableFormComponentProps): JSX.Element;
+}): React.JSX.Element;
+export declare function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displayTitle, api, context, focusFirstButton, }: AdaptableFormComponentProps): React.JSX.Element;
 export {};

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -4,52 +4,52 @@ import FormLayout, { FormRow } from '../FormLayout';
 import Input from '../Input';
 import SimpleButton from '../SimpleButton';
 import AdaptableInput from '../../View/Components/AdaptableInput';
-import DropdownButton from '../DropdownButton';
 import { useMemo } from 'react';
 import { useAdaptable } from '../../View/AdaptableContext';
+import { Select } from '../Select';
 export function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabledButtons, api, context, focusFirstButton = true, }) {
     return (React.createElement(React.Fragment, null, formDef.buttons.map((button, index) => {
-        var _a;
         const buttonIcon = api.internalApi.getIconForButton(button, context, {
             height: 15,
             width: 15,
         });
         let buttonStyle = api.internalApi.getStyleForButton(button, context
             ? context
-            : Object.assign({}, api.internalApi.buildBaseContext()));
+            : {
+                ...api.internalApi.buildBaseContext(),
+            });
         let buttonLabel = api.internalApi.getLabelForButton(button, context
             ? context
-            : Object.assign({}, api.internalApi.buildBaseContext()));
+            : {
+                ...api.internalApi.buildBaseContext(),
+            });
         let buttonTooltip = api.internalApi.getTooltipForButton(button, context
             ? context
-            : Object.assign({}, api.internalApi.buildBaseContext()));
-        return (React.createElement(SimpleButton, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _a !== void 0 ? _a : defaultTone, variant: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, "data-text": buttonLabel, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, marginLeft: index ? 2 : 0, onClick: () => {
+            : {
+                ...api.internalApi.buildBaseContext(),
+            });
+        return (React.createElement(SimpleButton, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? defaultTone, variant: buttonStyle?.variant, "data-text": buttonLabel, className: buttonStyle?.className, marginLeft: index ? 2 : 0, onClick: () => {
                 onClick(button);
             } }, buttonLabel));
     })));
 }
 export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displayTitle, api, context, focusFirstButton, }) {
-    var _a, _b, _c;
     const getFieldValue = (key) => data[key];
     const setFieldValue = (key, value) => {
-        const newData = Object.assign(Object.assign({}, data), { [key]: value });
+        const newData = { ...data, [key]: value };
         onChange(newData);
     };
     const adaptable = useAdaptable();
-    const disabledButtons = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
-            // defensive programming: conventionally context should ALWAYS be present for validating buttons
-            const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
-            return !isValid;
-        })) !== null && _b !== void 0 ? _b : [];
-    }, [data]);
+    const disabledButtons = useMemo(() => formDef.buttons?.map((button) => {
+        // defensive programming: conventionally context should ALWAYS be present for validating buttons
+        const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
+        return !isValid;
+    }) ?? [], [data]);
     const renderLabel = (field) => {
         return (React.createElement(Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
     };
     const renderField = (field) => {
-        var _a;
-        const value = (_a = getFieldValue(field.name)) !== null && _a !== void 0 ? _a : '';
+        const value = getFieldValue(field.name) ?? '';
         const onChange = (event) => {
             if (field.fieldType === 'number') {
                 const numberValue = Number(event.target.value);
@@ -75,13 +75,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                     label: item.label,
                     onClick: () => setFieldValue(field.name, item.value),
                 }));
-                return (React.createElement(DropdownButton, { style: {
-                        width: '100%',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        fontSize: 'small',
-                    }, items: items, className: "ab-options__select", variant: "outlined", columns: ['label'] }, value));
+                return (React.createElement(Select, { style: { width: '100%' }, className: `ab-options__select`, options: items, onChange: (newValue) => setFieldValue(field.name, newValue), value: value }));
             case 'checkbox':
                 return (React.createElement(Input, { type: "checkbox", name: field.name, checked: value, onChange: (event) => {
                         setFieldValue(field.name, event.target.checked);
@@ -95,7 +89,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
         }
     };
     // by default we have 2 columns: label & input
-    const columns = (_b = (_a = formDef.config) === null || _a === void 0 ? void 0 : _a.columns) !== null && _b !== void 0 ? _b : [1, 2];
+    const columns = formDef.config?.columns ?? [1, 2];
     return (React.createElement(React.Fragment, null,
         displayTitle && formDef.title && (React.createElement(Box, { "data-name": "form-title", fontSize: 5, mb: 2, style: { fontWeight: 'bold' } }, formDef.title)),
         formDef.description && (React.createElement(Box, { "data-name": "form-description", mb: 3 }, formDef.description)),
@@ -126,7 +120,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                         },
                     });
                 }
-            }, "data-name": "form-content", columns: columns, style: { overflow: 'auto' }, paddingRight: 1 }, (_c = formDef.fields) === null || _c === void 0 ? void 0 : _c.map((field, index) => {
+            }, "data-name": "form-content", columns: columns, style: { overflow: 'auto' }, paddingRight: 1 }, formDef.fields?.map((field, index) => {
             if (Array.isArray(field)) {
                 const rowFields = {};
                 field.map((fieldItem, index) => {
@@ -134,7 +128,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                     rowFields[rowFieldIndex] = renderLabel(fieldItem);
                     rowFields[rowFieldIndex + 1] = renderField(fieldItem);
                 });
-                return React.createElement(FormRow, Object.assign({ key: index }, rowFields));
+                return React.createElement(FormRow, { key: index, ...rowFields });
             }
             else {
                 return (React.createElement(FormRow, { key: field.name },

package/src/components/CheckBox/index.d.ts

@@ -17,8 +17,8 @@ type TypeProps = {
 };
 export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
-declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => React.JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {
     orientation: 'horizontal' | 'vertical';
-}) => JSX.Element;
+}) => React.JSX.Element;
 export { CheckBox };

package/src/components/CheckBox/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { Box, Flex } from 'rebass';
@@ -6,8 +5,7 @@ import join from '../utils/join';
 const Square = (props) => {
     return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
 };
-const CheckBox = (_a) => {
-    var { children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-space-1)', childrenPosition = 'end', as = 'label' } = _a, props = __rest(_a, ["children", "checked", "onChange", "value", "name", "disabled", "readOnly", "variant", "gapDistance", "childrenPosition", "as"]);
+const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-space-1)', childrenPosition = 'end', as = 'label', ...props }) => {
     const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {
@@ -39,7 +37,7 @@ const CheckBox = (_a) => {
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' && children ? gap : null;
     let indeterminate = computedChecked === null;
-    const checkboxRef = useRef();
+    const checkboxRef = useRef(null);
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
@@ -48,7 +46,7 @@ const CheckBox = (_a) => {
             opacity: 0,
             cursor: 'pointer',
         }, onChange: onInputChange }));
-    return (React.createElement(Box, Object.assign({ my: 2 }, props, { className: join('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as }),
+    return (React.createElement(Box, { my: 2, ...props, className: join('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as },
         before,
         beforeGap,
         input,
@@ -57,7 +55,7 @@ const CheckBox = (_a) => {
         after));
 };
 export const CheckBoxGroup = (props) => {
-    const { orientation } = props, flexProps = __rest(props, ["orientation"]);
-    return (React.createElement(Flex, Object.assign({ className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps)));
+    const { orientation, ...flexProps } = props;
+    return (React.createElement(Flex, { className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps }));
 };
 export { CheckBox };

package/src/components/CodeBlock/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-CodeBlock";
-export declare const CodeBlock: (props: BoxProps) => JSX.Element;
+export declare const CodeBlock: (props: BoxProps) => React.JSX.Element;

package/src/components/CodeBlock/index.js

@@ -3,5 +3,5 @@ import { Box } from 'rebass';
 import join from '../utils/join';
 export const baseClassName = 'ab-CodeBlock';
 export const CodeBlock = (props) => {
-    return React.createElement(Box, Object.assign({ as: "code" }, props, { className: join(props.className, baseClassName) }));
+    return React.createElement(Box, { as: "code", ...props, className: join(props.className, baseClassName) });
 };

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -8,4 +8,4 @@ export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     value: string;
     includeAlpha?: boolean;
 } & Omit<BoxProps, 'onChange'>;
-export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "api" | "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "step" | "sizes" | "variant" | "tx" | "as" | "css" | "key" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode" | "includeAlpha"> & React.RefAttributes<unknown>>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & React.RefAttributes<unknown>>;

package/src/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { Box, Flex } from 'rebass';
 import Input from '../Input';
@@ -6,8 +5,8 @@ import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import tinycolor from 'tinycolor2';
 export const ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { api, value, includeAlpha = true } = props, restProps = __rest(props, ["api", "value", "includeAlpha"]);
-    const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [getVariableColor(colorItem)]: colorItem })), {});
+    let { api, value, includeAlpha = true, ...restProps } = props;
+    const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [getVariableColor(colorItem)]: colorItem }), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
         return (React.createElement("option", { key: x, value: x }, x));
     });
@@ -23,17 +22,16 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = tinycolor(value).getAlpha();
     return (React.createElement(Flex, { className: 'ColorPicker' },
-        React.createElement(Input, Object.assign({}, restProps, { mr: 2, onChange: (event) => {
-                var _a;
+        React.createElement(Input, { ...restProps, mr: 2, onChange: (event) => {
                 /**
                  * The value is not in the map when the color is not in the palette.
                  */
-                const color = (_a = optionsMap[event.target.value]) !== null && _a !== void 0 ? _a : event.target.value;
+                const color = optionsMap[event.target.value] ?? event.target.value;
                 props.onChange(color);
             }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
-            }, list: "ABcolorChoices" })),
+            }, list: "ABcolorChoices" }),
         ABcolorChoices,
         includeAlpha && (React.createElement(Flex, { alignItems: "center" },
             React.createElement(Box, { mr: 1 }, "Opacity"),