@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

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

@@ -1,34 +1,40 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
-import { Tabs } from '../../../../components/Tabs';
-import { useAdaptable } from '../../../AdaptableContext';
-import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
-import { Tag } from '../../../../components/Tag';
-import { PredicateEditor } from '../../../Components/PredicateEditor/PredicateEditor';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-export const isColumnFiltersValid = (layout) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
+const Tabs_1 = require("../../../../components/Tabs");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
+const Tag_1 = require("../../../../components/Tag");
+const PredicateEditor_1 = require("../../../Components/PredicateEditor/PredicateEditor");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector");
+const isColumnFiltersValid = (layout) => {
     var _a, _b;
     const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     if (invalidColumnFilters.length > 0) {
-        return 'Please select a predicate for each column filter';
+        return 'Please select a Predicate for each Column Filter';
     }
     return true;
 };
-export const FilterSectionSummary = () => {
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const adaptable = useAdaptable();
-    const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
-    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Filters"))));
+exports.isColumnFiltersValid = isColumnFiltersValid;
+const FilterSectionSummary = () => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const fitlerViewItems = (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Column Filters"))));
 };
-export const FilterSection = (props) => {
+exports.FilterSectionSummary = FilterSectionSummary;
+const FilterSection = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const layoutFilters = (_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [];
     const handleDelete = React.useCallback((columnFilter) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
@@ -39,39 +45,38 @@ export const FilterSection = (props) => {
     }, [layout.ColumnFilters]);
     const columnsOptions = React.useMemo(() => adaptable.api.columnApi
         .getFilterableColumns()
-        .filter(
-    // filter out columns with filters already
-    (abColumn) => {
+        .filter((abColumn) => {
         var _a;
         return !((_a = layout.ColumnFilters) === null || _a === void 0 ? void 0 : _a.some((columnFilter) => abColumn.columnId === columnFilter.ColumnId));
     })
         .map(({ columnId }) => ({
         label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
-        onClick: () => {
-            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
-                    ...layoutFilters,
-                    {
-                        ColumnId: columnId,
-                        Predicate: null,
-                    },
-                ] }));
-        },
+        value: columnId,
     })), [layout, layoutFilters]);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column Filters"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, { mb: 2 },
-                React.createElement(FormRow, { label: "Add new filter" },
-                    React.createElement(DropdownButton, { "data-name": "select-column", minWidth: 250, items: columnsOptions, mr: 2, columns: ['label'] }, "Select Column"))),
-            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, { mb: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
+                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+                            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                                    ...layoutFilters,
+                                    {
+                                        ColumnId: option,
+                                        Predicate: null,
+                                    },
+                                ] }));
+                        } }))),
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
                 const predicateDefs = adaptable.api.columnFilterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
                 const items = [
                     ...filterModule.toView(columnFilter).items,
                     {
                         name: 'Column Filter',
-                        view: (React.createElement(PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                        view: (React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
                     },
                 ];
-                return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
+                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
             }))))));
 };
+exports.FilterSection = FilterSection;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../../../../types';
+export declare const isGridFiltersValid: (layout: Layout, api: AdaptableApi) => true | string;
+export declare const GridFilterSectionSummary: React.FunctionComponent;
+interface GridFilterSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const GridFilterSection: React.FunctionComponent<GridFilterSectionProps>;
+export {};

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterSection = exports.GridFilterSectionSummary = exports.isGridFiltersValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Tag_1 = require("../../../../components/Tag");
+const ExpressionEditor_1 = require("../../../../components/ExpressionEditor");
+const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
+const isGridFiltersValid = (layout, api) => {
+    var _a;
+    const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
+    if (StringExtensions_1.default.IsNullOrEmpty(expression)) {
+        return true;
+    }
+    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, ModuleConstants_1.GridFilterModuleId)
+        .isValid || 'Invalid Expression');
+};
+exports.isGridFiltersValid = isGridFiltersValid;
+const GridFilterSectionSummary = () => {
+    var _a, _b;
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, null, React.createElement(Tag_1.Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
+};
+exports.GridFilterSectionSummary = GridFilterSectionSummary;
+const GridFilterSection = (props) => {
+    var _a, _b;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
+    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
+            props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filters"),
+        React.createElement(Tabs_1.Tabs.Content, null, expressionEditorContent)));
+};
+exports.GridFilterSection = GridFilterSection;

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

@@ -1,34 +1,40 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
-export const PivotColumnsSectionSummary = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const PivotColumnsSectionSummary = () => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Column Pivoting"))));
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
 };
-export const PivotColumnsSection = (props) => {
+exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
+const PivotColumnsSection = (props) => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allPivotColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Pivot Columns"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
+exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -1,40 +1,46 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { columnFilter } from './Utilities';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-export const RowGroupingSectionSummary = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowGroupingSection = exports.RowGroupingSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Utilities_1 = require("./Utilities");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const RowGroupingSectionSummary = () => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Row Grouping"))));
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
 };
-export const RowGroupingSection = (props) => {
+exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
+const RowGroupingSection = (props) => {
     var _a, _b, _c;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Grouped Rows"),
-        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs.Tab, null, "Expanded Rows"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Rows"),
+        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange })),
-        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs.Content, null,
-            React.createElement(Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
-                React.createElement(FormLayout, { p: 2 },
-                    React.createElement(FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag, { mb: 2, mr: 2, key: index }, value))))))))));
+        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
+                React.createElement(FormLayout_1.default, { p: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag_1.Tag, { mb: 2, mr: 2, key: index }, value))))))))));
 };
+exports.RowGroupingSection = RowGroupingSection;

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

@@ -1,27 +1,32 @@
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import Input from '../../../../components/Input';
-import Radio from '../../../../components/Radio';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-export const SettingsSectionSummary = () => {
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null,
-        React.createElement(Tag, { mr: 2 },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsSection = exports.SettingsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const SettingsSectionSummary = () => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(Tag_1.Tag, { mr: 2 },
             "Layout Name: ",
             layout.Name),
-        React.createElement(Tag, { mr: 2 },
+        React.createElement(Tag_1.Tag, { mr: 2 },
             "Layout Grid Type: ",
             layout.EnablePivot ? 'Pivot' : 'Table'),
-        React.createElement(Tag, { mr: 2 },
+        React.createElement(Tag_1.Tag, { mr: 2 },
             "Suppress Aggregation Function in Header: ",
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
 };
-export const SettingsSection = (props) => {
+exports.SettingsSectionSummary = SettingsSectionSummary;
+const SettingsSection = (props) => {
     var _a;
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const onNameChange = (event) => {
         props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
     };
@@ -29,17 +34,18 @@ export const SettingsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 3 },
-            React.createElement(Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { width: "100%", style: { maxWidth: 300 } },
-                        React.createElement(FormRow, { label: "Name" },
-                            React.createElement(Input, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
-        React.createElement(Tabs, { mb: 2 },
-            React.createElement(Tabs.Tab, null, "Grid Type"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(Radio, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
-                    React.createElement(Radio, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
+        React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { width: "100%", style: { maxWidth: 300 } },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
 };
+exports.SettingsSection = SettingsSection;

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

@@ -1,36 +1,41 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
-export const SortSectionSummary = () => {
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const adaptable = useAdaptable();
-    const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
-    return (React.createElement(Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Sorts"))));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortSection = exports.SortSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const SortSectionSummary = () => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const sortViewItems = (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Sorts"))));
 };
+exports.SortSectionSummary = SortSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b, _c;
     const SortOrder = (_c = ((_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.ColumnSorts) !== null && _b !== void 0 ? _b : []).find((sort) => sort.ColumnId === props.column.columnId)) === null || _c === void 0 ? void 0 : _c.SortOrder;
     const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
-    return (React.createElement(Box, null,
+    return (React.createElement(rebass_1.Box, null,
         props.column.friendlyName,
-        SortOrder && (React.createElement(SimpleButton, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
+        SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
-export const SortSection = (props) => {
+const SortSection = (props) => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
     const sortedSortColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrderArray(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allSortableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {
@@ -51,10 +56,11 @@ export const SortSection = (props) => {
                 return sort;
             }) }));
     }, [layout]);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column Sorts"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Sorts"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));
 };
+exports.SortSection = SortSection;

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

@@ -1 +1,5 @@
-export const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate === null || candidate === void 0 ? void 0 : candidate.toLowerCase().includes(searchText.toLowerCase()));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnFilter = void 0;
+const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate === null || candidate === void 0 ? void 0 : candidate.toLowerCase().includes(searchText.toLowerCase()));
+exports.columnFilter = columnFilter;

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-import*as e from"react";import{Logo as t}from"../../components/Logo";import{Flex as r}from"rebass";const o={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},n=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0};export const LicenseWatermark=i=>{const l=e.useRef(null);return e.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=o.border,l.current.style.padding=o.padding,l.current.style.fontWeight=`${o.fontWeight}`,l.current.style.margin=o.margin,l.current.style.fontSize=o.fontSize,l.current.style.color=o.color,l.current.style.background=o.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),e.createElement(r,{style:o,ref:l},e.createElement(t,{style:{marginRight:10}}),e.createElement("div",null,i.children))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),t=e.__importStar(require("react")),r=require("../../components/Logo"),o=require("rebass"),n={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},i=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),i(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=n.border,l.current.style.padding=n.padding,l.current.style.fontWeight=`${n.fontWeight}`,l.current.style.margin=n.margin,l.current.style.fontSize=n.fontSize,l.current.style.color=n.color,l.current.style.background=n.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),t.createElement(o.Flex,{style:n,ref:l},t.createElement(r.Logo,{style:{marginRight:10}}),t.createElement("div",null,e.children))};exports.LicenseWatermark=l;

package/src/View/License/index.js

@@ -1 +1,5 @@
-export { LicenseWatermark } from './LicenseWatermark';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseWatermark = void 0;
+var LicenseWatermark_1 = require("./LicenseWatermark");
+Object.defineProperty(exports, "LicenseWatermark", { enumerable: true, get: function () { return LicenseWatermark_1.LicenseWatermark; } });

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -1,11 +1,16 @@
-import * as React from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-export const EditGridFilterButton = () => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditGridFilterButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const EditGridFilterButton = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleClick = React.useCallback((event) => {
         event.stopPropagation();
-        adaptable.api.gridFilterApi.expandGridFilterEditor();
+        adaptable.api.gridFilterApi.openUIEditorForGridFilter();
     }, []);
-    return React.createElement(SimpleButton, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
+    return React.createElement(SimpleButton_1.default, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
 };
+exports.EditGridFilterButton = EditGridFilterButton;