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

package/src/View/Comments/CommentsEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { Icon } from '../../components/icons';
@@ -52,68 +53,50 @@ export const CommentsEditor = (props) => {
     const formatDate = (date, format) => {
         return FormatHelper.DateFormatter(date, { Pattern: format });
     };
-    return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
+    return (_jsxs(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }
-        } },
-        showCloseButton && (React.createElement(Flex, null,
-            React.createElement(Box, { className: "twa:flex-1" }),
-            React.createElement(SimpleButton, { onClick: (event) => {
-                    event.stopPropagation();
-                    api.commentApi.hideCommentsPopup();
-                }, variant: "text", icon: "close" }))),
-        React.createElement(Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef }, comments &&
-            comments.length > 0 &&
-            comments.map((comment, index) => {
-                if (!comment) {
-                    return null;
-                }
-                const isOwnComment = comment?.Author?.UserName
-                    ? comment?.Author?.UserName === userId
-                    : true; // no owner means it's the current user
-                return (React.createElement(Box, { key: comment.Uuid ?? index, className: "ab-Comment twa:p-2" },
-                    React.createElement(Flex, { alignItems: "center", className: "twa:mb-2" },
-                        React.createElement(Box, null,
-                            React.createElement(Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", className: "twa:text-2" }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
-                        React.createElement(Box, { className: "twa:flex-1" }),
-                        React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
-                        React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
-                                api.commentApi.deleteComment(comment, cellAddress);
-                                requestAnimationFrame(() => {
-                                    props.onRefreshContent();
-                                });
-                            } })),
-                    React.createElement(Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
-                            if (comment.Uuid === activeEditingComment) {
-                                setActiveEditingComment(null);
-                            }
-                        }, onChange: (event) => {
-                            api.commentApi.editComment({
-                                ...comment,
-                                Value: event.target.value,
-                            }, cellAddress);
-                        } })) : (React.createElement(Box, { "data-name": "comment-text" }, comment.Value)))));
-            })),
-        React.createElement(AdaptableInput, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
-                setNewCommentText(event.target.value);
-            }, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    api.commentApi.addComment(newCommentText, cellAddress);
-                    setNewCommentText('');
-                    requestAnimationFrame(() => {
-                        props.onRefreshContent();
-                        scrollToBottom();
-                    });
-                }
-            }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }),
-        React.createElement(SimpleButton, { className: "twa:w-full", variant: "raised", onClick: () => {
-                api.settingsPanelApi.openSettingsPanel('Comment');
-                api.internalApi.getAnnotationsService().hidePopup();
-            } },
-            React.createElement(Box, { className: "twa:mr-2" },
-                React.createElement(Icon, { name: "folder" })),
-            ' ',
-            "Open all Comments")));
+        }, children: [showCloseButton && (_jsxs(Flex, { children: [_jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { onClick: (event) => {
+                            event.stopPropagation();
+                            api.commentApi.hideCommentsPopup();
+                        }, variant: "text", icon: "close" })] })), _jsx(Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef, children: comments &&
+                    comments.length > 0 &&
+                    comments.map((comment, index) => {
+                        if (!comment) {
+                            return null;
+                        }
+                        const isOwnComment = comment?.Author?.UserName
+                            ? comment?.Author?.UserName === userId
+                            : true; // no owner means it's the current user
+                        return (_jsxs(Box, { className: "ab-Comment twa:p-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:mb-2", children: [_jsxs(Box, { children: [_jsx(Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold", children: comment?.Author?.UserName }), comment.Timestamp && (_jsx(Box, { "data-name": "comment-timestamp", className: "twa:text-2", children: formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat()) }))] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }), _jsx(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
+                                                api.commentApi.deleteComment(comment, cellAddress);
+                                                requestAnimationFrame(() => {
+                                                    props.onRefreshContent();
+                                                });
+                                            } })] }), _jsx(Box, { onClick: () => setActiveEditingComment(comment.Uuid), children: comment.Uuid === activeEditingComment ? (_jsx(AdaptableInput, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
+                                            if (comment.Uuid === activeEditingComment) {
+                                                setActiveEditingComment(null);
+                                            }
+                                        }, onChange: (event) => {
+                                            api.commentApi.editComment({
+                                                ...comment,
+                                                Value: event.target.value,
+                                            }, cellAddress);
+                                        } })) : (_jsx(Box, { "data-name": "comment-text", children: comment.Value })) })] }, comment.Uuid ?? index));
+                    }) }), _jsx(AdaptableInput, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
+                    setNewCommentText(event.target.value);
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        api.commentApi.addComment(newCommentText, cellAddress);
+                        setNewCommentText('');
+                        requestAnimationFrame(() => {
+                            props.onRefreshContent();
+                            scrollToBottom();
+                        });
+                    }
+                }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }), _jsxs(SimpleButton, { className: "twa:w-full", variant: "raised", onClick: () => {
+                    api.settingsPanelApi.openSettingsPanel('Comment');
+                    api.internalApi.getAnnotationsService().hidePopup();
+                }, children: [_jsx(Box, { className: "twa:mr-2", children: _jsx(Icon, { name: "folder" }) }), ' ', "Open all Comments"] })] }));
 };

package/src/View/Comments/CommentsPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
@@ -59,39 +60,20 @@ const CellComments = (props) => {
         return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
     }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
-    return (React.createElement(Panel, { className: "twa:mb-2", header: React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
-            React.createElement(Box, { className: "twa:mr-2" },
-                React.createElement("b", null, "Cell Value:"),
-                " ",
-                cellValue),
-            React.createElement(Box, { className: "twa:mr-2" },
-                React.createElement("b", null,
-                    primaryKeyHeader,
-                    ":"),
-                " ",
-                props.commentThread.PrimaryKeyValue),
-            React.createElement(Box, null,
-                React.createElement("b", null, "Column:"),
-                " ",
-                columnFriendlyName),
-            React.createElement(Box, { className: "twa:flex-1" }),
-            React.createElement(AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
-                    adaptable.api.internalApi.getAnnotationsService().showPopup({
-                        ColumnId: props.commentThread.ColumnId,
-                        PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
-                    }, true);
-                } }),
-            React.createElement(AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
-                    adaptable.api.commentApi.deleteCommentThread(props.commentThread);
-                } })) },
-        React.createElement(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
-            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+    return (_jsx(Panel, { className: "twa:mb-2", header: _jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Box, { className: "twa:mr-2", children: [_jsx("b", { children: "Cell Value:" }), " ", cellValue] }), _jsxs(Box, { className: "twa:mr-2", children: [_jsxs("b", { children: [primaryKeyHeader, ":"] }), " ", props.commentThread.PrimaryKeyValue] }), _jsxs(Box, { children: [_jsx("b", { children: "Column:" }), " ", columnFriendlyName] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
+                        adaptable.api.internalApi.getAnnotationsService().showPopup({
+                            ColumnId: props.commentThread.ColumnId,
+                            PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
+                        }, true);
+                    } }), _jsx(AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
+                        adaptable.api.commentApi.deleteCommentThread(props.commentThread);
+                    } })] }), children: _jsx(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };
 export const CommentsPopup = (props) => {
     const commentThreads = useSelector((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
-        return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
-    })));
+    return (_jsx(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage, children: (commentThreads ?? []).map((commentThread, index) => {
+            return _jsx(CellComments, { commentThread: commentThread }, commentThread?.Uuid ?? index);
+        }) }));
 };

package/src/View/Components/AdaptableButton/AdaptableButtonComponent.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
+export declare const AdaptableButtonComponent: React.FunctionComponent<SimpleButtonProps>;

package/src/View/Components/AdaptableButton/AdaptableButtonComponent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isAdaptableSystemIcon } from '../../../components/Icon';
+import SimpleButton from '../../../components/SimpleButton';
+import { useAdaptable } from '../../AdaptableContext';
+/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
+export const AdaptableButtonComponent = (props) => {
+    let icon = props.icon;
+    const adaptable = useAdaptable();
+    if (adaptable && isAdaptableSystemIcon(icon)) {
+        icon = adaptable.api?.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
+    }
+    return _jsx(SimpleButton, { ...props, icon: icon });
+};

package/src/View/Components/AdaptableButton/AdaptableButtonView.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { AdaptableButton } from '../../../AdaptableState/Common/AdaptableButton';
+import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
+import { BaseContext } from '../../../types';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+/**
+ * Default variant/tone when `buttonStyle` omits them — differs by surface by design.
+ */
+export declare const ADAPTABLE_BUTTON_SURFACE_DEFAULTS: {
+    readonly dashboard: {
+        variant: "text";
+        tone: "none";
+    };
+    readonly customToolbar: {
+        variant: "outlined";
+        tone: "neutral";
+    };
+    readonly toolPanel: {
+        variant: "text";
+        tone: "none";
+    };
+    readonly customToolPanel: {
+        variant: "text";
+        tone: "none";
+    };
+    readonly actionColumn: {
+        variant: "text";
+        tone: "none";
+    };
+};
+export type AdaptableButtonSurfaceDefaults = Pick<SimpleButtonProps, 'variant' | 'tone'>;
+export interface AdaptableButtonViewProps<CONTEXT extends BaseContext> {
+    button: AdaptableButton<CONTEXT>;
+    context: CONTEXT;
+    api: AdaptableApi;
+    accessLevel?: AccessLevel;
+    defaults?: AdaptableButtonSurfaceDefaults;
+    /** When true (default), re-renders after click so dynamic label/disabled/hidden update */
+    rerenderOnClick?: boolean;
+    onAfterClick?: () => void;
+    iconSize?: {
+        height: number;
+        width: number;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+    buttonKey?: React.Key;
+    'data-name'?: string;
+    'data-text'?: string;
+    ariaLabel?: string;
+    autoFocus?: boolean;
+    /** Overrides `disabled` from the button definition and read-only access */
+    disabled?: boolean;
+    /** When set, invoked instead of `button.onClick` (e.g. Adaptable Form footer buttons) */
+    onClick?: () => void;
+}
+export declare function AdaptableButtonView<CONTEXT extends BaseContext>(props: AdaptableButtonViewProps<CONTEXT>): React.JSX.Element;

package/src/View/Components/AdaptableButton/AdaptableButtonView.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
+import { AdaptableButtonComponent } from './AdaptableButtonComponent';
+/**
+ * Default variant/tone when `buttonStyle` omits them — differs by surface by design.
+ */
+export const ADAPTABLE_BUTTON_SURFACE_DEFAULTS = {
+    dashboard: { variant: 'text', tone: 'none' },
+    customToolbar: { variant: 'outlined', tone: 'neutral' },
+    toolPanel: { variant: 'text', tone: 'none' },
+    customToolPanel: { variant: 'text', tone: 'none' },
+    actionColumn: { variant: 'text', tone: 'none' },
+};
+export function AdaptableButtonView(props) {
+    const { button, context, api, accessLevel = ACCESS_LEVEL_FULL, defaults, rerenderOnClick = true, onAfterClick, iconSize, className, style, buttonKey, 'data-name': dataName, 'data-text': dataText, ariaLabel, autoFocus, disabled: disabledOverride, onClick: onClickOverride, } = props;
+    const [, setRevision] = useState(0);
+    if (button.hidden?.(button, context)) {
+        return null;
+    }
+    const buttonIcon = api.internalApi.getIconForButton(button, context, iconSize);
+    const buttonStyle = api.internalApi.getStyleForButton(button, context);
+    const buttonLabel = api.internalApi.getLabelForButton(button, context);
+    const buttonTooltip = api.internalApi.getTooltipForButton(button, context);
+    const iconPosition = api.internalApi.getIconPositionForButton(button);
+    const fromDefinition = button.disabled?.(button, context) ?? false;
+    const disabled = disabledOverride ?? (fromDefinition || accessLevel === ACCESS_LEVEL_READ_ONLY);
+    const variant = buttonStyle?.variant ?? defaults?.variant ?? 'outlined';
+    const tone = buttonStyle?.tone ?? defaults?.tone ?? 'neutral';
+    const handleClick = () => {
+        if (onClickOverride) {
+            onClickOverride();
+        }
+        else {
+            button.onClick?.(button, context);
+        }
+        if (rerenderOnClick) {
+            setTimeout(() => {
+                setRevision((revision) => revision + 1);
+                onAfterClick?.();
+            }, 16);
+        }
+        else {
+            onAfterClick?.();
+        }
+    };
+    return (_jsx(AdaptableButtonComponent, { "data-name": dataName, "data-text": dataText, "aria-label": ariaLabel ?? buttonLabel, autoFocus: autoFocus, variant: variant, tone: tone, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, iconPosition: iconPosition, className: className ?? buttonStyle?.className, style: style, onClick: handleClick, accessLevel: ACCESS_LEVEL_FULL, children: buttonLabel }, buttonKey ?? button.Uuid ?? buttonLabel));
+}

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

@@ -1,3 +1,3 @@
-import * as React from 'react';
-import { SimpleButtonProps } from '../../../components/SimpleButton';
-export declare const AdaptableButtonComponent: React.FunctionComponent<SimpleButtonProps>;
+export { AdaptableButtonComponent } from './AdaptableButtonComponent';
+export { AdaptableButtonView, ADAPTABLE_BUTTON_SURFACE_DEFAULTS, } from './AdaptableButtonView';
+export type { AdaptableButtonSurfaceDefaults, AdaptableButtonViewProps, } from './AdaptableButtonView';

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

@@ -1,13 +1,2 @@
-import * as React from 'react';
-import { isAdaptableSystemIcon } from '../../../components/Icon';
-import SimpleButton from '../../../components/SimpleButton';
-import { useAdaptable } from '../../AdaptableContext';
-// This component is connected to adaptable and know about custom icons
-export const AdaptableButtonComponent = (props) => {
-    let icon = props.icon;
-    const adaptable = useAdaptable();
-    if (isAdaptableSystemIcon(icon)) {
-        icon = adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
-    }
-    return React.createElement(SimpleButton, { ...props, icon: icon });
-};
+export { AdaptableButtonComponent } from './AdaptableButtonComponent';
+export { AdaptableButtonView, ADAPTABLE_BUTTON_SURFACE_DEFAULTS, } from './AdaptableButtonView';

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Datepicker } from '../../../components/Datepicker';
 import { useAdaptable } from '../../AdaptableContext';
@@ -36,6 +37,6 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
         showClearButton,
         ...inputProps,
     };
-    return React.createElement(Datepicker, { ref: ref, ...datepickerProps });
+    return _jsx(Datepicker, { ref: ref, ...datepickerProps });
 });
 export default AdaptableDateInput;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { IconComponent } from '../../../components/Icon';
 import { useCustomIcon } from './useCustomIcon';
 /**
@@ -7,5 +7,5 @@ import { useCustomIcon } from './useCustomIcon';
  */
 export const AdaptableIconComponent = (props) => {
     const icon = useCustomIcon(props.icon);
-    return React.createElement(IconComponent, { ...props, icon: icon });
+    return _jsx(IconComponent, { ...props, icon: icon });
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { IconSelector } from '../../../components/IconSelector';
 import { useAdaptable } from '../../AdaptableContext';
 /**
@@ -7,5 +7,5 @@ import { useAdaptable } from '../../AdaptableContext';
 export const AdaptableIconSelector = (props) => {
     const adaptable = useAdaptable();
     const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
-    return React.createElement(IconSelector, { customIcons: customIcons, ...props });
+    return _jsx(IconSelector, { customIcons: customIcons, ...props });
 };

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.js

@@ -1,11 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { isValid, parse } from 'date-fns';
 import { useState } from 'react';
 import Input from '../../../components/Input';
 import { useAdaptable } from '../../AdaptableContext';
+import { getDefaultAdaptableOptions } from '../../../AdaptableOptions/DefaultAdaptableOptions';
 export const AdaptableDateInlineInput = React.forwardRef((props, ref) => {
     const [hasFocus, setHasFocus] = useState(false);
-    const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const adaptable = useAdaptable();
+    const dateInputOptions = adaptable?.adaptableOptions.userInterfaceOptions.dateInputOptions ??
+        getDefaultAdaptableOptions().userInterfaceOptions.dateInputOptions;
     const dateProps = {
         format: dateInputOptions.dateFormat,
         locale: dateInputOptions.locale,
@@ -29,7 +33,7 @@ export const AdaptableDateInlineInput = React.forwardRef((props, ref) => {
             props.onChange(undefined);
         }
     };
-    return (React.createElement(Input, { ...props, onFocus: (event) => {
+    return (_jsx(Input, { ...props, onFocus: (event) => {
             props.onFocus?.(event);
             setHasFocus(true);
         }, onBlur: (event) => {

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../components/Input';
 import { useAdaptable } from '../../AdaptableContext';
@@ -7,11 +8,11 @@ const AdaptableInput = React.forwardRef((props, ref) => {
     const { showClearButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
         // use AdapTable date input
-        return (React.createElement(AdaptableDateInput, { showClearButton: showClearButton, ...inputProps, ref: ref }));
+        return (_jsx(AdaptableDateInput, { showClearButton: showClearButton, ...inputProps, ref: ref }));
     }
     else {
         // native input
-        return React.createElement(Input, { ...inputProps, ref: ref });
+        return _jsx(Input, { ...inputProps, ref: ref });
     }
 });
 export default AdaptableInput;

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

@@ -1,14 +1,11 @@
-import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PanelWithRow } from '../Panels/PanelWithRow';
 import { Box } from '../../../components/Flex';
 import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
 export const AdaptableObjectCollection = (props) => {
-    return (React.createElement(Box, { style: props.style, className: twMerge('ab-ObjectCollection twa:flex twa:flex-col', props.className) },
-        React.createElement(PanelWithRow, { border: "none", colItems: props.colItems }),
-        React.createElement("div", { className: clsx('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
-                'twa:overflow-y-visible': props.allowOverflow,
-                'twa:overflow-y-auto': !props.allowOverflow,
-            }) }, props.items)));
+    return (_jsxs(Box, { style: props.style, className: twMerge('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [_jsx(PanelWithRow, { border: "none", colItems: props.colItems }), _jsx("div", { className: clsx('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+                    'twa:overflow-y-visible': props.allowOverflow,
+                    'twa:overflow-y-auto': !props.allowOverflow,
+                }), children: props.items })] }));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import SimpleButton from '../../../components/SimpleButton';
@@ -36,18 +37,11 @@ export const AdaptableObjectCompactListItem = (props) => {
         labelEl = React.createElement(labelEl, { data: props.abObject });
     }
     labelEl = labelEl ?? objectView.item.name;
-    return (React.createElement(Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        labelEl && (React.createElement(Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]` }, labelEl)),
-        React.createElement(Box, { className: "twa:flex-[2_1_auto]" },
-            typeof objectView.item.view === 'function'
-                ? React.createElement(objectView.item.view, {
-                    data: props.abObject,
-                })
-                : objectView.item.view,
-            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(Box, { className: `${baseClassName}__Item__Values` },
-                React.createElement(TagList, { tags: objectView.item.values.map(String) })))),
-        suspendAction && unSuspendAction && (React.createElement(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
-        React.createElement(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]" }, deleteAction && (React.createElement(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
+    return (_jsxs(Flex, { className: `${baseClassName}__Item`, alignItems: "center", children: [labelEl && (_jsx(Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]`, children: labelEl })), _jsxs(Box, { className: "twa:flex-[2_1_auto]", children: [typeof objectView.item.view === 'function'
+                        ? React.createElement(objectView.item.view, {
+                            data: props.abObject,
+                        })
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
 };
 export const AdaptableObjectCompactList = (props) => {
     const adaptable = useAdaptable();
@@ -70,13 +64,7 @@ export const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (React.createElement(Flex, { flexDirection: "column", className: baseClassName },
-        React.createElement(Flex, { className: `${baseClassName}__Header twa:text-3` },
-            React.createElement(Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
-            React.createElement(Box, { className: "twa:flex-1" }),
-            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
-            deleteAllAction && (React.createElement(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
-        React.createElement(Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
-            return (React.createElement(AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
-        }))));
+    return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' })), deleteAllAction && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+                    return (_jsx(AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
+                }) })] }));
 };

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

@@ -9,6 +9,7 @@ export declare const AdaptableObjectListItemView: React.FunctionComponent<{
     actions?: React.ReactElement[];
     className?: string;
     deleteAction?: Action;
+    deleteConfirmationMsg?: string;
     onDelete?: () => void;
     deleteDisabled?: boolean;
     deleteTooltip?: string;