@adaptabletools/adaptable 20.1.8 → 20.2.0-canary.0

package/src/Api/Internal/FormatColumnInternalApi.d.ts

@@ -1,6 +1,6 @@
+import { IRowNode } from 'ag-grid-enterprise';
 import { AdaptableColumn, AdaptableFormat, AdaptablePredicateDef, ColumnScope, FormatColumn, StringFormatterOptions } from '../../types';
 import { ApiBase } from '../Implementation/ApiBase';
-import { IRowNode } from 'ag-grid-enterprise';
 export declare class FormatColumnInternalApi extends ApiBase {
     /**
      * Retrieves all Format Columns in Adaptable State with the `Style` property set
@@ -77,6 +77,7 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * @param scope Scope to check
      */
     getFormatColumnDefsForScope(scope: ColumnScope): AdaptablePredicateDef[];
+    formatColumnWithColumnGroupStateShouldRender(formatColumn: FormatColumn, column: AdaptableColumn): boolean;
     /**
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
      *

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -4,6 +4,33 @@ import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 import ObjectFactory from '../../Utilities/ObjectFactory';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { errorOnce } from '../../agGrid/AdaptableLogger';
+function getParentGroup(source) {
+    if (!source) {
+        return undefined;
+    }
+    let current = source;
+    while (current.getParent()) {
+        current = current.getParent();
+        if (!current) {
+            return undefined;
+        }
+        const currentProvidedColumnGroup = current.getProvidedColumnGroup();
+        // for columns that don't belong to groups or belong to a group that doesn't have full depth
+        // there are artificial parent groups created by ag-grid
+        // so for the current column group, lets grab the leaf columns
+        // and if the only leaf column is the source column, then we can continue
+        // and do another iteration where we go up one level
+        if (currentProvidedColumnGroup) {
+            const leafColumns = current.getLeafColumns();
+            if (leafColumns.length === 1 && leafColumns[0] === source) {
+                continue;
+            }
+            // otherwise, we have found the parent group corresponding to the source column
+            return currentProvidedColumnGroup;
+        }
+    }
+    return undefined;
+}
 export class FormatColumnInternalApi extends ApiBase {
     /**
      * Retrieves all Format Columns in Adaptable State with the `Style` property set
@@ -145,6 +172,37 @@ export class FormatColumnInternalApi extends ApiBase {
             .predicateApi.internalApi.getFormatColumnPredicateDefs(scope)
             .filter((predicateDef) => this.getColumnScopeApi().isScopeInScope(scope, predicateDef.columnScope));
     }
+    formatColumnWithColumnGroupStateShouldRender(formatColumn, column) {
+        if (!formatColumn.ColumnGroupState) {
+            return true;
+        }
+        const agGridApi = this.getAdaptableApi().agGridApi;
+        const agGridColumn = agGridApi.isPivotMode()
+            ? agGridApi.getPivotResultColumns().find((col) => col.getColId() === column.columnId)
+            : agGridApi.getColumn(column.columnId);
+        if (!agGridColumn) {
+            return false;
+        }
+        const columnGroupParentForCurrentColumn = getParentGroup(agGridColumn);
+        if (!columnGroupParentForCurrentColumn) {
+            return false;
+        }
+        const columnGroupState = columnGroupParentForCurrentColumn.isExpanded()
+            ? 'Expanded'
+            : 'Collapsed';
+        const columnGroupLeafColumns = columnGroupParentForCurrentColumn.getLeafColumns();
+        const columnIsTopLevel = columnGroupParentForCurrentColumn.getLevel() === 0 &&
+            columnGroupLeafColumns.length === 1 &&
+            columnGroupLeafColumns[0] === agGridColumn;
+        if (columnIsTopLevel) {
+            // for top-level columns don't apply formatColumns that have an explicit ColumnGroupState defined
+            return false;
+        }
+        if (formatColumn.ColumnGroupState === 'Both') {
+            return true;
+        }
+        return formatColumn.ColumnGroupState === columnGroupState;
+    }
     /**
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
      *
@@ -175,6 +233,10 @@ export class FormatColumnInternalApi extends ApiBase {
                 return false;
             }
         }
+        if (formatColumn.ColumnGroupState &&
+            !this.formatColumnWithColumnGroupStateShouldRender(formatColumn, column)) {
+            return false;
+        }
         if (!formatColumn.Rule) {
             return true;
         }

package/src/Api/QuickSearchApi.d.ts

@@ -17,6 +17,14 @@ export interface QuickSearchApi {
      * Clears Quick Search
      */
     clearQuickSearch(): void;
+    /**
+     * Goes to the next match for the current Quick Search text
+     */
+    gotoNextMatch(): void;
+    /**
+     * Goes to the previous match for the current Quick Search text
+     */
+    gotoPreviousMatch(): void;
     /**
      * Retrieves current Quick Search text
      */
@@ -25,6 +33,14 @@ export interface QuickSearchApi {
      *  Retrieves current Quick Search style
      */
     getQuickSearchStyle(): AdaptableStyle;
+    /**
+     * Retrieves the style for the text match in the Quick Search
+     */
+    getQuickSearchTextMatchStyle(): Omit<AdaptableStyle, 'ClassName'> | undefined;
+    /**
+     * Retrieves the style for the current text match in the Quick Search
+     */
+    getQuickSearchCurrentTextMatchStyle(): Omit<AdaptableStyle, 'ClassName'> | undefined;
     /**
      * Sets style for Quick Search; can be name of (a provided) css style
      * @param style the style to use

package/src/Redux/Store/AdaptableStore.js

@@ -499,10 +499,11 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case QuickSearchRedux.QUICK_SEARCH_RUN: {
                     let returnAction = next(action);
                     adaptable.api.gridApi.refreshAllCells(true);
+                    const actionTyped = action;
+                    const searchText = actionTyped.quickSearchText;
+                    adaptable.setAgGridFindSearchValue(searchText);
                     // if set then return a query on the text
                     if (adaptable.adaptableOptions.quickSearchOptions.filterGridAfterQuickSearch) {
-                        const actionTyped = action;
-                        const searchText = actionTyped.quickSearchText;
                         if (StringExtensions.IsNotNullOrEmpty(searchText)) {
                             adaptable.setAgGridQuickSearch(searchText);
                         }

package/src/Utilities/Constants/GeneralConstants.js

@@ -1,3 +1,4 @@
+import { AUTO_GROUP_COLUMN_ID__SINGLE } from '../../layout-manager/src/normalizeLayoutModel';
 export const AUTOGENERATED_PK_COLUMN = '__ADAPTABLE_PK__';
 export const MISSING_COLUMN = ' [MISSING]';
 export const LIGHT_THEME = 'light';
@@ -20,7 +21,7 @@ export const EMPTY_ARRAY = [];
 export const HALF_SECOND = 500;
 export const QUARTER_SECOND = 250;
 export const GROUP_PATH_SEPARATOR = '/';
-export const AG_GRID_GROUPED_COLUMN = 'ag-Grid-AutoColumn';
+export const AG_GRID_GROUPED_COLUMN = AUTO_GROUP_COLUMN_ID__SINGLE;
 export const AG_GRID_SELECTION_COLUMN = 'ag-Grid-SelectionColumn';
 export const AG_GRID_PIVOT_COLUMN = 'pivot_';
 export const AG_GRID_PIVOT_GRAND_TOTAL_COLUMN = 'PivotRowTotal_pivot_';

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -6,5 +6,6 @@ export type AdaptableFormControlTextClearProps = {
     focusOnClear?: boolean;
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
+    actionTools?: React.ReactNode;
 } & InputProps;
 export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -25,6 +25,7 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                     ref.current = r;
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
+        props.actionTools,
         React.createElement(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;

package/src/View/Dashboard/Dashboard.js

@@ -11,16 +11,14 @@ import { QuickSearchModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { AdaptableIconComponent } from '../Components/AdaptableIconComponent';
-import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableFormControlTextClear';
-import { useQuickSearchDebounced } from '../QuickSearch/useQuickSearchDebounced';
 import UIHelper from '../UIHelper';
 import { CustomDashboardButton } from './CustomDashboardButton';
 import { CustomToolbarWrapper } from './CustomToolbar';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
 import { PinnedDashboard } from './PinnedDashboard';
 import { ModuleToolbarWrapper } from './ModuleToolbarWrapper';
+import { QuickSearchInput } from '../QuickSearch/QuickSearchInput';
 const DashboardComponent = (props) => {
-    const [searchText, search] = useQuickSearchDebounced(props);
     const dashboardAccessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
         const visibleToolbarNames = tab.Toolbars.filter((vt) => vt);
@@ -89,7 +87,7 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear, { type: "text", "aria-label": 'Quick Search', placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
+            React.createElement(QuickSearchInput, { width: '7rem' })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -195,9 +195,9 @@ export const AggregationsSection = (props) => {
                     React.createElement(FormRow, { label: 'Omit Aggregation from Header' },
                         React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
                     React.createElement(FormRow, { label: 'Grand Total Row' },
-                        React.createElement(Select, { style: { width: 120 }, options: ['top', 'bottom'].map((position) => {
+                        React.createElement(Select, { style: { width: 160 }, options: ['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
                                 return {
-                                    label: StringExtensions.CapitaliseFirstLetter(position),
+                                    label: StringExtensions.CamelCaseToHumanText(position),
                                     value: position,
                                 };
                             }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -322,9 +322,9 @@ export const PivotAggregationsSection = (props) => {
                     React.createElement(FormRow, { label: 'Omit Aggregation from Header' },
                         React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
                     React.createElement(FormRow, { label: 'Grand Total Row' },
-                        React.createElement(Select, { style: { width: 120 }, options: ['top', 'bottom'].map((position) => {
+                        React.createElement(Select, { style: { width: 160 }, options: ['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
                                 return {
-                                    label: StringExtensions.CapitaliseFirstLetter(position),
+                                    label: StringExtensions.CamelCaseToHumanText(position),
                                     value: position,
                                 };
                             }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {

package/src/View/Layout/Wizard/sections/PivotRowGroupingSection.js

@@ -8,6 +8,7 @@ import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
+import { RowGroupBehaviorSection } from './RowGroupingSection';
 export const PivotRowGroupingSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -32,10 +33,14 @@ export const PivotRowGroupingSection = (props) => {
             PivotGroupedColumns: columnIds,
         });
     };
+    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
     return (React.createElement(Tabs, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
+        React.createElement(Tabs.Tab, null, rowGroupsText),
         React.createElement(Tabs.Content, null,
             React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
-                }, onChange: handleColumnsChange }))));
+                }, onChange: handleColumnsChange })),
+        React.createElement(Tabs.Content, null,
+            React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
 };

package/src/View/Layout/Wizard/sections/RowGroupingSection.d.ts

@@ -4,5 +4,9 @@ export declare const RowGroupingSectionSummary: React.FunctionComponent;
 interface RowGroupingSectionProps {
     onChange: (data: Layout) => void;
 }
+export declare const RowGroupBehaviorSection: (props: {
+    layout: Layout;
+    onChange: (data: Layout) => void;
+}) => React.JSX.Element;
 export declare const RowGroupingSection: React.FunctionComponent<RowGroupingSectionProps>;
 export {};

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -23,6 +23,27 @@ export const RowGroupingSectionSummary = () => {
             React.createElement(Tag, { key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
     })) : (React.createElement(Tag, null, "No Row Grouping"))));
 };
+export const RowGroupBehaviorSection = (props) => {
+    const { layout, onChange } = props;
+    return (React.createElement(FormLayout, null,
+        React.createElement(RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
+                const newLayout = {
+                    ...layout,
+                    RowGroupValues: {
+                        RowGroupDefaultBehavior,
+                    },
+                };
+                if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
+                    newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
+                    newLayout.RowGroupValues.ExceptionGroupKeys = [];
+                }
+                onChange(newLayout);
+            } },
+            React.createElement(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Always open Layout with all Grouped Rows collapsed" }),
+            React.createElement(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Always open Layout with all Grouped Rows expanded" }),
+            React.createElement(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
+            React.createElement(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" }))));
+};
 export const RowGroupingSection = (props) => {
     const adaptable = useAdaptable();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
@@ -78,23 +99,5 @@ export const RowGroupingSection = (props) => {
                         return `Selected Columns:`;
                     }, onChange: handleColumnsChange })),
             React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
-                            let newLayout = {
-                                ...layout,
-                                RowGroupValues: {
-                                    RowGroupDefaultBehavior,
-                                },
-                            };
-                            if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
-                                newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
-                                newLayout.RowGroupValues.ExceptionGroupKeys =
-                                    [];
-                            }
-                            onChange(newLayout);
-                        } },
-                        React.createElement(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Always open Layout with all Grouped Rows collapsed" }),
-                        React.createElement(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Always open Layout with all Grouped Rows expanded" }),
-                        React.createElement(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
-                        React.createElement(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" })))))));
+                React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
 };

package/src/View/QuickSearch/QuickSearchInput.js

@@ -4,6 +4,9 @@ import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux'
 import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableFormControlTextClear';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { useAdaptable } from '../AdaptableContext';
+import SimpleButton from '../../components/SimpleButton';
+import join from '../../components/utils/join';
+import { Box } from 'rebass';
 export const QuickSearchInput = (props) => {
     const adaptable = useAdaptable();
     const QuickSearchText = useSelector((state) => state.QuickSearch.QuickSearchText);
@@ -13,5 +16,7 @@ export const QuickSearchInput = (props) => {
         QuickSearchText,
         onRunQuickSearch,
     });
-    return (React.createElement(AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: props.width ?? '10rem' } }));
+    return (React.createElement(AdaptableFormControlTextClear, { "aria-label": 'Quick Search', type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: join('ab-DashboardToolbar__QuickSearch__text', props.className), value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: props.width ?? '10rem' }, actionTools: React.createElement(Box, { display: "flex", flexDirection: "row", alignItems: "center", flex: 'none' },
+            React.createElement(SimpleButton, { "aria-label": 'Previous Match', icon: "arrow-up", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoPreviousMatch() }),
+            React.createElement(SimpleButton, { "aria-label": 'Next Match', icon: "arrow-down", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoNextMatch() })) }));
 };

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -5,12 +5,12 @@ import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux'
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import Panel from '../../components/Panel';
 import FormLayout, { FormRow } from '../../components/FormLayout';
-import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableFormControlTextClear';
 import { StyleComponent } from '../Components/StyleComponent';
 import { Flex } from 'rebass';
 import { CheckBox } from '../../components/CheckBox';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
+import { QuickSearchInput } from './QuickSearchInput';
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -28,9 +28,8 @@ const QuickSearchPopupComponent = (props) => {
     };
     return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         React.createElement(Panel, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
-            ' ',
             React.createElement(FormLayout, null,
-                React.createElement(AdaptableFormControlTextClear, { "data-name": "quick-search-text", type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
+                React.createElement(QuickSearchInput, null))),
         React.createElement(Panel, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(Flex, { flexDirection: "column" },

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -106,6 +106,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private listenerPivotChanged;
     private listenerCellSelectionChanged;
     private listenerSortChanged;
+    private listenerColumnGroupOpened;
     private layoutManager;
     private columnMinMaxValuesCache;
     renderReactRoot: RenderReactRootFn;
@@ -303,6 +304,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     isGridGroupingActive(): boolean;
     setAgGridQuickSearch(searchText: string): void;
     clearAgGridQuickSearch(): void;
+    setAgGridFindSearchValue(searchText: string): void;
     applyAdaptableTheme(theme: AdaptableTheme | string): void;
     setRowGroupColumns(columnIds: string[]): void;
     getAllGridColumns(): Column<any>[];