@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DropdownButton from '../../../components/DropdownButton';
 import FieldWrap from '../../../components/FieldWrap';
 import Input from '../../../components/Input';
@@ -23,21 +23,5 @@ export const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
-        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel.FlexBody, null,
-                React.createElement(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
-                    "Expression:",
-                    React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-full" },
-                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
-                        React.createElement(Input, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }),
-                        isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
-                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-                        ' ',
-                        StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
-                    React.createElement(Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
-                        React.createElement(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1" }, "Save"),
-                        isSuspended ? (React.createElement(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
-                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
+    return (_jsx(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", _jsxs(FieldWrap, { className: "twa:mr-1 twa:w-full", children: [_jsx(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), _jsx(Input, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && (_jsx(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions.IsNotNullOrEmpty(expression) && (_jsx(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), _jsxs(Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [_jsx(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? (_jsx(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : (_jsx(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), _jsx(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), _jsx(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };

package/src/View/GridFilter/GridFilterStatusbar.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 export const GridFilterStatusbar = (props) => {
     const queryMaxLength = 15;
@@ -11,5 +11,5 @@ export const GridFilterStatusbar = (props) => {
         text = query.substring(0, queryMaxLength - 3) + '...';
         popover = query;
     }
-    return React.createElement(React.Fragment, null, text ?? 'No Query');
+    return _jsx(_Fragment, { children: text ?? 'No Query' });
 };

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import FieldWrap from '../../components/FieldWrap';
@@ -20,43 +20,33 @@ const QueryViewPanelComponent = (props) => {
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
-    const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
+    const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
-            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
-        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
-            buttonExpand,
-            expressionLabel,
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
+        const expressionLabel = (_jsx(Tooltip, { label: expression || 'Click to edit Grid Filter', children: _jsx(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        return (_jsxs(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && (_jsx(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
-    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
-    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
+    const clearButton = hasExpression ? (_jsx(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (_jsx(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? (_jsx(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? (_jsx(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? (_jsx(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
     const renderButtons = () => {
-        return (React.createElement(React.Fragment, null,
-            clearButton,
-            isSuspended ? unSuspendButton : suspendButton,
-            saveButton,
-            namedQuerySelector));
+        return (_jsxs(_Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+    return (_jsxs(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }) },
-        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
-        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
-                'twa:pl-1': isToolbar,
-                'twa:pt-1': !isToolbar,
-            }) }, renderButtons())));
+        }), children: [_jsx(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), _jsx(Flex, { className: clsx('twa:flex-shrink-0', {
+                    'twa:pl-1': isToolbar,
+                    'twa:pt-1': !isToolbar,
+                }), children: renderButtons() })] }));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { GridFilterExpressionEditor } from './GridFilterExpressionEditor';
 export const GridFilterWindowPopup = (props) => {
-    return (React.createElement(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+    return (_jsx(GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
 };

package/src/View/GridFilter/NamedQuerySelector.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
@@ -9,16 +9,14 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
 import { Box, Flex } from '../../components/Flex';
 export const AvailableSearchLabel = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
-        React.createElement(Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
-        React.createElement(Tag, null, props.expression)));
+    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full", children: [_jsx(Box, { className: "twa:mb-2 twa:flex-1", children: props.label }), _jsx(Tag, { children: props.expression })] }));
 };
 export const NamedQuerySelector = (props) => {
     const sortedNamedQueries = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name') ?? [];
     const availableSearches = sortedNamedQueries.map((expression) => {
         return {
-            label: (React.createElement(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
-            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(Icon, { name: 'check' }) : null,
+            label: (_jsx(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? _jsx(Icon, { name: 'check' }) : null,
             onClick: () => props.onSelect(expression.BooleanExpression),
         };
     });
@@ -27,23 +25,17 @@ export const NamedQuerySelector = (props) => {
             .slice(-3)
             .reverse()
             .map((item) => ({
-            label: (React.createElement(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
-            icon: React.createElement(Icon, { name: 'history' }),
+            label: (_jsx(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: _jsx(Icon, { name: 'history' }),
             onClick: () => props.setGridFilterExpression(item.expression),
         }))
         : null;
     return ArrayExtensions.IsNotNullOrEmpty(cachedQueries) ||
-        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(Flex, { flexDirection: "column", className: "twa:justify-stretch" },
-                React.createElement(Panel, { header: "Named Queries" },
-                    React.createElement(Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
-                    }))),
-                cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel, { className: "twa:mt-2", header: "Recent Grid Filters" },
-                        React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
-                        }))))) : null),
-        ] },
-        React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
+        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (_jsx(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            _jsxs(Flex, { flexDirection: "column", className: "twa:justify-stretch", children: [_jsx(Panel, { header: "Named Queries", children: _jsx(Flex, { flexDirection: "column", children: availableSearches.map((item, index) => {
+                                return (_jsx(SimpleButton, { className: "twa:mb-2", variant: "text", onClick: item.onClick, children: item.label }, index));
+                            }) }) }), cachedQueries ? (_jsx(_Fragment, { children: _jsx(Panel, { className: "twa:mt-2", header: "Recent Grid Filters", children: _jsx(Flex, { flexDirection: "column", children: cachedQueries.map((cachedQuery, index) => {
+                                    return (_jsx(SimpleButton, { disabled: props.disabled, className: "twa:mb-2", variant: "text", onClick: cachedQuery.onClick, children: cachedQuery.label }, index));
+                                }) }) }) })) : null] }),
+        ], children: _jsx(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open", children: props.children }) })) : (_jsx(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
 };

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../../components/Flex';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
@@ -13,16 +13,14 @@ export const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(Box, { className: clsx(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleVisible()) {
-            return null;
-        }
-        const items = module?.toViewAll?.();
-        if (!items?.length) {
-            return null;
-        }
-        return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
-            React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
-            items?.length && React.createElement(AdaptableObjectList, { items: items, module: module })));
-    })));
+    return (_jsx(Box, { className: clsx(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+            if (!module.isModuleVisible()) {
+                return null;
+            }
+            const items = module?.toViewAll?.();
+            if (!items?.length) {
+                return null;
+            }
+            return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, children: [_jsx("b", { className: `${baseClassName}__header`, children: module.moduleInfo.FriendlyName }), items?.length && _jsx(AdaptableObjectList, { items: items, module: module })] }, module.moduleInfo.ModuleName));
+        }) }));
 };

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
 import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
@@ -53,7 +53,7 @@ export const GridInfoPopup = (props) => {
     keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
@@ -79,7 +79,7 @@ export const GridInfoPopup = (props) => {
             field: 'Value',
             header: 'Value',
             defaultFlex: 3,
-            render: ({ value }) => (React.createElement("span", { style: {
+            render: ({ value }) => (_jsx("span", { style: {
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'break-word',
                     overflowWrap: 'anywhere',
@@ -87,7 +87,7 @@ export const GridInfoPopup = (props) => {
                     lineHeight: '18px',
                     paddingTop: 4,
                     paddingBottom: 4,
-                } }, String(value ?? ''))),
+                }, children: String(value ?? '') })),
         },
     };
     // ---- Grid Options tab: build one InfiniteTableGrid section per non-empty
@@ -234,23 +234,7 @@ export const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
-        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel.FlexBody, null,
-                React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                    showSummary ? React.createElement(Tabs.Tab, null, "Grid Summary") : null,
-                    showState ? React.createElement(Tabs.Tab, null, "Grid State") : null,
-                    showOptions ? React.createElement(Tabs.Tab, null, "Grid Options") : null,
-                    showSummary ? (React.createElement(Tabs.Content, null,
-                        React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })))) : null,
-                    showState ? (React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }))) : null,
-                    showOptions ? (React.createElement(Tabs.Content, null,
-                        React.createElement("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4" }, gridOptionsSections.map((section) => (React.createElement("div", { key: section.title },
-                            React.createElement("h4", { className: "twa:font-semibold twa:mb-1" }, section.title),
-                            React.createElement(DataSource, { data: section.rows, primaryKey: "Key" },
-                                React.createElement(InfiniteTableGrid, { domProps: {
-                                        style: { height: sectionHeight(section.rows), width: '100%' },
-                                    }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap })))))))) : null)))));
+    return (_jsx(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+                                                    style: { height: sectionHeight(section.rows), width: '100%' },
+                                                }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/KeyHint.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../components/Flex';
 import { twMerge } from '../twMerge';
 export const KeyHint = (props) => {
-    const cls = twMerge('twa:text-1 twa:text-inputcolor', props.className);
-    return React.createElement(Box, { ...props, className: cls });
+    const cls = twMerge('twa:text-1 twa:text-input-foreground', props.className);
+    return _jsx(Box, { ...props, className: cls });
 };

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -10,5 +11,5 @@ export const EditCurrentLayoutButton = () => {
         const type = isPivotLayout(currentLayout) ? 'pivot' : 'table';
         adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
-    return (React.createElement(SimpleButton, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
+    return (_jsx(SimpleButton, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -9,5 +10,5 @@ export const LayoutCloneButton = ({ data, accessLevel }) => {
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return (React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
 };

package/src/View/Layout/LayoutRadioSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Radio from '../../components/Radio';
 import { useAdaptable } from '../AdaptableContext';
@@ -10,5 +11,5 @@ export const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return (React.createElement(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (_jsx(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,17 +1,16 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
-import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
 import { Box } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
 export const LayoutStatusbar = () => {
     const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
     const currentLayout = useSelector((state) => state.Layout.CurrentLayout);
-    return (React.createElement(Box, { onClick: (event) => {
+    return (_jsx(Box, { onClick: (event) => {
             event.stopPropagation();
-        } },
-        React.createElement(Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+        }, children: _jsx(SingleSelect, { size: "small", items: options, value: currentLayout, onValueChange: (value) => {
                 adaptable.api.layoutApi.setLayout(value);
-            } })));
+            } }) }));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
 import isEqual from '../../Utilities/utils/isEqual';
-import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
@@ -12,9 +12,11 @@ import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/NewDropdownButton';
 import { Icon } from '../../components/icons';
 import { Flex } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
+// import { SingleCombobox } from '../../components/Combobox';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -29,38 +31,45 @@ const LayoutViewPanelComponent = (props) => {
     const cloneAccessLevel = accessLevel;
     const newAccessLevel = accessLevel;
     const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
-    // Layout options for select
-    const availableLayoutOptions = Layouts.map((layout) => ({
-        ...layout,
-        label: layout.Name,
-        value: layout.Name,
-        onClick: () => onSelectLayout(layout.Name),
-    }));
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
-    return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
-            React.createElement(Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
-        React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
-                ? GeneralConstants.READ_ONLY_STYLE
-                : '', `ab-${elementType}__Layout__wrap`) },
-            React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
-            React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-            React.createElement(DropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [
-                    {
-                        dataName: 'table',
-                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Table Layout"),
-                        onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
-                    },
-                    {
-                        dataName: 'pivot',
-                        disabled: api.gridApi.isTreeDataGrid(),
-                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Pivot Layout"),
-                        onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
-                    },
-                ], tone: "neutral", accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new` },
-                React.createElement(Icon, { name: "plus" })),
-            React.createElement(ButtonDelete, { tooltip: LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel }))));
+    const tableLayoutsArray = Layouts.filter((layout) => !isPivotLayout(layout));
+    const pivotLayoutsArray = Layouts.filter((layout) => isPivotLayout(layout));
+    const layoutGroups = [
+        tableLayoutsArray.length > 0
+            ? {
+                label: 'Table Layouts',
+                items: tableLayoutsArray.map((layout) => ({
+                    label: layout.Name,
+                    value: layout.Name,
+                })),
+            }
+            : null,
+        pivotLayoutsArray.length > 0
+            ? {
+                label: 'Pivot Layouts',
+                items: pivotLayoutsArray.map((layout) => ({
+                    label: layout.Name,
+                    value: layout.Name,
+                })),
+            }
+            : null,
+    ].filter(Boolean);
+    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: _jsx(SingleSelect, { groups: layoutGroups, showItemTooltip: true, disabled: isErrorLayout, className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`, ariaLabel: 'Select Layout', value: layoutEntity ? layoutEntity.Name : null, onValueChange: (layout) => onSelectLayout(layout) }) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                    ? GeneralConstants.READ_ONLY_STYLE
+                    : '', `ab-${elementType}__Layout__wrap`), children: [_jsx(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), _jsx(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), _jsx(NewDropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
+                            {
+                                dataName: 'table',
+                                label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
+                            },
+                            {
+                                dataName: 'pivot',
+                                disabled: api.gridApi.isTreeDataGrid(),
+                                label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Pivot Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
+                            },
+                        ], accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new`, children: _jsx(Icon, { name: "plus" }) }), _jsx(ButtonDelete, { tooltip: LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel })] })] }));
 };
 function mapStateToProps(state, ownProps) {
     const CurrentLayoutName = state.Layout.CurrentLayout;

package/src/View/Layout/PivotDetailsPopoup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import { useAdaptable } from '../AdaptableContext';
@@ -68,6 +69,5 @@ export const PivotDetailsPopoup = (props) => {
             }), {}),
         };
     }, [props.popupProps]);
-    return (React.createElement(DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
+    return (_jsx(DataSource, { data: data, primaryKey: columnId, children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns }) }));
 };

package/src/View/Layout/TransposedPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import Panel from '../../components/Panel';
@@ -194,12 +195,5 @@ export const TransposedPopup = (props) => {
             });
         };
     }, []);
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
-        React.createElement(Panel, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
-        React.createElement(Flex, { className: "twa:h-full" },
-            React.createElement(Box, { id: ADAPTABLE_CONTAINER_ID }),
-            React.createElement(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full", children: [_jsx(Panel, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Elevated Column", children: _jsx(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId }) }) }) }), _jsxs(Flex, { className: "twa:h-full", children: [_jsx(Box, { id: ADAPTABLE_CONTAINER_ID }), _jsx(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID })] })] }));
 };