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

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPanelControl = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
@@ -24,43 +24,33 @@ const QueryViewPanelComponent = (props) => {
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
+    const buttonExpand = ((0, jsx_runtime_1.jsx)(ButtonExpand_1.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 = (0, clsx_1.default)(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = (React.createElement(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter' },
-            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
-            buttonExpand,
-            expressionLabel,
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
+        const expressionLabel = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions_1.default.IsNotNullOrEmpty(expression);
     const hasActiveGridFilter = gridFilter != null && hasExpression;
     const hasNamedQueries = namedQueries && namedQueries.length > 0;
-    const clearButton = hasExpression ? (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
-    const saveButton = hasExpression ? (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
-    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
-    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
+    const clearButton = hasExpression ? ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? ((0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? ((0, jsx_runtime_1.jsx)(NamedQuerySelector_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return (React.createElement(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }) },
-        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
-        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
-                'twa:pl-1': isToolbar,
-                'twa:pt-1': !isToolbar,
-            }) }, renderButtons())));
+        }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
+                    'twa:pl-1': isToolbar,
+                    'twa:pt-1': !isToolbar,
+                }), children: renderButtons() })] }));
 };
 exports.GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/GridFilterWindowPopup.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterWindowPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const GridFilterExpressionEditor_1 = require("./GridFilterExpressionEditor");
 const GridFilterWindowPopup = (props) => {
-    return (React.createElement(GridFilterExpressionEditor_1.GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
+    return ((0, jsx_runtime_1.jsx)(GridFilterExpressionEditor_1.GridFilterExpressionEditor, { expression: props.popupProps.value, onDismiss: props.onDismiss }));
 };
 exports.GridFilterWindowPopup = GridFilterWindowPopup;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQuerySelector = exports.AvailableSearchLabel = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../../components/icons");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -13,17 +13,15 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const ButtonOpen_1 = require("../Components/Buttons/ButtonOpen");
 const Flex_1 = require("../../components/Flex");
 const AvailableSearchLabel = (props) => {
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
-        React.createElement(Flex_1.Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
-        React.createElement(Tag_1.Tag, null, props.expression)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:flex-1", children: props.label }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: props.expression })] }));
 };
 exports.AvailableSearchLabel = AvailableSearchLabel;
 const NamedQuerySelector = (props) => {
     const sortedNamedQueries = ArrayExtensions_1.default.sortArrayWithProperty(Enums_1.SortOrder.Asc, props.namedQueries, 'Name') ?? [];
     const availableSearches = sortedNamedQueries.map((expression) => {
         return {
-            label: (React.createElement(exports.AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
-            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(icons_1.Icon, { name: 'check' }) : null,
+            label: ((0, jsx_runtime_1.jsx)(exports.AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: 'check' }) : null,
             onClick: () => props.onSelect(expression.BooleanExpression),
         };
     });
@@ -32,24 +30,18 @@ const NamedQuerySelector = (props) => {
             .slice(-3)
             .reverse()
             .map((item) => ({
-            label: (React.createElement(exports.AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
-            icon: React.createElement(icons_1.Icon, { name: 'history' }),
+            label: ((0, jsx_runtime_1.jsx)(exports.AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: 'history' }),
             onClick: () => props.setGridFilterExpression(item.expression),
         }))
         : null;
     return ArrayExtensions_1.default.IsNotNullOrEmpty(cachedQueries) ||
-        ArrayExtensions_1.default.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:justify-stretch" },
-                React.createElement(Panel_1.default, { header: "Named Queries" },
-                    React.createElement(Flex_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton_1.default, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
-                    }))),
-                cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel_1.default, { className: "twa:mt-2", header: "Recent Grid Filters" },
-                        React.createElement(Flex_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
-                        }))))) : null),
-        ] },
-        React.createElement(SimpleButton_1.default, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen_1.ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
+        ArrayExtensions_1.default.IsNotNullOrEmpty(availableSearches) ? ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:justify-stretch", children: [(0, jsx_runtime_1.jsx)(Panel_1.default, { header: "Named Queries", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: availableSearches.map((item, index) => {
+                                return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mb-2", variant: "text", onClick: item.onClick, children: item.label }, index));
+                            }) }) }), cachedQueries ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mt-2", header: "Recent Grid Filters", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: cachedQueries.map((cachedQuery, index) => {
+                                    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.disabled, className: "twa:mb-2", variant: "text", onClick: cachedQuery.onClick, children: cachedQuery.label }, index));
+                                }) }) }) })) : null] }),
+        ], children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.disabled, variant: "text", icon: "folder-open", children: props.children }) })) : ((0, jsx_runtime_1.jsx)(ButtonOpen_1.ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
 };
 exports.NamedQuerySelector = NamedQuerySelector;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectsSummary = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../../../components/Flex");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
@@ -17,17 +17,15 @@ const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleVisible()) {
-            return null;
-        }
-        const items = module?.toViewAll?.();
-        if (!items?.length) {
-            return null;
-        }
-        return (React.createElement(Flex_1.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_1.AdaptableObjectList, { items: items, module: module })));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+            if (!module.isModuleVisible()) {
+                return null;
+            }
+            const items = module?.toViewAll?.();
+            if (!items?.length) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, children: [(0, jsx_runtime_1.jsx)("b", { className: `${baseClassName}__header`, children: module.moduleInfo.FriendlyName }), items?.length && (0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })] }, module.moduleInfo.ModuleName));
+        }) }));
 };
 exports.AdaptableObjectsSummary = AdaptableObjectsSummary;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const EnvVars_1 = require("../../../EnvVars");
 const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
@@ -57,7 +57,7 @@ const GridInfoPopup = (props) => {
     keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
+    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
@@ -83,7 +83,7 @@ const GridInfoPopup = (props) => {
             field: 'Value',
             header: 'Value',
             defaultFlex: 3,
-            render: ({ value }) => (React.createElement("span", { style: {
+            render: ({ value }) => ((0, jsx_runtime_1.jsx)("span", { style: {
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'break-word',
                     overflowWrap: 'anywhere',
@@ -91,7 +91,7 @@ const GridInfoPopup = (props) => {
                     lineHeight: '18px',
                     paddingTop: 4,
                     paddingBottom: 4,
-                } }, String(value ?? ''))),
+                }, children: String(value ?? '') })),
         },
     };
     // ---- Grid Options tab: build one InfiniteTableGrid section per non-empty
@@ -238,24 +238,8 @@ const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
-        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel_1.default.FlexBody, null,
-                React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                    showSummary ? React.createElement(Tabs_1.Tabs.Tab, null, "Grid Summary") : null,
-                    showState ? React.createElement(Tabs_1.Tabs.Tab, null, "Grid State") : null,
-                    showOptions ? React.createElement(Tabs_1.Tabs.Tab, null, "Grid Options") : null,
-                    showSummary ? (React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
-                            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap })))) : null,
-                    showState ? (React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }))) : null,
-                    showOptions ? (React.createElement(Tabs_1.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(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key" },
-                                React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: {
-                                        style: { height: sectionHeight(section.rows), width: '100%' },
-                                    }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap })))))))) : null)))));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Summary" }) : null, showState ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid State" }) : null, showOptions ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: {
+                                                    style: { height: sectionHeight(section.rows), width: '100%' },
+                                                }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };
 exports.GridInfoPopup = GridInfoPopup;

package/src/View/KeyHint.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyHint = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../components/Flex");
 const twMerge_1 = require("../twMerge");
 const KeyHint = (props) => {
-    const cls = (0, twMerge_1.twMerge)('twa:text-1 twa:text-inputcolor', props.className);
-    return React.createElement(Flex_1.Box, { ...props, className: cls });
+    const cls = (0, twMerge_1.twMerge)('twa:text-1 twa:text-input-foreground', props.className);
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: cls });
 };
 exports.KeyHint = KeyHint;

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditCurrentLayoutButton = 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"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -14,6 +15,6 @@ const EditCurrentLayoutButton = () => {
         const type = (0, isPivotLayout_1.isPivotLayout)(currentLayout) ? 'pivot' : 'table';
         adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
-    return (React.createElement(SimpleButton_1.default, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
 };
 exports.EditCurrentLayoutButton = EditCurrentLayoutButton;

package/src/View/Layout/LayoutCloneButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutCloneButton = 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"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -13,6 +14,6 @@ const LayoutCloneButton = ({ data, accessLevel }) => {
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, (0, isPivotLayout_1.isPivotLayout)(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return (React.createElement(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
 };
 exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutRadioSelector.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutRadioSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -14,6 +15,6 @@ const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return (React.createElement(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return ((0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.LayoutRadioSelector = LayoutRadioSelector;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,22 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStatusbar = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
-const Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
 const Flex_1 = require("../../components/Flex");
+const NewSelect_1 = require("../../components/NewSelect");
 const LayoutStatusbar = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
     const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
-    return (React.createElement(Flex_1.Box, { onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onClick: (event) => {
             event.stopPropagation();
-        } },
-        React.createElement(Select_1.Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+        }, children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", items: options, value: currentLayout, onValueChange: (value) => {
                 adaptable.api.layoutApi.setLayout(value);
-            } })));
+            } }) }));
 };
 exports.LayoutStatusbar = LayoutStatusbar;

package/src/View/Layout/LayoutViewPanel.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const react_redux_1 = require("react-redux");
 const isEqual_1 = tslib_1.__importDefault(require("../../Utilities/utils/isEqual"));
-const Select_1 = require("../../components/Select");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
@@ -16,9 +16,11 @@ const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const NewDropdownButton_1 = require("../../components/NewDropdownButton");
 const icons_1 = require("../../components/icons");
 const Flex_1 = require("../../components/Flex");
+const NewSelect_1 = require("../../components/NewSelect");
+// import { SingleCombobox } from '../../components/Combobox';
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -33,38 +35,45 @@ const LayoutViewPanelComponent = (props) => {
     const cloneAccessLevel = accessLevel;
     const newAccessLevel = accessLevel;
     const entityAccessLevel = AdaptableHelper_1.default.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_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
-            React.createElement(Select_1.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_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
-                ? GeneralConstants.READ_ONLY_STYLE
-                : '', `ab-${elementType}__Layout__wrap`) },
-            React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
-            React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-            React.createElement(DropdownButton_1.default, { variant: "text", tooltip: GeneralConstants_1.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(icons_1.Icon, { name: "plus" })),
-            React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: GeneralConstants_1.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) => !(0, isPivotLayout_1.isPivotLayout)(layout));
+    const pivotLayoutsArray = Layouts.filter((layout) => (0, isPivotLayout_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                    ? GeneralConstants.READ_ONLY_STYLE
+                    : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
+                            {
+                                dataName: 'table',
+                                label: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
+                            },
+                            {
+                                dataName: 'pivot',
+                                disabled: api.gridApi.isTreeDataGrid(),
+                                label: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "Pivot Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
+                            },
+                        ], accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new`, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }) }), (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { tooltip: GeneralConstants_1.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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PivotDetailsPopoup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -72,7 +73,6 @@ const PivotDetailsPopoup = (props) => {
             }), {}),
         };
     }, [props.popupProps]);
-    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
+    return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId, children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns }) }));
 };
 exports.PivotDetailsPopoup = PivotDetailsPopoup;

package/src/View/Layout/TransposedPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransposedPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
@@ -198,13 +199,6 @@ const TransposedPopup = (props) => {
             });
         };
     }, []);
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
-        React.createElement(Panel_1.default, null,
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
-        React.createElement(Flex_1.Flex, { className: "twa:h-full" },
-            React.createElement(Flex_1.Box, { id: ADAPTABLE_CONTAINER_ID }),
-            React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full twa:h-full", children: [(0, jsx_runtime_1.jsx)(Panel_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Elevated Column", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId }) }) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { id: ADAPTABLE_CONTAINER_ID }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID })] })] }));
 };
 exports.TransposedPopup = TransposedPopup;