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

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

@@ -12,7 +12,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',
@@ -22,20 +28,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();
+    }
+};
 exports.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] = (0, useProperty_1.default)(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(() => {
@@ -55,7 +65,7 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
                 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

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
-const core_1 = require("ag-grid-community");
+const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const react_1 = require("react");
 function shouldClearExistingValue(params) {
-    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+    return params.eventKey === ag_grid_enterprise_1.KeyCode.BACKSPACE || params.eventKey === ag_grid_enterprise_1.KeyCode.DELETE;
 }
 function isValidChar(char) {
     // allow only digits
@@ -36,7 +36,6 @@ const style = {
     bottom: '0px',
 };
 exports.AdaptableReactNumberEditor = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
     const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
     const valueRef = (0, react_1.useRef)(initialValue);
     const columnId = props.column.getColId();
@@ -44,19 +43,21 @@ exports.AdaptableReactNumberEditor = (0, react_1.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 = (0, react_1.useRef)(null);
     (0, react_1.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() {
@@ -64,9 +65,9 @@ exports.AdaptableReactNumberEditor = (0, react_1.forwardRef)((props, ref) => {
             },
         };
     });
-    const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.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_1.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', {
@@ -82,14 +83,18 @@ exports.AdaptableReactNumberEditor = (0, react_1.forwardRef)((props, ref) => {
 });
 exports.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
  */
 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;
         };
     }
@@ -117,18 +122,16 @@ 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_1.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_1.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((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
@@ -143,8 +146,7 @@ class AdaptableNumberEditor {
         });
     }
     destroy() {
-        var _a;
-        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountReactRoot?.();
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

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

@@ -13,7 +13,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',
@@ -28,19 +34,16 @@ const inputStyle = {
     paddingRight: '3ch',
 };
 exports.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] = (0, useProperty_1.default)(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, () => {
@@ -55,7 +58,7 @@ exports.InternalAdaptablePercentageEditor = React.forwardRef(function InternalAd
                 e.stopPropagation();
             }
         } },
-        React.createElement(NumberInput_1.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_1.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

@@ -7,8 +7,7 @@ const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableC
 const InternalAdaptablePercentageEditor_1 = require("./InternalAdaptablePercentageEditor");
 const react_1 = require("react");
 const AdaptableNumberEditor_1 = require("../AdaptableNumberEditor");
-const times100_1 = require("../../../Utilities/times100");
-const divideBy100_1 = require("../../../Utilities/divideBy100");
+const NumberExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/NumberExtensions"));
 const defaultValueParser = ({ newValue, oldValue: _ }) => {
     return newValue;
 };
@@ -20,37 +19,38 @@ const style = {
     bottom: '0px',
 };
 exports.AdaptableReactPercentageEditor = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
-    const [initialValue] = (0, react_1.useState)(() => (0, times100_1.times100)((0, AdaptableNumberEditor_1.getStartValue)(props)));
+    const [initialValue] = (0, react_1.useState)(() => NumberExtensions_1.default.timesBy100((0, AdaptableNumberEditor_1.getStartValue)(props)));
     const valueRef = (0, react_1.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, (0, divideBy100_1.divideBy100)(newValue));
+        props.onValueChange?.(NumberExtensions_1.default.divideBy100(newValue));
     }
     const editorRef = (0, react_1.useRef)(null);
     (0, react_1.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 (0, divideBy100_1.divideBy100)(valueRef.current);
+                return NumberExtensions_1.default.divideBy100(valueRef.current);
             },
         };
     });
-    const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.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_1.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', {
@@ -73,9 +73,13 @@ 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 = (0, divideBy100_1.divideBy100)(newValue);
+            this.value = NumberExtensions_1.default.divideBy100(newValue);
         };
     }
     init(params) {
@@ -102,18 +106,16 @@ 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 = (0, times100_1.times100)(this.value);
-        const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.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_1.default.timesBy100(this.value);
+        const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.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((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
@@ -128,8 +130,7 @@ class AdaptablePercentageEditor {
         });
     }
     destroy() {
-        var _a;
-        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountReactRoot?.();
     }
 }
 exports.AdaptablePercentageEditor = AdaptablePercentageEditor;

package/src/components/Accordion.js

@@ -16,14 +16,12 @@ const Accordion = ({ title, children }) => {
     (0, react_1.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

@@ -8,53 +8,53 @@ const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../DropdownButton"));
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const Select_1 = require("../Select");
 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_1.default, { 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_1.default, { 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));
     })));
 }
 exports.AdaptableFormComponentButtons = AdaptableFormComponentButtons;
 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 = (0, AdaptableContext_1.useAdaptable)();
-    const disabledButtons = (0, react_1.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 = (0, react_1.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(rebass_1.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);
@@ -80,13 +80,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                     label: item.label,
                     onClick: () => setFieldValue(field.name, item.value),
                 }));
-                return (React.createElement(DropdownButton_1.default, { 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_1.Select, { style: { width: '100%' }, className: `ab-options__select`, options: items, onChange: (newValue) => setFieldValue(field.name, newValue), value: value }));
             case 'checkbox':
                 return (React.createElement(Input_1.default, { type: "checkbox", name: field.name, checked: value, onChange: (event) => {
                         setFieldValue(field.name, event.target.checked);
@@ -100,7 +94,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         }
     };
     // 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(rebass_1.Box, { "data-name": "form-title", fontSize: 5, mb: 2, style: { fontWeight: 'bold' } }, formDef.title)),
         formDef.description && (React.createElement(rebass_1.Box, { "data-name": "form-description", mb: 3 }, formDef.description)),
@@ -131,7 +125,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         },
                     });
                 }
-            }, "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) => {
@@ -139,7 +133,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                     rowFields[rowFieldIndex] = renderLabel(fieldItem);
                     rowFields[rowFieldIndex + 1] = renderField(fieldItem);
                 });
-                return React.createElement(FormLayout_1.FormRow, Object.assign({ key: index }, rowFields));
+                return React.createElement(FormLayout_1.FormRow, { key: index, ...rowFields });
             }
             else {
                 return (React.createElement(FormLayout_1.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

@@ -9,8 +9,7 @@ const join_1 = tslib_1.__importDefault(require("../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 = tslib_1.__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] = (0, react_1.useState)(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {
@@ -42,7 +41,7 @@ const CheckBox = (_a) => {
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' && children ? gap : null;
     let indeterminate = computedChecked === null;
-    const checkboxRef = (0, react_1.useRef)();
+    const checkboxRef = (0, react_1.useRef)(null);
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
@@ -51,7 +50,7 @@ const CheckBox = (_a) => {
             opacity: 0,
             cursor: 'pointer',
         }, onChange: onInputChange }));
-    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('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(rebass_1.Box, { my: 2, ...props, className: (0, join_1.default)('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,
@@ -61,7 +60,7 @@ const CheckBox = (_a) => {
 };
 exports.CheckBox = CheckBox;
 const CheckBoxGroup = (props) => {
-    const { orientation } = props, flexProps = tslib_1.__rest(props, ["orientation"]);
-    return (React.createElement(rebass_1.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(rebass_1.Flex, { className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps }));
 };
 exports.CheckBoxGroup = CheckBoxGroup;

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

@@ -7,6 +7,6 @@ const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 exports.baseClassName = 'ab-CodeBlock';
 const CodeBlock = (props) => {
-    return React.createElement(rebass_1.Box, Object.assign({ as: "code" }, props, { className: (0, join_1.default)(props.className, exports.baseClassName) }));
+    return React.createElement(rebass_1.Box, { as: "code", ...props, className: (0, join_1.default)(props.className, exports.baseClassName) });
 };
 exports.CodeBlock = CodeBlock;

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

@@ -9,8 +9,8 @@ const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { api, value, includeAlpha = true } = props, restProps = tslib_1.__rest(props, ["api", "value", "includeAlpha"]);
-    const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem })), {});
+    let { api, value, includeAlpha = true, ...restProps } = props;
+    const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem }), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
         return (React.createElement("option", { key: x, value: x }, x));
     });
@@ -26,17 +26,16 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = (0, tinycolor2_1.default)(value).getAlpha();
     return (React.createElement(rebass_1.Flex, { className: 'ColorPicker' },
-        React.createElement(Input_1.default, Object.assign({}, restProps, { mr: 2, onChange: (event) => {
-                var _a;
+        React.createElement(Input_1.default, { ...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(rebass_1.Flex, { alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),