@adaptabletools/adaptable 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -1,18 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
-import clsx from 'clsx';
-import { TagList } from '../../../components/Tag/Tag';
-export const renderScopeSummary = () => {
-    const { data, api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScopeSummaryTags } from '../../Wizard/scopeSummaryTags';
+export const renderScopeSummary = (data) => {
     if (!('Scope' in data)) {
         return null;
     }
-    const scope = data.Scope;
-    const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
-                        ? 'Changes to any Column in the row will trigger an Alert'
-                        : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => {
-                                return `DataType: ${dataType}`;
-                            }) })] })) : null })] }));
+    return _jsx(ScopeSummaryTags, { scope: data.Scope });
 };

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -42,7 +42,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                                         this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                                         this.onApplyClick();
                                     }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -12,7 +12,7 @@ import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 class BulkUpdateViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -54,15 +54,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return (_jsxs(Flex, { className: clsx(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { className: cn(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
                 'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: clsx('twa:flex-1', {
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: cn('twa:flex-1', {
                         'twa:min-w-[100px]': !isToolbar,
                         'twa:min-w-0': isToolbar,
-                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
-                            listMinWidth: 160,
-                        }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
+                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.d.ts

@@ -6,6 +6,6 @@ export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     expressionType: ExpressionType;
 };
-export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn) => React.JSX.Element;
+export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn, api: AdaptableApi) => React.JSX.Element;
 export declare const isValidCalculatedColumnExpression: (data: CalculatedColumn, api: AdaptableApi) => true | string;
 export declare const CalculatedColumnExpressionWizardSection: (props: CalculatedColumnExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -20,8 +20,7 @@ const getExpressionTypeDescription = (expressionType) => {
             return '';
     }
 };
-export const renderCalculatedColumnExpressionSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
+export const renderCalculatedColumnExpressionSummary = (data, api) => {
     return (_jsxs(Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', _jsx(CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
 };
 export const isValidCalculatedColumnExpression = (data, api) => {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -62,7 +62,7 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return (_jsx(Box, { "data-name": 'calculated-column-settings', children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), _jsxs(Card.Body, { className: "twa:p-1 twa:gap-1", children: [_jsx(SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? (_jsx(Box, { className: "twa:text-2 twa:text-error", children: ErrorMessage })) : null] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+    return (_jsx(Box, { "data-name": 'calculated-column-settings', children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), _jsxs(Card.Body, { className: "twa:p-1 twa:gap-1", children: [_jsx(SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: ErrorMessage })) : null] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) }) })] }), _jsx(SpecialColumnSettingsWizardStep, { isEditable: false, 
                     // @ts-ignore CalculatedColumn has a broader DataType

package/src/View/CalculatedColumn/Wizard/CalculatedColumnTypeSection.js

@@ -1,7 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TypeRadio } from '../../Wizard/TypeRadio';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex } from '../../../components/Flex';
-import { Card } from '../../../components/Card';
+import { getWizardTypeSelectionGridColumns, WizardTypeSelectionCard, WizardTypeSelectionPreviewFrame, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
+const CALCULATED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'ScalarExpression',
+        label: 'Standard',
+        description: 'The calculated value is derived from other cells in the row',
+        expressionExample: '[price] * [quantity]',
+    },
+    {
+        type: 'AggregatedScalarExpression',
+        label: 'Aggregated',
+        description: 'The calculated value is derived from other rows',
+        expressionExample: 'SUM([pnl], GROUP_BY([desk]))',
+    },
+    {
+        type: 'CumulativeAggregatedExpression',
+        label: 'Cumulative',
+        description: 'The calculated value is derived cumulatively from other rows',
+        expressionExample: 'CUMUL(SUM([pnl]), OVER([tradeDate]))',
+    },
+    {
+        type: 'QuantileAggregatedExpression',
+        label: 'Quantile',
+        description: 'The calculated value is derived from other rows using quantile aggregations',
+        expressionExample: 'QUANT([pnl], 4)',
+    },
+];
+const CALCULATED_COLUMN_TYPE_COUNT = CALCULATED_COLUMN_TYPE_OPTIONS.length;
 export const CalculatedColumnTypeWizardSection = (props) => {
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: _jsx(Box, { className: "twa:font-medium", children: "Calculated Column Type" }) }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), _jsx(TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), _jsx(TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), _jsx(TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }) }));
+    return (_jsx(Flex, { flexDirection: "column", "data-name": "calculated-column-type", className: "twa:h-full twa:min-h-0 twa:p-2", children: _jsx(WizardTypeSelectionSection, { headingId: "calculated-column-type-heading", title: "Calculated Column Type", dataName: "calculated-column-type-grid", columns: getWizardTypeSelectionGridColumns(CALCULATED_COLUMN_TYPE_COUNT), intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", CALCULATED_COLUMN_TYPE_COUNT, " calculated column types"] }), children: CALCULATED_COLUMN_TYPE_OPTIONS.map((option) => (_jsx(WizardTypeSelectionCard, { label: option.label, description: option.description, selected: props.type === option.type, dataName: `calculated-column-type-${option.type}`, minHeightClassName: "twa:min-h-[148px]", onSelect: () => props.onTypeChange(option.type), footer: _jsx(WizardTypeSelectionPreviewFrame, { children: _jsx(Box, { as: "code", className: "ab-CodeBlock twa:block twa:w-full twa:truncate twa:bg-transparent twa:p-0 twa:font-mono twa:text-2 twa:leading-snug twa:text-foreground twa:opacity-90", children: option.expressionExample }) }) }, option.type))) }) }));
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { SummaryOperation } from '../../AdaptableState/Common/Enums';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { cn } from '../../lib/utils';
 import { CellSummaryPopover } from './CellSummaryPopover';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { AdaptablePopover } from '../AdaptablePopover';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
 import { SingleSelect } from '../../components/NewSelect';
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
@@ -50,11 +50,11 @@ class CellSummaryViewPanelComponent extends React.Component {
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const operationValue = this.getOperationValue() ?? 'N/A';
-        return (_jsxs(Flex, { className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+        return (_jsxs(Flex, { className: cn(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
                 'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), children: [_jsx(Flex, { className: "twa:flex-1", children: _jsx(SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), _jsx(Flex, { className: "twa:items-center twa:gap-1", children: _jsxs(_Fragment, { children: [_jsx(Flex, { className: clsx(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
-                                    'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
+            }), children: [_jsx(Flex, { className: "twa:flex-1", children: _jsx(SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), _jsx(Flex, { className: "twa:items-center twa:gap-1", children: _jsxs(_Fragment, { children: [_jsx(Flex, { className: cn(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                                    'twa:rounded-standard twa:text-info-foreground twa:bg-info twa:text-2': !isToolbar,
                                     'twa:flex-1 twa:text-primary-foreground twa:justify-center': isToolbar,
                                 }), children: operationValue }), _jsx(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })] }) })] }));
     }

package/src/View/Charting/ShowChartButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
 import { isAgChartDefinition, isExternalChartDefinition, } from '../../AdaptableState/ChartingState';
 import { useAgChartState } from './useAgChartState';
@@ -16,7 +16,7 @@ const BaseShowChartButton = (props) => {
     if (!chartContainers?.length) {
         return (_jsx(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return (_jsx(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions, children: _jsx(SimpleButton, { variant: "raised", tone: "success", children: "Open" }) }));
+    return (_jsx(NewDropdownButton, { "data-name": "show-chart-dropdown", items: props.containerOptions, children: "Open In..." }));
 };
 const ShowAgChartButton = (props) => {
     const adaptableApi = useAdaptable().api;
@@ -29,13 +29,13 @@ const ShowAgChartButton = (props) => {
             onClick: () => {
                 showChart(null);
             },
-            ...(chartContainers
-                ? chartContainers?.map((contianerDef) => ({
-                    label: contianerDef.name,
-                    onClick: () => showChart(contianerDef),
-                }))
-                : []),
         },
+        ...(chartContainers
+            ? chartContainers.map((contianerDef) => ({
+                label: contianerDef.name,
+                onClick: () => showChart(contianerDef),
+            }))
+            : []),
     ];
     return (_jsx(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
 };

package/src/View/ColumnInfo/ColumnInfo.js

@@ -10,6 +10,7 @@ import { ButtonNew } from '../Components/Buttons/ButtonNew';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../components/Flex';
+import { formatColumnInspectorPinning, formatColumnInspectorSizing, formatColumnInspectorSorting, } from '../Layout/Wizard/sections/columnLayoutHelpers';
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
     className: 'twa:flex-1 twa:min-h-0 twa:w-full',
@@ -35,11 +36,22 @@ const MODULES_WITH_SCOPE = [
     'Shortcut',
     'StyledColumn',
 ];
+/** Column Info summary only — shows the resolved default width when layout has no explicit sizing. */
+const formatColumnInfoSummaryWidth = (columnId, sizing, resolveDefaultWidth) => {
+    const explicit = formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth);
+    if (explicit !== 'Default') {
+        return explicit;
+    }
+    return String(resolveDefaultWidth(columnId));
+};
 const ColumnDefPreview = (props) => {
     const adaptable = useAdaptable();
     if (props.column) {
         const api = adaptable.api;
         const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
+        const layout = api.layoutApi.getCurrentLayout();
+        const resolveDefaultWidth = (columnId) => adaptable.getDefaultColumnWidthForCol(columnId);
+        const columnSizing = layout.ColumnSizing?.[props.column.columnId];
         const keyValuePairs = [
             {
                 Key: 'Column Id',
@@ -85,9 +97,17 @@ const ColumnDefPreview = (props) => {
                 Key: 'Visible',
                 Value: props.column.visible ? 'Yes' : 'No',
             },
+            {
+                Key: 'Pinning',
+                Value: formatColumnInspectorPinning(layout, props.column.columnId),
+            },
             {
                 Key: 'Width',
-                Value: props.column.width,
+                Value: formatColumnInfoSummaryWidth(props.column.columnId, columnSizing, resolveDefaultWidth),
+            },
+            {
+                Key: 'Sorting',
+                Value: formatColumnInspectorSorting(layout, props.column.columnId),
             },
             {
                 Key: 'Row Grouped',

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PanelWithRow } from '../Panels/PanelWithRow';
+import { cn } from '../../../lib/utils';
 import { Box } from '../../../components/Flex';
-import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
 export const AdaptableObjectCollection = (props) => {
-    return (_jsxs(Box, { style: props.style, className: twMerge('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [_jsx(PanelWithRow, { border: "none", colItems: props.colItems }), _jsx("div", { className: clsx('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+    return (_jsxs(Box, { style: props.style, className: twMerge('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [_jsx(PanelWithRow, { border: "none", colItems: props.colItems }), _jsx("div", { className: cn('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
                     'twa:overflow-y-visible': props.allowOverflow,
                     'twa:overflow-y-auto': !props.allowOverflow,
                 }), children: props.items })] }));

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

@@ -41,7 +41,7 @@ export const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
 };
 export const AdaptableObjectCompactList = (props) => {
     const adaptable = useAdaptable();

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
 import SimpleButton from '../../../components/SimpleButton';
+import { cn } from '../../../lib/utils';
 import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
 import { useAdaptable } from '../../AdaptableContext';
 import { ButtonDelete } from '../Buttons/ButtonDelete';
@@ -11,7 +12,6 @@ import { ButtonShare } from '../Buttons/ButtonShare';
 import { SuspendToggleButton } from '../Buttons/SuspendToggleButton/SuspendToggleButton';
 import { Box, Flex } from '../../../components/Flex';
 import { twMerge } from '../../../twMerge';
-import clsx from 'clsx';
 import { TagList } from '../../../components/Tag/Tag';
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
@@ -47,7 +47,7 @@ export const AdaptableObjectListItemView = (props) => {
                                             data: props.abObject,
                                             module: props.module,
                                         })
-                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values.map(String) })) : null, typeof tag.viewAfter === 'function'
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values, variant: tag.tagVariant })) : null, typeof tag.viewAfter === 'function'
                                         ? React.createElement(tag.viewAfter, {
                                             data: props.abObject,
                                             module: props.module,
@@ -71,7 +71,7 @@ export const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = clsx(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = cn(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
         `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
@@ -104,5 +104,5 @@ export const AdaptableObjectListItem = (props) => {
     return (_jsxs(_Fragment, { children: [_jsx(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteConfirmationMsg: deleteConfirmationMsg, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }), isEditWizardVisible && EditWizard && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
 };
 export const AdaptableObjectList = (props) => {
-    return (_jsx("ul", { className: twMerge(clsx(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)), children: props?.items?.map((item, index) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
+    return (_jsx("ul", { className: cn(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className), children: props?.items?.map((item, index) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };

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

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

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../../../lib/utils';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { Box } from '../../../../components/Flex';
-import clsx from 'clsx';
-import { twMerge } from '../../../../twMerge';
 const Glyphicon = ({ glyph, style }) => {
     return _jsx("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
@@ -54,7 +53,7 @@ export class ButtonBase extends React.Component {
         if (this.props.icon) {
             content = (_jsxs(_Fragment, { children: [this.props.iconPosition === 'end' ? text : null, " ", _jsx(Glyphicon, { glyph: this.props.icon }), ' ', this.props.iconPosition !== 'end' ? text : null] }));
         }
-        let button = (_jsx(Box, { ...this.props, as: "button", style: this.props.style, className: twMerge(clsx(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
+        let button = (_jsx(Box, { ...this.props, as: "button", style: this.props.style, className: cn(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`, this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
         let buttonwithtooltip = _jsx("div", { children: button });
         return hideToolTip ? button : buttonwithtooltip;
     }

package/src/View/Components/Buttons/ButtonNew.d.ts

@@ -8,6 +8,8 @@ type ButtonNewProps = {
     accessLevel?: SimpleButtonProps['accessLevel'];
     children?: React.ReactNode;
     onClick?: () => void;
+    disabled?: boolean;
+    dataName?: string;
 };
 export declare const ButtonNew: (props: ButtonNewProps) => React.JSX.Element;
 export {};

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

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

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

@@ -5,9 +5,9 @@ import { ButtonClone } from './ButtonClone';
 import { ButtonDelete } from './ButtonDelete';
 import { ButtonShare } from './ButtonShare';
 import { SuspendToggleButton } from './SuspendToggleButton/SuspendToggleButton';
+import { cn } from '../../../lib/utils';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
 import { Flex } from '../../../components/Flex';
-import clsx from 'clsx';
 const stopPropagation = (e) => {
     e.stopPropagation();
 };
@@ -32,11 +32,11 @@ export class EntityListActionButtons extends React.Component {
     };
     render() {
         const { justifyContent } = this.props;
-        const justifyContentClassName = clsx({
+        const justifyContentClassName = cn({
             'twa:justify-start': justifyContent === 'start',
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        return (_jsxs(Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && (_jsx(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && (_jsx(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && (_jsx(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && (_jsx(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && (_jsx(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == ACCESS_LEVEL_READ_ONLY }))] }));
+        return (_jsxs(Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && (_jsx(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && (_jsx(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && (_jsx(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && (_jsx(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && (_jsx(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == ACCESS_LEVEL_READ_ONLY }))] }));
     }
 }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ToggleButton } from '../../../../components/ToggleButton';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
-import clsx from 'clsx';
+import { cn } from '../../../../lib/utils';
 export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
     const handleOnChange = React.useCallback((checked) => {
         if (checked) {
@@ -14,5 +14,5 @@ export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend,
     }, [onUnSuspend, onSuspend]);
     const preparedDisabled = (accessLevel && accessLevel === ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
-    return (_jsx(ToggleButton, { className: clsx(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
+    return (_jsx(ToggleButton, { className: cn(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
 });

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -7,11 +7,10 @@ import Radio from '../../../components/Radio';
 import { useAdaptable } from '../../AdaptableContext';
 import { mapQlPredicateToAdaptablePredicate } from './utils';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
 import { SingleSelect } from '../../../components/NewSelect';
 import { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
-import { captureTab } from '../../../lib/utils';
+import { cn, captureTab } from '../../../lib/utils';
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
@@ -139,7 +138,7 @@ export const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => mapQlPredicateToAdaptablePredicate(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return (_jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
+    return (_jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [_jsxs(Flex, { flexDirection: "column", className: cn({
                     'twa:pb-2': !props.hideActionButtons,
                     'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
                     'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -78,7 +78,6 @@ export const ColumnFilterInput = (props) => {
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        // we use the permitted values selector
         return (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.js

@@ -36,7 +36,9 @@ export const ColumnFilterInputList = (props) => {
     }
     return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];
-            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+            const operator = props.predicate?.operator;
+            const usePermittedValuesSelector = input === 'number' || operator === 'Is' || operator === 'IsNot';
+            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
                     const args = [...props.predicate.args];
                     args.splice(index, 1);
                     const newPredicate = {

package/src/View/Components/ColumnFilter/components/ColumnFilterMenu.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
 import { Box, Flex } from '../../../../components/Flex';
-import clsx from 'clsx';
 import { useEffect, useLayoutEffect } from 'react';
+import { cn } from '../../../../lib/utils';
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
     return (_jsxs(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick, "aria-label": label, children: [_jsx(Box, { className: "twa:mr-2", children: icon }), _jsx(Box, { className: "twa:text-2", children: label })] }));
 };
@@ -59,7 +59,7 @@ export const ColumnFilterMenu = (props) => {
     }, [confirm]);
     return (_jsx(Panel, { className: "twa:min-w-max", children: props.predicateDefs?.map((predicateDef, index) => {
             const active = activeIndex === index;
-            return (_jsx(Flex, { className: clsx('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
+            return (_jsx(Flex, { className: cn('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                 }, children: _jsx(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active }) }, index));

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

@@ -1,12 +1,24 @@
 import * as React from 'react';
 import { AdaptableColumn } from '../../../types';
+import { ValueSelectorProps } from '../ValueSelector';
 type NewColumnSelectorProps = {
     availableColumns: AdaptableColumn[];
     selected: string[];
     singleSelect?: boolean;
+    /** External filter text (legacy — prefer `compactColumnList` inline search). */
     columnFilterText?: string;
     allowReorder?: boolean;
     onChange?: (colIds: string[]) => void;
+    /** Layout wizard pattern: compact header with inline search beside selection controls. */
+    compactColumnList?: boolean;
+    compact?: ValueSelectorProps<AdaptableColumn, string>['compact'];
+    showFilterInput?: ValueSelectorProps<AdaptableColumn, string>['showFilterInput'];
+    filterPlaceholder?: string;
+    compactHeaderClassName?: string;
+    compactFilterClassName?: string;
+    hideShowSelectedOnly?: boolean;
+    optionClassName?: string;
+    className?: string;
 };
 export declare const NewColumnSelector: ({ allowReorder, ...props }: NewColumnSelectorProps) => React.JSX.Element;
 export {};

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

@@ -2,14 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ValueSelector } from '../ValueSelector';
 import { ColumnGroupTag } from '../ColumnGroupTag';
+import { cn } from '../../../lib/utils';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../wizardColumnListStyles';
 export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
-    const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
+    const { columnFilterText, availableColumns, selected, onChange, singleSelect, compactColumnList, compact, showFilterInput, filterPlaceholder, compactHeaderClassName, compactFilterClassName, hideShowSelectedOnly, optionClassName, className, } = props;
+    const useCompactColumnList = compactColumnList ?? false;
+    const effectiveCompact = useCompactColumnList || compact;
+    const effectiveShowFilterInput = useCompactColumnList || showFilterInput;
+    const effectiveFilterPlaceholder = filterPlaceholder ?? (useCompactColumnList ? 'Search Columns...' : undefined);
+    const effectiveCompactHeaderClassName = compactHeaderClassName ??
+        (useCompactColumnList ? WIZARD_COLUMN_LIST_HEADER_CLASS : undefined);
+    const effectiveCompactFilterClassName = compactFilterClassName ??
+        (useCompactColumnList ? WIZARD_COLUMN_LIST_SEARCH_CLASS : undefined);
+    const effectiveOptionClassName = optionClassName ??
+        (useCompactColumnList
+            ? singleSelect
+                ? WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT
+                : WIZARD_COLUMN_LIST_OPTION_CLASS
+            : undefined);
+    const effectiveHideShowSelectedOnly = hideShowSelectedOnly ?? (useCompactColumnList ? singleSelect : undefined);
     const filterFn = useMemo(() => {
-        return columnFilterText
-            ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
-            : null;
-    }, [columnFilterText]);
-    return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
+        if (!effectiveShowFilterInput && !columnFilterText) {
+            return null;
+        }
+        return (column, searchValue) => {
+            const text = effectiveShowFilterInput ? searchValue : columnFilterText ?? '';
+            if (!text) {
+                return true;
+            }
+            return column.friendlyName.toLowerCase().includes(text.toLowerCase());
+        };
+    }, [columnFilterText, effectiveShowFilterInput]);
+    return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, compact: effectiveCompact, showFilterInput: effectiveShowFilterInput, filterPlaceholder: effectiveFilterPlaceholder, compactHeaderClassName: effectiveCompactHeaderClassName, compactFilterClassName: effectiveCompactFilterClassName, hideShowSelectedOnly: effectiveHideShowSelectedOnly, optionClassName: effectiveOptionClassName, optionLayout: useCompactColumnList ? 'label-beside-checkbox' : undefined, toggleSelectionOnRowClick: useCompactColumnList ? true : undefined, singleSelect: singleSelect, allowReorder: allowReorder, className: cn(useCompactColumnList && 'twa:h-full', className), onChange: (colIds) => {
             if (singleSelect) {
                 onChange(colIds.length ? [colIds.pop()] : []);
             }