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

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,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ADAPTABLE_BUTTON_SURFACE_DEFAULTS = void 0;
+exports.AdaptableButtonView = AdaptableButtonView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const AdaptableButtonComponent_1 = require("./AdaptableButtonComponent");
+/**
+ * Default variant/tone when `buttonStyle` omits them — differs by surface by design.
+ */
+exports.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' },
+};
+function AdaptableButtonView(props) {
+    const { button, context, api, accessLevel = GeneralConstants_1.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] = (0, react_1.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 === GeneralConstants_1.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 ((0, jsx_runtime_1.jsx)(AdaptableButtonComponent_1.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: GeneralConstants_1.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,18 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableButtonComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Icon_1 = require("../../../components/Icon");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-// This component is connected to adaptable and know about custom icons
-const AdaptableButtonComponent = (props) => {
-    let icon = props.icon;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
-        icon = adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
-    }
-    return React.createElement(SimpleButton_1.default, { ...props, icon: icon });
-};
-exports.AdaptableButtonComponent = AdaptableButtonComponent;
+exports.ADAPTABLE_BUTTON_SURFACE_DEFAULTS = exports.AdaptableButtonView = exports.AdaptableButtonComponent = void 0;
+var AdaptableButtonComponent_1 = require("./AdaptableButtonComponent");
+Object.defineProperty(exports, "AdaptableButtonComponent", { enumerable: true, get: function () { return AdaptableButtonComponent_1.AdaptableButtonComponent; } });
+var AdaptableButtonView_1 = require("./AdaptableButtonView");
+Object.defineProperty(exports, "AdaptableButtonView", { enumerable: true, get: function () { return AdaptableButtonView_1.AdaptableButtonView; } });
+Object.defineProperty(exports, "ADAPTABLE_BUTTON_SURFACE_DEFAULTS", { enumerable: true, get: function () { return AdaptableButtonView_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS; } });

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Datepicker_1 = require("../../../components/Datepicker");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -39,6 +40,6 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
         showClearButton,
         ...inputProps,
     };
-    return React.createElement(Datepicker_1.Datepicker, { ref: ref, ...datepickerProps });
+    return (0, jsx_runtime_1.jsx)(Datepicker_1.Datepicker, { ref: ref, ...datepickerProps });
 });
 exports.default = AdaptableDateInput;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableIconComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Icon_1 = require("../../../components/Icon");
 const useCustomIcon_1 = require("./useCustomIcon");
 /**
@@ -11,6 +10,6 @@ const useCustomIcon_1 = require("./useCustomIcon");
  */
 const AdaptableIconComponent = (props) => {
     const icon = (0, useCustomIcon_1.useCustomIcon)(props.icon);
-    return React.createElement(Icon_1.IconComponent, { ...props, icon: icon });
+    return (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { ...props, icon: icon });
 };
 exports.AdaptableIconComponent = AdaptableIconComponent;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableIconSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const IconSelector_1 = require("../../../components/IconSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
 /**
@@ -11,6 +10,6 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconSelector = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
-    return React.createElement(IconSelector_1.IconSelector, { customIcons: customIcons, ...props });
+    return (0, jsx_runtime_1.jsx)(IconSelector_1.IconSelector, { customIcons: customIcons, ...props });
 };
 exports.AdaptableIconSelector = AdaptableIconSelector;

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

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableDateInlineInput = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const date_fns_1 = require("date-fns");
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const AdaptableContext_1 = require("../../AdaptableContext");
+const DefaultAdaptableOptions_1 = require("../../../AdaptableOptions/DefaultAdaptableOptions");
 exports.AdaptableDateInlineInput = React.forwardRef((props, ref) => {
     const [hasFocus, setHasFocus] = (0, react_1.useState)(false);
-    const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dateInputOptions = adaptable?.adaptableOptions.userInterfaceOptions.dateInputOptions ??
+        (0, DefaultAdaptableOptions_1.getDefaultAdaptableOptions)().userInterfaceOptions.dateInputOptions;
     const dateProps = {
         format: dateInputOptions.dateFormat,
         locale: dateInputOptions.locale,
@@ -33,7 +37,7 @@ exports.AdaptableDateInlineInput = React.forwardRef((props, ref) => {
             props.onChange(undefined);
         }
     };
-    return (React.createElement(Input_1.default, { ...props, onFocus: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Input_1.default, { ...props, onFocus: (event) => {
             props.onFocus?.(event);
             setHasFocus(true);
         }, onBlur: (event) => {

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -10,11 +11,11 @@ const AdaptableInput = React.forwardRef((props, ref) => {
     const { showClearButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
         // use AdapTable date input
-        return (React.createElement(AdaptableDateInput_1.default, { showClearButton: showClearButton, ...inputProps, ref: ref }));
+        return ((0, jsx_runtime_1.jsx)(AdaptableDateInput_1.default, { showClearButton: showClearButton, ...inputProps, ref: ref }));
     }
     else {
         // native input
-        return React.createElement(Input_1.default, { ...inputProps, ref: ref });
+        return (0, jsx_runtime_1.jsx)(Input_1.default, { ...inputProps, ref: ref });
     }
 });
 exports.default = AdaptableInput;

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

@@ -2,18 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectCollection = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
 const AdaptableObjectCollection = (props) => {
-    return (React.createElement(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className) },
-        React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }),
-        React.createElement("div", { className: (0, clsx_1.default)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
-                'twa:overflow-y-visible': props.allowOverflow,
-                'twa:overflow-y-auto': !props.allowOverflow,
-            }) }, props.items)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [(0, jsx_runtime_1.jsx)(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+                    'twa:overflow-y-visible': props.allowOverflow,
+                    'twa:overflow-y-auto': !props.allowOverflow,
+                }), children: props.items })] }));
 };
 exports.AdaptableObjectCollection = AdaptableObjectCollection;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectCompactList = exports.AdaptableObjectCompactListItem = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
@@ -40,18 +41,11 @@ const AdaptableObjectCompactListItem = (props) => {
         labelEl = React.createElement(labelEl, { data: props.abObject });
     }
     labelEl = labelEl ?? objectView.item.name;
-    return (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        labelEl && (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]` }, labelEl)),
-        React.createElement(Flex_1.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(Flex_1.Box, { className: `${baseClassName}__Item__Values` },
-                React.createElement(Tag_1.TagList, { tags: objectView.item.values.map(String) })))),
-        suspendAction && unSuspendAction && (React.createElement(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
-        React.createElement(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]" }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center", children: [labelEl && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]`, children: labelEl })), (0, jsx_runtime_1.jsxs)(Flex_1.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) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -75,14 +69,8 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: baseClassName },
-        React.createElement(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3` },
-            React.createElement(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
-            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { 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_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
-        React.createElement(Flex_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
-            return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
-        }))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
+                    return ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
+                }) })] }));
 };
 exports.AdaptableObjectCompactList = AdaptableObjectCompactList;

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;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectList = exports.AdaptableObjectListItem = exports.AdaptableObjectListItemView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
@@ -24,9 +25,10 @@ const AdaptableObjectListItemView = (props) => {
     const dispatch = (0, react_redux_1.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,
@@ -37,44 +39,25 @@ const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = React.createElement(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
-    return (React.createElement(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style },
-        React.createElement(Flex_1.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_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, className: `${baseClassName}__row twa:gap-3` },
-                !tag.isLabelInline && (React.createElement(Flex_1.Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap` },
-                    labelElement,
-                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "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(Flex_1.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(Tag_1.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_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]` },
-            React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
-                props.actions,
-                props.teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
-                props.onDelete && (React.createElement(SimpleButton_1.default, { "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_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
-            props.suspendedEnabled && (React.createElement(React.Fragment, null,
-                React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }),
-                React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
-                    React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }))))))));
+    const deleteActionButton = (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": tag.name, className: `${baseClassName}__row twa:gap-3`, children: [!tag.isLabelInline && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap`, children: [labelElement, props.showEditButton && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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);
+                                        } }))] })), (0, jsx_runtime_1.jsxs)(Flex_1.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) ? ((0, jsx_runtime_1.jsx)(Tag_1.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 && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:justify-end", children: [props.actions, props.teamSharingActivated && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })), props.onDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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 && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))] }), props.suspendedEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end", children: (0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }) })] }))] }))] }));
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
@@ -85,6 +68,7 @@ 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() &&
@@ -122,12 +106,10 @@ const AdaptableObjectListItem = (props) => {
     const disableDeleteConfirmationState = (0, react_redux_1.useSelector)((adaptableState) => InternalRedux.DisableDeleteConfirmationSelector(adaptableState.Internal));
     const disableDeleteConfirmation = disableDeleteConfirmationState ||
         adaptableOpttions?.userInterfaceOptions?.disableDeleteConfirmation;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(exports.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.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 && ((0, jsx_runtime_1.jsx)(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
-    return (React.createElement("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(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(exports.AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(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) => ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

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

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectRow = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(Flex_1.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) => ((0, jsx_runtime_1.jsx)(Flex_1.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 = (0, clsx_1.default)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
-        return (React.createElement(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style, children: colItems }));
     }
 }
 exports.AdaptableObjectRow = AdaptableObjectRow;

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,18 +1,75 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableIconComponent_1 = require("../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;
+};
 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_1.AdaptableIconComponent, { icon: iconProps });
-    const style = (0, StyleHelper_1.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 && (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: className, style: baseStyle, children: [preparedBadgePosition === 'start' && icon, props.children, preparedBadgePosition === 'end' && icon] }));
 };
 exports.Badge = Badge;

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonApply = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonApply extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
+        return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
     }
 }
 exports.ButtonApply = ButtonApply;