@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
@@ -20,9 +21,10 @@ export const AdaptableObjectListItemView = (props) => {
     const dispatch = useDispatch();
     const deleteActionProps = {
         disabled: props.deleteDisabled,
-        tooltip: props.deleteTooltip,
+        tooltip: props.deleteTooltip ?? 'Delete',
         iconSize: ICON_SIZE,
-        ConfirmationMsg: `Are you sure you want to delete this ${props.entityType}?`,
+        ConfirmationMsg: props.deleteConfirmationMsg ??
+            `Are you sure you want to delete this ${props.entityType}?`,
         ConfirmationTitle: `Delete ${props.entityType}`,
         ConfirmAction: props.deleteAction,
         accessLevel: props.accessLevel,
@@ -33,44 +35,25 @@ export const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = React.createElement(ButtonDelete, { ...deleteActionProps });
-    return (React.createElement(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: twMerge(baseClassName, 'twa:rounded-standard', props.className), style: props.style },
-        React.createElement(Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col` }, props.items.filter?.(Boolean)?.map((tag, index) => {
-            const labelElement = typeof tag.label === 'function'
-                ? React.createElement(tag.label, { key: index, data: props.abObject })
-                : tag.label ?? tag.name;
-            return (React.createElement(Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, className: `${baseClassName}__row twa:gap-3` },
-                !tag.isLabelInline && (React.createElement(Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap` },
-                    labelElement,
-                    props.showEditButton && (React.createElement(SimpleButton, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property twa:ml-1`, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            props.handleOnEdit(tag.name);
-                        } })))),
-                React.createElement(Box, { className: `twa:flex-1 ${baseClassName}__values` },
-                    typeof tag.view === 'function'
-                        ? React.createElement(tag.view, {
-                            data: props.abObject,
-                            module: props.module,
-                        })
-                        : tag.view,
-                    Boolean(tag?.values && tag?.values?.length) ? (React.createElement(TagList, { tags: tag.values.map(String) })) : null,
-                    typeof tag.viewAfter === 'function'
-                        ? React.createElement(tag.viewAfter, {
-                            data: props.abObject,
-                            module: props.module,
-                        })
-                        : tag.viewAfter)));
-        })),
-        props.showActions && (React.createElement(Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]` },
-            React.createElement(Flex, { className: "twa:justify-end" },
-                props.actions,
-                props.teamSharingActivated && (React.createElement(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
-                props.onDelete && (React.createElement(SimpleButton, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })),
-                props.deleteAction ? deleteActionButton : null,
-                props.showEditButton && (React.createElement(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
-            props.suspendedEnabled && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { className: "twa:flex-1 twa:min-h-[20px]" }),
-                React.createElement(Flex, { className: "twa:justify-end" },
-                    React.createElement(SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }))))))));
+    const deleteActionButton = _jsx(ButtonDelete, { ...deleteActionProps });
+    return (_jsxs(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: twMerge(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [_jsx(Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
+                    const labelElement = typeof tag.label === 'function'
+                        ? React.createElement(tag.label, { key: index, data: props.abObject })
+                        : tag.label ?? tag.name;
+                    return (_jsxs(Flex, { "data-name": tag.name, className: `${baseClassName}__row twa:gap-3`, children: [!tag.isLabelInline && (_jsxs(Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap`, children: [labelElement, props.showEditButton && (_jsx(SimpleButton, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property twa:ml-1`, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                                            props.handleOnEdit(tag.name);
+                                        } }))] })), _jsxs(Box, { className: `twa:flex-1 ${baseClassName}__values`, children: [typeof tag.view === 'function'
+                                        ? React.createElement(tag.view, {
+                                            data: props.abObject,
+                                            module: props.module,
+                                        })
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values.map(String) })) : null, typeof tag.viewAfter === 'function'
+                                        ? React.createElement(tag.viewAfter, {
+                                            data: props.abObject,
+                                            module: props.module,
+                                        })
+                                        : tag.viewAfter] })] }, `${index}-${tag.name}`));
+                }) }), props.showActions && (_jsxs(Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: [_jsxs(Flex, { className: "twa:justify-end", children: [props.actions, props.teamSharingActivated && (_jsx(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })), props.onDelete && (_jsx(SimpleButton, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })), props.deleteAction ? deleteActionButton : null, props.showEditButton && (_jsx(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))] }), props.suspendedEnabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1 twa:min-h-[20px]" }), _jsx(Flex, { className: "twa:justify-end", children: _jsx(SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }) })] }))] }))] }));
 };
 export const AdaptableObjectListItem = (props) => {
     const adaptable = useAdaptable();
@@ -80,6 +63,7 @@ export const AdaptableObjectListItem = (props) => {
     const viewOptions = props.module?.getViewProperties?.() ?? {};
     const EditWizard = viewOptions.getEditWizard?.(props.data.abObject);
     const deleteAction = viewOptions?.getDeleteAction?.(props.data.abObject);
+    const deleteConfirmationMsg = viewOptions?.getDeleteConfirmationMsg?.(props.data.abObject);
     const isObjectShareable = props.module.isModuleObjectsShareable();
     const teamSharingActivated = isObjectShareable &&
         adaptable.api.teamSharingApi.isTeamSharingAvailable() &&
@@ -117,10 +101,8 @@ export const AdaptableObjectListItem = (props) => {
     const disableDeleteConfirmationState = useSelector((adaptableState) => InternalRedux.DisableDeleteConfirmationSelector(adaptableState.Internal));
     const disableDeleteConfirmation = disableDeleteConfirmationState ||
         adaptableOpttions?.userInterfaceOptions?.disableDeleteConfirmation;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
-        isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));
+    return (_jsxs(_Fragment, { children: [_jsx(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteConfirmationMsg: deleteConfirmationMsg, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }), isEditWizardVisible && EditWizard && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
 };
 export const AdaptableObjectList = (props) => {
-    return (React.createElement("ul", { className: twMerge(clsx(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)) }, props?.items?.map((item, index) => (React.createElement(AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
+    return (_jsx("ul", { className: twMerge(clsx(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)), children: props?.items?.map((item, index) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };

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

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Flex, Box } from '../../../components/Flex';
 import clsx from 'clsx';
 export class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined }, colItem.Content)));
+        const colItems = this.props.colItems.map((colItem, index) => (_jsx(Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", title: typeof colItem.Content === 'string' ? colItem.Content : undefined, children: colItem.Content }, index)));
         const className = clsx('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
-        return (React.createElement(Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
+        return (_jsx(Flex, { className: className, onClick: this.props.onClick, style: this.props.style, children: colItems }));
     }
 }

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

@@ -1,9 +1,23 @@
 import * as React from 'react';
-import { AdaptableIcon, AdaptableStyle } from '../../../types';
+import { AdaptableIcon, BadgeDensity, BadgePillStyle, BadgeShape } from '../../../types';
 export interface BadgeProps {
-    adaptableStyle: AdaptableStyle;
+    /**
+     * Visual styling of the pill itself (cut-down — see {@link BadgePillStyle}).
+     */
+    pillStyle?: BadgePillStyle;
     icon?: AdaptableIcon;
     iconPosition?: 'start' | 'end' | 'Start' | 'End';
-    gap?: number;
+    /**
+     * Visual shape of the badge - owns the pill's corner radius.
+     */
+    shape?: BadgeShape;
+    /**
+     * Padding density preset; modifier class applied to the badge.
+     */
+    density?: BadgeDensity;
+    /**
+     * Pixel gap between icon and text (overrides density preset).
+     */
+    iconGap?: number;
 }
 export declare const Badge: React.FunctionComponent<React.PropsWithChildren<BadgeProps>>;

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

@@ -1,13 +1,71 @@
-import * as React from 'react';
-import { toStyle } from '../../../Utilities/Helpers/StyleHelper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
+const SHAPE_RADIUS = {
+    Pill: '999px',
+    Rounded: '4px',
+    Square: '0',
+};
+const DENSITY_CLASS = {
+    Compact: 'ab-Badge--compact',
+    Normal: 'ab-Badge--normal',
+    Comfortable: 'ab-Badge--comfortable',
+};
+/**
+ * Maps a {@link BadgePillStyle} to React/CSS properties for the pill.
+ *
+ * Intentionally does **not** read corner radius (owned by `Shape`), text
+ * alignment (owned by `BadgeStyle.Font.Alignment` at the cell level),
+ * `ClassName`, or `FontSize` — none make sense on a pill.
+ */
+const pillStyleToCss = (pill) => {
+    const result = {};
+    if (!pill)
+        return result;
+    if (pill.BackColor)
+        result.backgroundColor = pill.BackColor;
+    if (pill.ForeColor)
+        result.color = pill.ForeColor;
+    if (pill.FontWeight) {
+        result.fontWeight = pill.FontWeight.toLowerCase();
+    }
+    if (pill.FontStyle) {
+        result.fontStyle = pill.FontStyle.toLowerCase();
+    }
+    if (pill.TextDecoration && pill.TextDecoration !== 'None') {
+        switch (pill.TextDecoration) {
+            case 'Underline':
+                result.textDecoration = 'underline';
+                break;
+            case 'Overline':
+                result.textDecoration = 'overline';
+                break;
+            case 'LineThrough':
+                result.textDecoration = 'line-through';
+                break;
+        }
+    }
+    if (pill.BorderColor) {
+        result.borderColor = pill.BorderColor;
+        // Subtler 1px outline; pills are usually only ~20px tall.
+        result.borderWidth = 1;
+        result.borderStyle = 'solid';
+    }
+    else {
+        result.borderWidth = 0;
+        result.borderStyle = 'none';
+    }
+    return result;
+};
 export const Badge = (props) => {
-    const { iconPosition = 'start', icon: iconProps } = props;
+    const { iconPosition = 'start', icon: iconProps, shape, density = 'Normal', iconGap } = props;
     const preparedBadgePosition = iconPosition.toLowerCase();
-    const icon = iconProps && React.createElement(AdaptableIconComponent, { icon: iconProps });
-    const style = toStyle(props.adaptableStyle);
-    return (React.createElement("div", { className: "ab-Badge", style: { ...style, marginRight: props.gap } },
-        preparedBadgePosition === 'start' && icon,
-        props.children,
-        preparedBadgePosition === 'end' && icon));
+    const icon = iconProps && _jsx(AdaptableIconComponent, { icon: iconProps });
+    const baseStyle = pillStyleToCss(props.pillStyle);
+    const effectiveShape = shape ?? 'Rounded';
+    baseStyle.borderRadius = SHAPE_RADIUS[effectiveShape];
+    if (typeof iconGap === 'number') {
+        baseStyle.gap = `${iconGap}px`;
+    }
+    const className = ['ab-Badge', DENSITY_CLASS[density]].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: className, style: baseStyle, children: [preparedBadgePosition === 'start' && icon, props.children, preparedBadgePosition === 'end' && icon] }));
 };

package/src/View/Components/Buttons/ButtonApply.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonApply extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { Box } from '../../../../components/Flex';
 import clsx from 'clsx';
 import { twMerge } from '../../../../twMerge';
 const Glyphicon = ({ glyph, style }) => {
-    return React.createElement("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
+    return _jsx("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
 const baseClassName = 'ab-Button twa:text-current';
 export class ButtonBase extends React.Component {
@@ -35,37 +36,26 @@ export class ButtonBase extends React.Component {
         let content;
         if (this.props.displayMode == 'Glyph') {
             if (this.props.transformGlyph) {
-                content = React.createElement(Glyphicon, { glyph: this.props.glyph, style: { transform: 'scale(-1, 1)' } });
+                content = _jsx(Glyphicon, { glyph: this.props.glyph, style: { transform: 'scale(-1, 1)' } });
             }
             else {
-                content = React.createElement(Glyphicon, { glyph: this.props.glyph });
+                content = _jsx(Glyphicon, { glyph: this.props.glyph });
             }
         }
         else if (this.props.displayMode == 'Text') {
-            content = React.createElement("span", null, text);
+            content = _jsx("span", { children: text });
         }
         else if (this.props.displayMode == 'Glyph+Text') {
-            content = (React.createElement("div", null,
-                React.createElement(Glyphicon, { glyph: this.props.glyph }),
-                " ",
-                text));
+            content = (_jsxs("div", { children: [_jsx(Glyphicon, { glyph: this.props.glyph }), " ", text] }));
         }
         else if (this.props.displayMode == 'Text+Glyph') {
-            content = (React.createElement("div", null,
-                text,
-                " ",
-                React.createElement(Glyphicon, { glyph: this.props.glyph })));
+            content = (_jsxs("div", { children: [text, " ", _jsx(Glyphicon, { glyph: this.props.glyph })] }));
         }
         if (this.props.icon) {
-            content = (React.createElement(React.Fragment, null,
-                this.props.iconPosition === 'end' ? text : null,
-                " ",
-                React.createElement(Glyphicon, { glyph: this.props.icon }),
-                ' ',
-                this.props.iconPosition !== 'end' ? text : null));
+            content = (_jsxs(_Fragment, { children: [this.props.iconPosition === 'end' ? text : null, " ", _jsx(Glyphicon, { glyph: this.props.icon }), ' ', this.props.iconPosition !== 'end' ? text : null] }));
         }
-        let button = (React.createElement(Box, { ...this.props, as: "button", style: this.props.style, className: twMerge(clsx(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
-        let buttonwithtooltip = React.createElement("div", null, button);
+        let button = (_jsx(Box, { ...this.props, as: "button", style: this.props.style, className: twMerge(clsx(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
+        let buttonwithtooltip = _jsx("div", { children: button });
         return hideToolTip ? button : buttonwithtooltip;
     }
 }

package/src/View/Components/Buttons/ButtonClear.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonClear extends React.Component {
     render() {
         const { showText, showIcon, ...innerProps } = this.props;
-        return (React.createElement(SimpleButton, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: showIcon == false ? '' : 'close', ...innerProps, variant: "text" }, showText ? 'Clear' : ''));
+        return (_jsx(SimpleButton, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: showIcon == false ? '' : 'close', ...innerProps, variant: "text", children: showText ? 'Clear' : '' }));
     }
 }

package/src/View/Components/Buttons/ButtonClone.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonClone = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "clone", tooltip: "Clone", tone: "accent", icon: "clone", variant: "raised", ...props }, props.children === undefined ? 'Clone' : props.children));
+    return (_jsx(SimpleButton, { "data-name": "clone", tooltip: "Clone", tone: "accent", icon: "clone", variant: "raised", ...props, children: props.children === undefined ? 'Clone' : props.children }));
 };

package/src/View/Components/Buttons/ButtonClose.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonClose extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "close", tooltip: "Close", iconSize: 20, icon: "close", ...this.props, variant: "text" }));
+        return (_jsx(SimpleButton, { "data-name": "close", tooltip: "Close", iconSize: 20, icon: "close", ...this.props, variant: "text" }));
     }
 }

package/src/View/Components/Buttons/ButtonConfigure.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonConfigure extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "configure", tooltip: "Configure", iconSize: 18, icon: "spanner", ...this.props, variant: "text" }));
+        return (_jsx(SimpleButton, { "data-name": "configure", tooltip: "Configure", iconSize: 18, icon: "spanner", ...this.props, variant: "text" }));
     }
 }

package/src/View/Components/Buttons/ButtonDelete.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDispatch } from 'react-redux';
 import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
 import SimpleButton from '../../../components/SimpleButton';
@@ -27,5 +27,5 @@ export const ButtonDelete = (props) => {
             onClickAction?.();
         }
     };
-    return (React.createElement(SimpleButton, { "data-name": "delete", tooltip: props.tooltip ?? 'Delete', variant: "text", icon: "delete", iconSize: props.iconSize ?? 24, ...restProps, onClick: () => onClick() }));
+    return (_jsx(SimpleButton, { "data-name": "delete", tooltip: props.tooltip ?? 'Delete', variant: "text", icon: "delete", iconSize: props.iconSize ?? 24, ...restProps, onClick: () => onClick() }));
 };

package/src/View/Components/Buttons/ButtonEdit.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonEdit = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "edit", tooltip: "Edit", variant: "text", icon: "edit", iconSize: props.iconSize ?? 24, ...props }));
+    return (_jsx(SimpleButton, { "data-name": "edit", tooltip: "Edit", variant: "text", icon: "edit", iconSize: props.iconSize ?? 24, ...props }));
 };

package/src/View/Components/Buttons/ButtonExpand.js

@@ -1,7 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
+import { Maximize2 } from 'lucide-react';
 export class ButtonExpand extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "expand", tooltip: "Expand", iconSize: 20, icon: "arrow-expand", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "expand", tooltip: "Expand", iconSize: 20, icon: _jsx(Maximize2, { size: 20, strokeWidth: 1.5 }), variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonExport.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonExport extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "export", tooltip: "Export", iconSize: 20, icon: "export", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "export", tooltip: "Export", iconSize: 20, icon: "export", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonInfo.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonInfo = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
 };

package/src/View/Components/Buttons/ButtonInvalid.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonInvalid extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "invalid", tooltip: "Invalid", iconSize: 20, icon: "warning", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "invalid", tooltip: "Invalid", iconSize: 20, icon: "warning", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonLogin.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonLogin extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "login", tooltip: "Login", iconSize: 20, icon: "person", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "login", tooltip: "Login", iconSize: 20, icon: "person", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonLogout.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonLogout extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "logout", tooltip: "Logout", iconSize: 20, icon: "logout", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "logout", tooltip: "Logout", iconSize: 20, icon: "logout", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonMaximise.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonMaximise extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "maximise", iconSize: 20, tooltip: "Maximize", icon: this.props.useHoirzontalChevron ? 'arrow-right' : 'arrow-down', variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "maximise", iconSize: 20, tooltip: "Maximize", icon: this.props.useHoirzontalChevron ? 'arrow-right' : 'arrow-down', variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonMinimise.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonMinimise extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "minimise", iconSize: 20, tooltip: "Minimise", ...this.props, variant: "text", icon: "arrow-up" }));
+        return (_jsx(SimpleButton, { "data-name": "minimise", iconSize: 20, tooltip: "Minimise", ...this.props, variant: "text", icon: "arrow-up" }));
     }
 }

package/src/View/Components/Buttons/ButtonNew.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 import { twMerge } from '../../../twMerge';
 export const ButtonNew = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: twMerge(`twa:flex twa:flex-row twa:items-center`, props.className) }, props.children === undefined ? 'New' : props.children));
+    return (_jsx(SimpleButton, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: twMerge(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
 };

package/src/View/Components/Buttons/ButtonNewPage.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonNewPage extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
+        return (_jsx(SimpleButton, { "data-name": "new-page", tooltip: "New Page", iconSize: 20, icon: "newpage" // arrow-up
             , variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonOpen.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonOpen extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonPause.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonPause = (props) => {
     const buttonIcon = props.fillColor === 'red'
@@ -11,5 +11,5 @@ export const ButtonPause = (props) => {
         : {
             name: 'pause',
         };
-    return (React.createElement(SimpleButton, { "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...props }));
 };

package/src/View/Components/Buttons/ButtonPlay.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 export const ButtonPlay = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(props.tooltip) ? 'Play' : props.tooltip, iconSize: 20, icon: "play", variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "play", tooltip: StringExtensions.IsNullOrEmpty(props.tooltip) ? 'Play' : props.tooltip, iconSize: 20, icon: "play", variant: "text", ...props }));
 };

package/src/View/Components/Buttons/ButtonSave.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonSave extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "save", iconSize: 20, icon: "save", tooltip: "Save", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonSchedule.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SimpleButton from '../../../components/SimpleButton';
 export const ButtonSchedule = (props) => {
-    return (React.createElement(SimpleButton, { "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text", ...props }));
+    return (_jsx(SimpleButton, { "data-name": "schedule", tooltip: "Schedule", iconSize: 20, icon: "schedule", variant: "text", ...props }));
 };

package/src/View/Components/Buttons/ButtonShare.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import { AdaptablePopupTeamSharing } from '../Popups/AdaptablePopupTeamSharing';
@@ -8,11 +9,9 @@ export class ButtonShare extends React.Component {
     }
     render() {
         const { onShare, Header, ...buttonProps } = this.props;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton, { "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: buttonProps.iconSize ?? 24, onClick: () => this.setState({ open: true }), ...buttonProps }),
-            this.state.open && (React.createElement(AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
-                    this.setState({ open: false });
-                    onShare(config);
-                } }))));
+        return (_jsxs(_Fragment, { children: [_jsx(SimpleButton, { "data-name": "share", tooltip: "Share", variant: "text", icon: "folder-shared", iconSize: buttonProps.iconSize ?? 24, onClick: () => this.setState({ open: true }), ...buttonProps }), this.state.open && (_jsx(AdaptablePopupTeamSharing, { header: Header, showPopup: true, onClose: () => this.setState({ open: false }), onConfirm: (config) => {
+                        this.setState({ open: false });
+                        onShare(config);
+                    } }))] }));
     }
 }

package/src/View/Components/Buttons/ButtonStop.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonStop extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "stop", tooltip: "Stop", iconSize: 20, icon: "stop", variant: "text", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonUnsuspend.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonUnsuspend extends React.Component {
@@ -12,6 +13,6 @@ export class ButtonUnsuspend extends React.Component {
             : {
                 name: 'resume',
             };
-        return (React.createElement(SimpleButton, { "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...this.props }));
+        return (_jsx(SimpleButton, { "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text", ...this.props }));
     }
 }