@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

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

@@ -1,20 +1,16 @@
-"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) => {
+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 FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
+export 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) {
@@ -22,19 +18,17 @@ const isColumnFiltersValid = (layout) => {
     }
     return true;
 };
-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 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 Column Filters"))));
 };
-exports.FilterSectionSummary = FilterSectionSummary;
-const FilterSection = (props) => {
+export const FilterSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data: layout } = 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) }));
@@ -53,12 +47,12 @@ const FilterSection = (props) => {
         label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
         value: columnId,
     })), [layout, layoutFilters]);
-    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), placeholder: "Select column to create filter", onChange: (option) => {
+    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 Column Filter" },
+                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {
@@ -67,16 +61,15 @@ const FilterSection = (props) => {
                                     },
                                 ] }));
                         } }))),
-            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(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_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                        view: (React.createElement(PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
                     },
                 ];
-                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 }));
+                return (React.createElement(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.js

@@ -1,44 +1,37 @@
-"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) => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import { Tabs } from '../../../../components/Tabs';
+import { useAdaptable } from '../../../AdaptableContext';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { Tag } from '../../../../components/Tag';
+import { ExpressionEditor } from '../../../../components/ExpressionEditor';
+import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
+export 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)) {
+    if (StringExtensions.IsNullOrEmpty(expression)) {
         return true;
     }
-    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, ModuleConstants_1.GridFilterModuleId)
+    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, GridFilterModuleId)
         .isValid || 'Invalid Expression');
 };
-exports.isGridFiltersValid = isGridFiltersValid;
-const GridFilterSectionSummary = () => {
+export 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')));
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, React.createElement(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) => {
+export const GridFilterSection = (props) => {
     var _a, _b;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { api } = useAdaptable();
+    const { data: layout } = 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) => {
+    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
+    const expressionEditorContent = (React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: 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)));
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Grid Filters"),
+        React.createElement(Tabs.Content, null, expressionEditorContent)));
 };
-exports.GridFilterSection = GridFilterSection;

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

@@ -1,40 +1,34 @@
-"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 = () => {
+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 = () => {
     var _a;
-    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"))));
+    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"))));
 };
-exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
-const PivotColumnsSection = (props) => {
+export const PivotColumnsSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        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));
+        return 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_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 (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 `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
-exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -1,46 +1,40 @@
-"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 = () => {
+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 = () => {
     var _a;
-    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"))));
+    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"))));
 };
-exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
-const RowGroupingSection = (props) => {
+export const RowGroupingSection = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         var _a;
-        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));
+        return 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_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 (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 `Selected Columns:`;
                 }, onChange: handleColumnsChange })),
-        ((_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))))))))));
+        ((_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))))))))));
 };
-exports.RowGroupingSection = RowGroupingSection;

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

@@ -1,32 +1,27 @@
-"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 },
+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 },
             "Layout Name: ",
             layout.Name),
-        React.createElement(Tag_1.Tag, { mr: 2 },
+        React.createElement(Tag, { mr: 2 },
             "Layout Grid Type: ",
             layout.EnablePivot ? 'Pivot' : 'Table'),
-        React.createElement(Tag_1.Tag, { mr: 2 },
+        React.createElement(Tag, { mr: 2 },
             "Suppress Aggregation Function in Header: ",
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
 };
-exports.SettingsSectionSummary = SettingsSectionSummary;
-const SettingsSection = (props) => {
+export const SettingsSection = (props) => {
     var _a;
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const onNameChange = (event) => {
         props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
     };
@@ -34,18 +29,17 @@ const SettingsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
     };
     return (React.createElement(React.Fragment, null,
-        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"))))));
+        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"))))));
 };
-exports.SettingsSection = SettingsSection;

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

@@ -1,41 +1,36 @@
-"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"))));
+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"))));
 };
-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(rebass_1.Box, null,
+    return (React.createElement(Box, null,
         props.column.friendlyName,
-        SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
+        SortOrder && (React.createElement(SimpleButton, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
-const SortSection = (props) => {
+export const SortSection = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
     const sortedSortColumns = React.useMemo(() => {
         var _a;
-        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));
+        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));
     }, [layout, allSortableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {
@@ -56,11 +51,10 @@ const SortSection = (props) => {
                 return sort;
             }) }));
     }, [layout]);
-    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 (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 `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));
 };
-exports.SortSection = SortSection;

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

@@ -1,5 +1 @@
-"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;
+export const columnFilter = (column, searchText) => [column.friendlyName, column.columnId].some((candidate) => candidate === null || candidate === void 0 ? void 0 : candidate.toLowerCase().includes(searchText.toLowerCase()));

package/src/View/License/LicenseWatermark.js

@@ -1 +1,61 @@
-"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;
+import * as React from 'react';
+import { Logo } from '../../components/Logo';
+import { Flex } from 'rebass';
+const style = {
+    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)',
+};
+const isStyleValid = (element) => {
+    const notAllowedProperties = [
+        ['display', 'none'],
+        ['opacity', '0'],
+        ['position', 'absolute'],
+        ['position', 'fixed'],
+        ['position', 'relative'],
+        ['visibility', 'hidden'],
+    ];
+    for (const [prop, value] of notAllowedProperties) {
+        if (element.style[prop] === value) {
+            return false;
+        }
+    }
+    return true;
+};
+export const LicenseWatermark = (props) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const checkWatermark = () => {
+            var _a, _b;
+            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+                alert('It is not allowed to remove the Adaptable watermark.');
+            }
+            if (!isStyleValid(ref.current)) {
+                alert('It is not allowed to modify the Adaptable watermark.');
+            }
+            if ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.style) {
+                ref.current.style.border = style.border;
+                ref.current.style.padding = style.padding;
+                ref.current.style.fontWeight = `${style.fontWeight}`;
+                ref.current.style.margin = style.margin;
+                ref.current.style.fontSize = style.fontSize;
+                ref.current.style.color = style.color;
+                ref.current.style.background = style.background;
+                ref.current.style.display = 'flex';
+                ref.current.style.position = 'static';
+                ref.current.style.opacity = '1';
+                ref.current.style.visibility = 'visible';
+            }
+        };
+        const timerId = setInterval(checkWatermark, 5000);
+        return () => clearTimeout(timerId);
+    }, []);
+    return (React.createElement(Flex, { style: style, ref: ref },
+        React.createElement(Logo, { style: { marginRight: 10 } }),
+        React.createElement("div", null, props.children)));
+};

package/src/View/License/index.js

@@ -1,5 +1 @@
-"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; } });
+export { LicenseWatermark } from './LicenseWatermark';

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -1,16 +1,11 @@
-"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)();
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+export const EditGridFilterButton = () => {
+    const adaptable = useAdaptable();
     const handleClick = React.useCallback((event) => {
         event.stopPropagation();
         adaptable.api.gridFilterApi.openUIEditorForGridFilter();
     }, []);
-    return React.createElement(SimpleButton_1.default, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
+    return React.createElement(SimpleButton, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
 };
-exports.EditGridFilterButton = EditGridFilterButton;