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

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableViewPanelFactory } from '../../AdaptableViewFactory';
 import { CustomToolPanelContent } from './CustomToolPanelContent';
@@ -20,7 +20,7 @@ export const ToolPanelWrapper = (props) => {
             return [
                 adaptableToolPanel,
                 moduleInfo.FriendlyName,
-                ModuleToolPanel ? (React.createElement(ModuleToolPanel, { viewType: "ToolPanel", api: api, accessLevel: accessLevel, moduleInfo: moduleInfo })) : null,
+                ModuleToolPanel ? (_jsx(ModuleToolPanel, { viewType: "ToolPanel", api: api, accessLevel: accessLevel, moduleInfo: moduleInfo })) : null,
                 moduleInfo,
             ];
         }
@@ -29,7 +29,7 @@ export const ToolPanelWrapper = (props) => {
             return [
                 customToolPanel.name,
                 customToolPanel?.title ?? customToolPanel.name,
-                React.createElement(CustomToolPanelContent, { customToolPanel: customToolPanel }),
+                _jsx(CustomToolPanelContent, { customToolPanel: customToolPanel }),
             ];
         }
     };
@@ -42,18 +42,17 @@ export const ToolPanelWrapper = (props) => {
         .getModuleService()
         .getModuleById(ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
-        React.createElement(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
-                onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
-            }, isMinimised: isMinimised, onConfigure: isConfigurable
-                ? () => {
-                    const maxWidth = api.internalApi
-                        .getModuleService()
-                        .getPopupMaxWidth(moduleInfo.ModuleName);
-                    const popupParams = maxWidth
-                        ? { maxWidth, source: 'Toolbar' }
-                        : { source: 'Toolbar' };
-                    api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleInfo.ModuleName, moduleInfo.Popup, popupParams));
-                }
-                : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)) }, isMinimised ? null : toolPanelContent)))));
+    return (_jsx(_Fragment, { children: toolPanelContent && (_jsx(Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}`, children: _jsx(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
+                    onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
+                }, isMinimised: isMinimised, onConfigure: isConfigurable
+                    ? () => {
+                        const maxWidth = api.internalApi
+                            .getModuleService()
+                            .getPopupMaxWidth(moduleInfo.ModuleName);
+                        const popupParams = maxWidth
+                            ? { maxWidth, source: 'Toolbar' }
+                            : { source: 'Toolbar' };
+                        api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleInfo.ModuleName, moduleInfo.Popup, popupParams));
+                    }
+                    : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)), children: isMinimised ? null : toolPanelContent }) })) }));
 };

package/src/View/Components/ValueSelector/index.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 { useState, useMemo, useCallback } from 'react';
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
@@ -56,37 +57,32 @@ export function ValueSelector(props) {
         const identifier = toIdentifier(option);
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
-        return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps) => {
-            const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
-                    'twa:mt-1': index,
-                    'twa:mt-0': !index,
-                }, restDomProps.className, `${baseClassName}__option`) },
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
-                    reorderable ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
-                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
-                    singleSelect ? (React.createElement(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                            if (checked) {
-                                selectedMap.clear();
-                                selectedMap.set(identifier, option);
-                            }
-                            else {
-                                selectedMap.delete(identifier);
-                            }
-                            notifyChange();
-                        } }, label)) : (React.createElement(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
-                            if (checked) {
-                                selectedMap.set(identifier, option);
-                            }
-                            else {
-                                selectedMap.delete(identifier);
-                            }
-                            notifyChange();
-                        }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
-        }));
+        return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps) => {
+                const { onPointerDown, ...restDomProps } = itemDomProps;
+                return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
+                        'twa:mt-1': index,
+                        'twa:mt-0': !index,
+                    }, restDomProps.className, `${baseClassName}__option`), children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
+                                    if (checked) {
+                                        selectedMap.clear();
+                                        selectedMap.set(identifier, option);
+                                    }
+                                    else {
+                                        selectedMap.delete(identifier);
+                                    }
+                                    notifyChange();
+                                }, children: label })) : (_jsx(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
+                                    if (checked) {
+                                        selectedMap.set(identifier, option);
+                                    }
+                                    else {
+                                        selectedMap.delete(identifier);
+                                    }
+                                    notifyChange();
+                                }, checked: selectedMap.has(identifier), children: label })), _jsx(Box, { className: "twa:ml-2 twa:flex-1", children: allowReorder ? preparedToLabel(option) : null })] }) }));
+            } }, identifier));
     };
-    const showOnlySelectedCheckbox = (React.createElement(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
+    const showOnlySelectedCheckbox = (_jsx(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly, children: showSelectedOnlyLabel ?? 'Show Selected Only' }));
     const selectionSectionProps = {
         ...props,
         showOnlySelectedCheckbox,
@@ -105,78 +101,69 @@ export function ValueSelector(props) {
             notifyChange();
         },
     };
-    return (React.createElement(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column" },
-        React.createElement(Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Box, { className: "twa:flex-1" }))),
-        renderSelectionSection(selectionSectionProps),
-        React.createElement(DragDropProvider, null,
-            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
-                        proxyElement.classList.add('twa:shadow-md');
-                    }, onDrop: (_sortedIndexes) => {
-                        const selection = [];
-                        const extraKeys = [];
-                        for (const [key, value] of selectedMap) {
-                            if (value != null) {
-                                selection.push(key);
-                            }
-                            else {
-                                // null/non-existent keys have to be stored separately
-                                extraKeys.push(key);
+    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+                            proxyElement.classList.add('twa:shadow-md');
+                        }, onDrop: (_sortedIndexes) => {
+                            const selection = [];
+                            const extraKeys = [];
+                            for (const [key, value] of selectedMap) {
+                                if (value != null) {
+                                    selection.push(key);
+                                }
+                                else {
+                                    // null/non-existent keys have to be stored separately
+                                    extraKeys.push(key);
+                                }
                             }
-                        }
-                        const clone = new Map(selectedMap);
-                        // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
-                        //   selection,
-                        //   dragIndex,
-                        //   dropIndex
-                        // );
-                        const newSelection = _sortedIndexes
-                            .map((index) => selection[index])
-                            .filter((x) => x != null);
-                        newSelection.push(...extraKeys);
-                        selectedMap.clear();
-                        newSelection.forEach((key) => {
-                            selectedMap.set(key, clone.get(key));
-                        });
-                        notifyChange();
-                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, options
-                    .filter((option) => {
-                    let result = true;
-                    if (filter) {
-                        result = filter(option, searchInputValue);
-                    }
-                    result =
-                        result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
-                    return result;
-                })
-                    .map(renderOption))))))));
+                            const clone = new Map(selectedMap);
+                            // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
+                            //   selection,
+                            //   dragIndex,
+                            //   dropIndex
+                            // );
+                            const newSelection = _sortedIndexes
+                                .map((index) => selection[index])
+                                .filter((x) => x != null);
+                            newSelection.push(...extraKeys);
+                            selectedMap.clear();
+                            newSelection.forEach((key) => {
+                                selectedMap.set(key, clone.get(key));
+                            });
+                            notifyChange();
+                        }, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: options
+                                .filter((option) => {
+                                let result = true;
+                                if (filter) {
+                                    result = filter(option, searchInputValue);
+                                }
+                                result =
+                                    result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
+                                return result;
+                            })
+                                .map(renderOption) })) }) }) })] }));
 }
 export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
-    const selectionBox = (React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
-        React.createElement(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-            singleSelect ? (React.createElement(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal" },
-                "(",
-                value.length,
-                " of ",
-                options.length,
-                " selected)")) : (React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
-                    if (checked) {
-                        props.onSelectAll();
-                    }
-                    else {
-                        props.onClear();
-                    }
-                } },
-                React.createElement(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3" },
-                    "Select All",
-                    React.createElement(Box, { className: "twa:text-2 twa:font-normal" },
-                        "(",
-                        value.length,
-                        " of ",
-                        options.length,
-                        " selected)")))),
-            React.createElement("div", { className: "twa:flex-1" }),
-            React.createElement(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
-    return React.createElement(Box, { className: clsx(`${baseClassName}__header `) }, selectionBox);
+    const selectionBox = (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: _jsxs(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: [singleSelect ? (_jsx(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
+                        // For single-select we show the *name* of the selected option
+                        // rather than a (1 of N) counter — useful when the list is
+                        // long enough to scroll past the chosen row.
+                        if (!value.length) {
+                            return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                        }
+                        const selectedId = value[0];
+                        const selectedOption = options.find((o) => toIdentifier(o) === selectedId);
+                        if (!selectedOption) {
+                            return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                        }
+                        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "twa:opacity-70 twa:mr-1", children: "Selected:" }), _jsx("span", { className: "twa:font-medium", children: toLabel(selectedOption) })] }));
+                    })() })) : (_jsx(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+                        if (checked) {
+                            props.onSelectAll();
+                        }
+                        else {
+                            props.onClear();
+                        }
+                    }, children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", _jsxs(Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), _jsx("div", { className: "twa:flex-1" }), _jsx(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })] }) }));
+    return _jsx(Box, { className: clsx(`${baseClassName}__header `), children: selectionBox });
 };

package/src/View/Components/WizardSummaryPage.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import WizardPanel from '../../components/WizardPanel';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 const columnsMap = {
@@ -13,7 +13,5 @@ const tableDOMProps = {
     },
 };
 export const WizardSummaryPage = (props) => {
-    return (React.createElement(WizardPanel, { bodyProps: { className: 'twa:p-0' }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
-        React.createElement(DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
+    return (_jsx(WizardPanel, { bodyProps: { className: 'twa:p-0' }, className: "ab-WizardSummary", "data-name": 'wizard-summary', children: _jsx(DataSource, { data: props.KeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,3 +1,4 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
@@ -9,13 +10,7 @@ import Input from '../../../components/Input';
 import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
-        React.createElement(Tag, { className: "twa:mr-2" },
-            "Name: ",
-            data.Name),
-        React.createElement(Tag, null,
-            "Column: ",
-            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(Tag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
 };
 export const isValidCustomSortColumn = (data, allCustomSorts) => {
     if (!data.Name) {
@@ -62,26 +57,11 @@ export const CustomSortColumnWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
-                        React.createElement(FormRow, { label: "Name" },
-                            React.createElement(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
-        React.createElement(Tabs, { style: { flex: 1, minHeight: 0 } },
-            React.createElement(Tabs.Tab, null, "Column"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
-                    React.createElement(Box, { className: "twa:text-2" }, "Columns"),
-                    React.createElement(Box, { className: "twa:flex-3" }),
-                    React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                        props.onChange({
-                            ...data,
-                            SortedValues: [],
-                            ColumnId: ids[0],
-                        });
-                    }, allowReorder: false })))));
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { style: { flex: 1, minHeight: 0 }, children: [_jsx(Tabs.Tab, { children: "Column" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Box, { className: "twa:text-2", children: "Columns" }), _jsx(Box, { className: "twa:flex-3" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                                    props.onChange({
+                                        ...data,
+                                        SortedValues: [],
+                                        ColumnId: ids[0],
+                                    });
+                                }, allowReorder: false })] })] })] }));
 };

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMemo, useEffect, useState } from 'react';
 import { Loader } from '../../../components/Loader';
@@ -16,7 +17,7 @@ export const isValidCustomSortOrder = (data) => {
     return true;
 };
 export const renderCustomSortValuesSummary = (data) => {
-    return React.createElement(TagList, { tags: data.SortedValues.map(String) });
+    return _jsx(TagList, { tags: data.SortedValues.map(String) });
 };
 export const CustomSortValuesWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -69,14 +70,10 @@ export const CustomSortValuesWizardSection = (props) => {
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return (React.createElement(Tabs, { style: { height: '100%' }, className: className },
-        React.createElement(Tabs.Tab, null, "Sort Order"),
-        React.createElement(Tabs.Content, null,
-            isDistinctValuesLoading && React.createElement(Loader, null, "Loading"),
-            React.createElement(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
-                    props.onChange({
-                        ...data,
-                        SortedValues,
-                    });
-                } }))));
+    return (_jsxs(Tabs, { style: { height: '100%' }, className: className, children: [_jsx(Tabs.Tab, { children: "Sort Order" }), _jsxs(Tabs.Content, { children: [isDistinctValuesLoading && _jsx(Loader, { children: "Loading" }), _jsx(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
+                            props.onChange({
+                                ...data,
+                                SortedValues,
+                            });
+                        } })] })] }));
 };

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -35,14 +35,13 @@ export const CustomSortWizard = (props) => {
         }
         props.onFinishWizard(customSort);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 isValid: (data) => isValidCustomSortColumn(data, allCustomSorts),
                 renderSummary: renderCustomSortColumn,
                 details: 'Enter Name and select a Column to Sort',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));
+                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts }) }));
                 },
                 title: 'Name & Column',
             },
@@ -51,15 +50,13 @@ export const CustomSortWizard = (props) => {
                 details: 'Specify Custom Sort order - drag selected items to modify order',
                 isValid: isValidCustomSortOrder,
                 renderSummary: renderCustomSortValuesSummary,
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CustomSortValuesWizardSection, { onChange: setCustomSort }) })),
             },
             {
                 details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setCustomSort }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setCustomSort }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
@@ -67,8 +64,7 @@ export const CustomSortWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

package/src/View/Dashboard/CustomDashboardButton.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { AdaptableButton } from '../../AdaptableState/Common/AdaptableButton';
 import { DashboardButtonContext } from '../../AdaptableOptions/DashboardOptions';
 import { AdaptableApi } from '../../Api/AdaptableApi';
@@ -8,4 +7,4 @@ export interface CustomDashboardButtonProps {
     api: AdaptableApi;
     accessLevel: AccessLevel;
 }
-export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => React.JSX.Element;
+export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => import("react").JSX.Element;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,30 +1,12 @@
-import * as React from 'react';
-import { useState } from 'react';
-import SimpleButton from '../../components/SimpleButton';
+import { jsx as _jsx } from "react/jsx-runtime";
 import kebabCase from '../../Utilities/utils/kebabCase';
-import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
 export const CustomDashboardButton = (props) => {
     const { button } = props;
-    const [componentRevision, setComponentRevision] = useState(1);
-    // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-    // with the next opportunity we should abstract it
     const dashboardContext = {
         ...props.api.internalApi.buildBaseContext(),
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
-    const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
-    let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
-    let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
-    let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
-    if (button.hidden && button.hidden(button, dashboardContext)) {
-        return null;
-    }
-    const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => {
-            button.onClick?.(button, dashboardContext);
-            setTimeout(() => {
-                // mutate state to force a re-rendering
-                setComponentRevision(componentRevision + 1);
-            }, 16);
-        }, accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
+    const buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext) ?? '';
+    return (_jsx(AdaptableButtonView, { button: button, context: dashboardContext, api: props.api, accessLevel: props.accessLevel, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.dashboard, buttonKey: buttonLabel, ariaLabel: buttonLabel, className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)}` }));
 };