@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -1,39 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const SettingsSection_1 = require("./sections/SettingsSection");
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const react_redux_1 = require("react-redux");
-const ColumnsSection_1 = require("./sections/ColumnsSection");
-const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
-const RowGroupingSection_1 = require("./sections/RowGroupingSection");
-const AggregationsSection_1 = require("./sections/AggregationsSection");
-const SortSection_1 = require("./sections/SortSection");
-const FilterSection_1 = require("./sections/FilterSection");
-const LayoutWizard = (props) => {
+import * as React from 'react';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { cloneObject } from '../../../Utilities/Helpers/Helper';
+import { SettingsSection, SettingsSectionSummary } from './sections/SettingsSection';
+import { Box } from 'rebass';
+import { useAdaptable } from '../../AdaptableContext';
+import { useDispatch } from 'react-redux';
+import { ColumnsSection, ColumnsSectionSummary } from './sections/ColumnsSection';
+import { PivotColumnsSection, PivotColumnsSectionSummary } from './sections/PivotColumnsSection';
+import { RowGroupingSection, RowGroupingSectionSummary } from './sections/RowGroupingSection';
+import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionValid, } from './sections/AggregationsSection';
+import { SortSection, SortSectionSummary } from './sections/SortSection';
+import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
+export const LayoutWizard = (props) => {
     var _a, _b;
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = useDispatch();
+    const adaptable = useAdaptable();
     const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
     const [layout, setLayout] = React.useState(() => {
         var _a;
         let preparedLayout = null;
         if (initialLayout) {
-            preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
+            preparedLayout = cloneObject(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
             }
         }
         else {
-            preparedLayout = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+            preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
@@ -68,7 +64,7 @@ const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Layout',
@@ -81,67 +77,66 @@ const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(SettingsSectionSummary, null),
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Columns',
                 details: 'Select Columns',
                 isVisible: () => !(layout === null || layout === void 0 ? void 0 : layout.EnablePivot),
-                renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(ColumnsSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(ColumnsSection, { onChange: setLayout }))),
             },
             {
                 title: 'Pivot Columns',
                 details: 'Select Pivot Columns',
                 isVisible: () => (layout === null || layout === void 0 ? void 0 : layout.EnablePivot) && layoutSupportedFeatures.PivotColumns,
-                renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(PivotColumnsSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Row Grouping',
-                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowGroupingSection, { onChange: setLayout }))),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.AggregationColumns,
                 details: 'Select Column Aggregations',
-                renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
-                isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(AggregationsSectionSummary, null),
+                isValid: (data) => isAggregationsSectionValid(data),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(AggregationsSection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
+                renderSummary: () => React.createElement(SortSectionSummary, null),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
-                title: 'Filters',
+                title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
-                isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
+                isValid: (layout) => isColumnFiltersValid(layout),
                 details: 'View Column Filters',
-                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(FilterSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Layout',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
-                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
+                render: () => (React.createElement(Box, { padding: 2 },
+                    React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },
         ] }));
 };
-exports.LayoutWizard = LayoutWizard;

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

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-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");
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import DropdownButton from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+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';
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
-const isAggregationsSectionValid = (data) => {
+export const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.AggregationColumns
         ? Object.values(data.AggregationColumns).find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
         : null;
@@ -24,26 +20,24 @@ const isAggregationsSectionValid = (data) => {
     }
     return true;
 };
-exports.isAggregationsSectionValid = isAggregationsSectionValid;
-const AggregationsSectionSummary = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const AggregationsSectionSummary = () => {
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const aggregations = layout.AggregationColumns;
     const entires = Object.entries(aggregations !== null && aggregations !== void 0 ? aggregations : {});
     let content = null;
     if (entires.length) {
-        content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) },
-            React.createElement(Tag_1.Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
+        content = (React.createElement(FormLayout, null, entires.map(([columnId, aggregation]) => (React.createElement(FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) },
+            React.createElement(Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
     }
     else {
-        content = React.createElement(Tag_1.Tag, null, "No Aggregations");
+        content = React.createElement(Tag, null, "No Aggregations");
     }
-    return React.createElement(rebass_1.Box, null, content);
+    return React.createElement(Box, null, content);
 };
-exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const aggValue = (_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.AggregationColumns) === null || _b === void 0 ? void 0 : _b[props.column.columnId];
     const adaptableAggFunctions = [];
     if (props.column.dataType === 'Number') {
@@ -95,24 +89,24 @@ const ColumnRow = (props) => {
             ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
-    return (React.createElement(rebass_1.Flex, { alignItems: "center" },
+    return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(rebass_1.Text, null, "Weight"),
+        aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
+        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+            React.createElement(Text, null, "Weight"),
             ' ',
-            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
+            React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
 };
-const AggregationsSection = (props) => {
+export const AggregationsSection = (props) => {
     var _a, _b;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getColumns();
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         var _a, _b;
-        return (0, sortWithOrder_1.sortWithOrderArray)(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {
@@ -150,14 +144,13 @@ const AggregationsSection = (props) => {
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange(Object.assign(Object.assign({}, layout), { SuppressAggFuncInHeader: checked }));
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function in Header"))),
-            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, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], allowReorder: () => false, xSelectedLabel: () => {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Column Aggregations"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(Flex, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function in Header"))),
+            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, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], allowReorder: () => false, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));
 };
-exports.AggregationsSection = AggregationsSection;

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

@@ -1,33 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
-const tslib_1 = require("tslib");
-const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const Tabs_1 = require("../../../../components/Tabs");
-const Tag_1 = require("../../../../components/Tag");
-const AdaptableColumn_1 = require("../../../../PredefinedConfig/Common/AdaptableColumn");
-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 icons_1 = require("../../../../components/icons");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const Helper_1 = require("../../../../Utilities/Helpers/Helper");
-const ColumnLabels_1 = require("../Components/ColumnLabels");
-const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
-const ColumnsSectionSummary = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import DropdownButton from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
+import SimpleButton from '../../../../components/SimpleButton';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { isValidOrderForColumnGroups, } from '../../../../PredefinedConfig/Common/AdaptableColumn';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { columnFilter } from './Utilities';
+import { Icon } from '../../../../components/icons';
+import { CheckBox } from '../../../../components/CheckBox';
+import { clamp } from '../../../../Utilities/Helpers/Helper';
+import { ColumnLabels } from '../Components/ColumnLabels';
+const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
+export const ColumnsSectionSummary = () => {
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -82,8 +78,8 @@ const ColumnsSectionSummary = () => {
                     if (!((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.sortOrder) === null || _b === void 0 ? void 0 : _b.sort)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
-                        React.createElement(icons_1.Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
+                    return (React.createElement(Flex, null,
+                        React.createElement(Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
                         ' ',
                         React.createElement(PropertyOrderText, null, (_g = (_f = (_e = params.data) === null || _e === void 0 ? void 0 : _e.sortOrder) === null || _f === void 0 ? void 0 : _f.index) !== null && _g !== void 0 ? _g : '')));
                 },
@@ -98,7 +94,7 @@ const ColumnsSectionSummary = () => {
                     if (!((_a = params.data) === null || _a === void 0 ? void 0 : _a.filter)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
+                    return React.createElement(CheckBox, { checked: true });
                 },
             },
             group: {
@@ -111,8 +107,8 @@ const ColumnsSectionSummary = () => {
                     if (!params.data.grouping) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(rebass_1.Flex, null,
-                        React.createElement(CheckBox_1.CheckBox, { margin: 0, mr: 1, checked: true }),
+                    return (React.createElement(Flex, null,
+                        React.createElement(CheckBox, { margin: 0, mr: 1, checked: true }),
                         React.createElement(PropertyOrderText, null, (_a = params.data) === null || _a === void 0 ? void 0 : _a.grouping)));
                 },
             },
@@ -125,18 +121,17 @@ const ColumnsSectionSummary = () => {
             minHeight: tableHeight,
         },
     };
-    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+    return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
+        React.createElement(InfiniteTable, { columnTypes: {
                 default: {
                     defaultFlex: 1,
                 },
             }, rowHeight: rowHeight, domProps: tableDOMProps, columns: columns })));
 };
-exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b, _c, _d;
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     // headers
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId);
     const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : initialHeader;
@@ -159,40 +154,40 @@ const ColumnRow = (props) => {
     const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
     // width
     const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
-    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
-        React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
-            React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
+    return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
+            React.createElement(Flex, { mr: 2, alignItems: "center" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null,
-            React.createElement(rebass_1.Flex, { mr: 2 },
-                React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(SimpleButton_1.default, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
-        isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
-            React.createElement(rebass_1.Flex, { mb: 2 },
-                React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
-                    React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
-                        React.createElement(Tag_1.Tag, null, props.column.columnId)),
-                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+            React.createElement(Flex, { mr: 2 },
+                React.createElement(ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
+            React.createElement(Box, { flex: 1 }),
+            React.createElement(SimpleButton, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
+        isExpanded && (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
+            React.createElement(Flex, { mb: 2 },
+                React.createElement(FormLayout, { width: "100%", mr: 3 },
+                    React.createElement(FormRow, { label: "ColumnId" },
+                        React.createElement(Tag, null, props.column.columnId)),
+                    React.createElement(FormRow, { label: "Header" },
+                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                    React.createElement(FormRow, { label: "Width" },
+                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
                             }, value: columnWidth })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                    React.createElement(FormRow, { label: "Pinning" },
+                        React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
-const ColumnsSection = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const ColumnsSection = (props) => {
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedColumns = React.useMemo(() => {
-        return (0, sortWithOrder_1.sortWithOrderArray)(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allColumns]);
     const handlePinChange = (columnId, pinning) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));
@@ -204,7 +199,7 @@ const ColumnsSection = (props) => {
         var _a, _b;
         const oldColumns = (_a = layout.Columns.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _a !== void 0 ? _a : [];
         const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _b !== void 0 ? _b : [];
-        if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
+        if (!isValidOrderForColumnGroups({ oldColumns, newColumns })) {
             return;
         }
         props.onChange(Object.assign(Object.assign({}, layout), { Columns: columnIds }));
@@ -212,11 +207,11 @@ const ColumnsSection = (props) => {
     const handleColumnWidthChange = (columnId, width) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnWidthMap: Object.assign(Object.assign({}, layout.ColumnWidthMap), { [columnId]: width }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
-                React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Columns"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(Flex, { mt: 2, mb: 3 },
+                React.createElement(ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
                         Sortable: 'Sortable',
                         Filterable: 'Filterable',
                         Aggregatable: 'Aggregatable',
@@ -224,8 +219,7 @@ const ColumnsSection = (props) => {
                         Moveable: 'Moveable',
                         Pivotable: 'Pivotable',
                     }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
-            React.createElement(ValueSelector_1.ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
+            React.createElement(ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
-exports.ColumnsSection = ColumnsSection;