@adaptabletools/adaptable 21.2.2-canary.0 → 22.0.0-canary.1

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -7,10 +6,11 @@ import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { Box } from '../../../../components/Flex';
 export const PivotColumnsSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Pivot Columns Defined"))));
+    return (React.createElement(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground" }, layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag, { className: "twa:mr-1", key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Pivot Columns Defined"))));
 };
 export const PivotColumnsSection = (props) => {
     const adaptable = useAdaptable();
@@ -25,10 +25,8 @@ export const PivotColumnsSection = (props) => {
             PivotColumns: columnIds,
         });
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         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) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, xSelectedLabel: () => {
-                    return `Selected Columns:`;
-                }, onChange: handleColumnsChange }))));
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { columnFilter } from './Utilities';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
@@ -9,11 +8,12 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
 import { RowGroupBehaviorSection } from './RowGroupingSection';
+import { Box } from '../../../../components/Flex';
 export const PivotRowGroupingSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     return (React.createElement(Box, null, layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
-        return (React.createElement(Box, { mb: 2 },
+        return (React.createElement(Box, { className: "twa:mb-2" },
             React.createElement(Tag, { key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
     })) : (React.createElement(Tag, null, "No Pivot Row Grouping"))));
 };
@@ -38,9 +38,7 @@ export const PivotRowGroupingSection = (props) => {
         React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
         React.createElement(Tabs.Tab, null, rowGroupsText),
         React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
-                    return `Selected Columns:`;
-                }, onChange: handleColumnsChange })),
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
         React.createElement(Tabs.Content, null,
             React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import FormLayout from '../../../../components/FormLayout';
 import { columnFilter } from './Utilities';
 import { RadioGroup } from '../../../../components/Radio';
@@ -11,15 +10,16 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
 import { TypeRadio } from '../../../Wizard/TypeRadio';
+import { Box, Flex } from '../../../../components/Flex';
 export const RowGroupingSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return (React.createElement(Box, { display: 'flex', flexDirection: 'row' },
+        return (React.createElement(Flex, { flexDirection: "row" },
             React.createElement(Tag, null, "Row Grouping is not available in Tree Grids")));
     }
-    return (React.createElement(Box, { display: 'flex', flexDirection: 'row' }, layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
-        return (React.createElement(Box, { key: columnId, mb: 2, mr: 2 },
+    return (React.createElement(Flex, { flexDirection: "row" }, layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
+        return (React.createElement(Box, { key: columnId, className: "twa:mb-2 twa:mr-2" },
             React.createElement(Tag, null, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
     })) : (React.createElement(Tag, null, "No Row Grouping"))));
 };
@@ -47,7 +47,7 @@ export const RowGroupBehaviorSection = (props) => {
 export const RowGroupingSection = (props) => {
     const adaptable = useAdaptable();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return (React.createElement(Box, { display: 'flex', flexDirection: 'row' },
+        return (React.createElement(Flex, { flexDirection: "row" },
             React.createElement(Tag, null, "Row Grouping is not available in Tree Grids")));
     }
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -71,7 +71,7 @@ export const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return (React.createElement(Box, { style: { height: '100%' } },
+    return (React.createElement(Box, { className: "twa:h-full" },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Group Display Type"),
             React.createElement(Tabs.Content, null,
@@ -91,13 +91,11 @@ export const RowGroupingSection = (props) => {
                         } },
                         React.createElement(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
                         React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
-        React.createElement(Tabs, { mt: 2 },
+        React.createElement(Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs.Tab, null, rowGroupsText),
             React.createElement(Tabs.Content, null,
-                React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
-                        return `Selected Columns:`;
-                    }, onChange: handleColumnsChange })),
+                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
             React.createElement(Tabs.Content, null,
                 React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
 };

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Panel from '../../../../components/Panel';
@@ -17,6 +16,7 @@ import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { Box, Flex } from '../../../../components/Flex';
 export const areSummaryRowsValid = (layout) => {
     if (!layout.RowSummaries)
         return true;
@@ -74,16 +74,16 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
 export const RowSummarySectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { display: 'flex', flexDirection: 'column' }, layout.RowSummaries?.length ? (layout.RowSummaries.map((rowSummary, index) => {
+    return (React.createElement(Box, { className: "twa:flex twa:flex-col" }, layout.RowSummaries?.length ? (layout.RowSummaries.map((rowSummary, index) => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Box, { mr: 1, mb: 1, key: index },
+            React.createElement(Box, { className: "twa:mr-1 twa:mb-1", key: index },
                 rowSummary.Position,
                 ":",
                 ' ',
                 Object.keys(rowSummary.ColumnsMap).map((colId) => {
                     if (colId === 'Source' || colId === 'Uuid')
                         return null;
-                    return (React.createElement(Tag, { mr: 1, key: colId },
+                    return (React.createElement(Tag, { className: "twa:mr-1", key: colId },
                         rowSummary.ColumnsMap[colId],
                         "(",
                         adaptable.api.columnApi.getFriendlyNameForColumnId(colId),
@@ -107,9 +107,9 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (React.createElement(Panel, { header: React.createElement(Flex, { style: { width: '100%' } },
-            React.createElement(Flex, { flex: 1, alignItems: "center" }, "Row Summary"),
-            React.createElement(Box, { mr: 2 },
+    return (React.createElement(Panel, { header: React.createElement(Flex, { className: "twa:w-full" },
+            React.createElement(Flex, { className: "twa:flex-1", alignItems: "center" }, "Row Summary"),
+            React.createElement(Box, { className: "twa:mr-2" },
                 React.createElement(SuspendToggleButton, { onSuspend: () => {
                         onChange({
                             ...rowSummary,
@@ -123,7 +123,7 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                     }, suspendableObject: rowSummary })),
             React.createElement(SimpleButton, { icon: "delete", onClick: () => {
                     onDelete();
-                } })), p: 2 },
+                } })), className: "twa:p-2" },
         React.createElement(FormLayout, null,
             React.createElement(FormRow, { label: "Position" },
                 React.createElement(Select, { options: [
@@ -148,12 +148,10 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                             IncludeOnlyFilteredRows,
                         });
                     } }, "Include Only Filtered Rows"))),
-        React.createElement(Flex, { flexDirection: 'column', mt: 2, mb: 1 },
-            React.createElement(Flex, { alignItems: "center", flex: 1, mb: 2 }, "Column Aggregations"),
-            React.createElement(Panel, { bodyProps: { maxHeight: '100%' }, style: { height: 360 } },
-                React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, xSelectedLabel: () => {
-                        return 'Active Aggregations:';
-                    }, toListLabel: (column) => {
+        React.createElement(Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1" },
+            React.createElement(Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2" }, "Column Aggregations"),
+            React.createElement(Panel, { bodyProps: { className: 'twa:max-h-full ' }, className: "twa:h-[360px]" },
+                React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
                         const label = column.friendlyName ?? column.columnId;
                         if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
                             return label;
@@ -174,7 +172,7 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                         }
                         const expression = rowSummary.ColumnsMap[column.columnId];
                         return (React.createElement(Flex, null,
-                            React.createElement(Flex, { mr: 2, alignItems: 'center' }, label),
+                            React.createElement(Flex, { className: "twa:mr-2", alignItems: 'center' }, label),
                             React.createElement(Select, { value: expression, options: expressionOptions, onChange: (expression) => {
                                     onChange({
                                         ...rowSummary,
@@ -208,8 +206,8 @@ export const RowSummarySection = (props) => {
         React.createElement(Tabs.Tab, null, "Row Summaries"),
         React.createElement(Tabs.Content, null,
             React.createElement("div", null,
-                React.createElement(Flex, { mb: 1 },
-                    React.createElement(Flex, { flex: 1 }),
+                React.createElement(Flex, { className: "twa:mb-1" },
+                    React.createElement(Flex, { className: "twa:flex-1" }),
                     React.createElement(SimpleButton, { onClick: () => {
                             props.onChange({
                                 ...layout,

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

@@ -1,5 +1,4 @@
 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';
@@ -7,17 +6,18 @@ import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
+import { Box, Flex } from '../../../../components/Flex';
 export const SettingsSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const isPivot = isPivotLayout(layout);
     return (React.createElement(Box, null,
-        React.createElement(Tag, { mr: 2 },
+        React.createElement(Tag, { className: "twa:mr-2" },
             "Layout Name: ",
             layout.Name),
-        React.createElement(Tag, { mr: 2 },
+        React.createElement(Tag, { className: "twa:mr-2" },
             "Layout Grid Type: ",
             isPivot ? 'Pivot' : 'Table'),
-        React.createElement(Tag, { mr: 2 },
+        React.createElement(Tag, { className: "twa:mr-2" },
             "Suppress Aggregation Function in Column Header:",
             ' ',
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
@@ -31,14 +31,14 @@ export const SettingsSection = (props) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 3 },
+        React.createElement(Tabs, { className: "twa: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(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
                         React.createElement(FormRow, { label: "Name" },
-                            React.createElement(Input, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' })))))),
-        React.createElement(Tabs, { mb: 2 },
+                            React.createElement(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' })))))),
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Grid Type"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "column" },

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import SimpleButton from '../../../../components/SimpleButton';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
@@ -9,18 +8,19 @@ import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { Box } from '../../../../components/Flex';
 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"))));
+    return (React.createElement(Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag, { key: value, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag, null, "No Sorts"))));
 };
 const ColumnRow = (props) => {
     const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
     const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
     return (React.createElement(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, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
 export const SortSection = (props) => {
     const adaptable = useAdaptable();
@@ -55,10 +55,8 @@ export const SortSection = (props) => {
             }),
         });
     }, [layout]);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         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) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
-                    return `Active sorts:`;
-                }, onChange: handleColumnsSelectionChange }))));
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }))));
 };

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(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.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))};
+import*as e from"react";import{Logo as t}from"../../components/Logo";import{Flex as r}from"../../components/Flex";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(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.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))};

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Text } from 'rebass';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
 import { Tag } from '../../../components/Tag';
 import { NamedQueryModuleId } from '../../../Utilities/Constants/ModuleConstants';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
         return 'Expression is empty';
@@ -17,7 +17,7 @@ export const isValidNamedQueryExpression = (data, api) => {
 };
 export const renderNamedQueryExpressionSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         "Expression: ",
         React.createElement(Tag, null, api.internalApi.getAdaptableQueryExpressionText(data))));
 };

package/src/View/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -1,12 +1,12 @@
 // TODO: move to named query
 import * as React from 'react';
-import { Text } from 'rebass';
 import WizardPanel from '../../../components/WizardPanel';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import ErrorBox from '../../../components/ErrorBox';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Tag } from '../../../components/Tag';
+import { Box } from '../../../components/Flex';
 export const isValidNamedQuerySettings = (data, api) => {
     const validationResult = api.namedQueryApi.isValidNamedQuery(data);
     const ErrorMessage = !validationResult.valid ? validationResult.message : null;
@@ -16,7 +16,7 @@ export const isValidNamedQuerySettings = (data, api) => {
     return ErrorMessage;
 };
 export const renderNamedQuerySettingsSummary = (data) => {
-    return (React.createElement(Text, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         "Name: ",
         React.createElement(Tag, null, data.Name)));
 };
@@ -34,7 +34,7 @@ export const NamedQuerySettingsWizardSection = (props) => {
     return (React.createElement(WizardPanel, { "data-name": 'named-query-settings' },
         React.createElement(FormLayout, null,
             React.createElement(FormRow, { label: "Name" },
-                React.createElement(AdaptableInput, { "data-name": "query-name", value: data.Name, autoFocus: true, width: 300, type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) })),
+                React.createElement(AdaptableInput, { "data-name": "query-name", value: data.Name, autoFocus: true, className: "twa:w-[300px]", type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) })),
             ' ',
             errorMessage ? (React.createElement(FormRow, { label: "" },
                 React.createElement(ErrorBox, null, errorMessage))) : null)));

package/src/View/NamedQuery/Wizard/NamedQueryWizard.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { isValidNamedQuerySettings, NamedQuerySettingsWizardSection, renderNamedQuerySettingsSummary, } from './NamedQuerySettingsWizardSection';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -9,6 +8,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as NamedQueryRedux from '../../../Redux/ActionsReducers/NamedQueryRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export function NamedQueryWizard(props) {
     const [namedQuery, setNamedQuery] = useState(() => {
         const value = props.popupParams?.value ?? '';
@@ -47,7 +47,7 @@ export function NamedQueryWizard(props) {
                 details: 'Select Named Query Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setNamedQuery }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -56,7 +56,7 @@ export function NamedQueryWizard(props) {
                 title: 'Summary',
                 details: 'Review your Named Query',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
             },

package/src/View/Note/NoteEditor.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
+import clsx from 'clsx';
 export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const { api } = useAdaptable();
     const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
@@ -24,7 +25,10 @@ export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }
         return null;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Textarea, { readOnly: isReadonly, ref: textAreaRef, width: "100%", minWidth: 180, minHeight: 120, style: { paddingRight: showPopupCloseButton ? 30 : 0 }, value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
+        React.createElement(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: clsx('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
+                'twa:pr-[30px]': showPopupCloseButton,
+                'twa:pr-0': !showPopupCloseButton,
+            }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     onClose();
                 }

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import Input from '../../../components/Input';
 import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,6 +8,7 @@ import { PlusMinusRuleSummary, PlusMinusRuleWizardSection } from './PlusMinusRul
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
+import { Flex } from '../../../components/Flex';
 export const PlusMinusSettingsSummary = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
@@ -44,16 +44,16 @@ export const PlusMinusSettingsWizardSection = (props) => {
             NudgeValue: isNaN(newValue) ? '' : newValue,
         });
     };
-    return (React.createElement(Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
-        React.createElement(Tabs, { autoFocus: false, padding: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
             React.createElement(Tabs.Tab, null, "Plus Minus Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Nudge Value" },
-                        React.createElement(Input, { "data-name": "nudge-value", flex: 1, marginRight: 3, onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
+                        React.createElement(Input, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
                     React.createElement(FormRow, { label: "Nudge Type" },
                         React.createElement(Flex, null,
                             React.createElement(Radio, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio, { "data-name": "nudge-type-condition", marginLeft: 3, value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
+                            React.createElement(Radio, { "data-name": "nudge-type-condition", className: "twa:ml-3", value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
         props.hasCondition && (React.createElement(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
 };

package/src/View/PlusMinus/Wizard/PlusMinusWizard.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { renderScopeSummary, isScopeValid } from '../../Components/NewScopeComponent';
 import { PlusMinusScopeWizardSection } from './PlusMinusScopeWizardSection';
@@ -8,6 +7,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as PlusMinusRedux from '../../../Redux/ActionsReducers/PlusMinusRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const PlusMinusWizard = (props) => {
     const [plusMinus, setPlusMinus] = React.useState(() => {
         const newPlusMinus = {
@@ -56,7 +56,7 @@ export const PlusMinusWizard = (props) => {
                     scopeColumns: 'Plus/Minus is applied in cells in selected columns',
                     scopeDataTypes: 'Plus/Minus is applied for cells with selected data type',
                 }),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(PlusMinusScopeWizardSection, { onChange: setPlusMinus }))),
             },
             {
@@ -69,14 +69,14 @@ export const PlusMinusWizard = (props) => {
                 details: 'Select Plus/Minus Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setPlusMinus }))),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/QuickSearch/FloatingQuickSearch/FloatingQuickSearch.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Flex } from 'rebass';
+import { Flex } from '../../../components/Flex';
 import { Drawer } from '../../../components/Drawer/index';
 import { QuickSearchFloatingVisibilitySelector } from '../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../AdaptableContext';
@@ -16,6 +16,6 @@ export const QuickSearchDrawer = () => {
                 adaptable.api.quickSearchApi.hideFloatingQuickSearch();
             }
         } },
-        React.createElement(Flex, { className: "ab-FloatinQuickSearch" },
+        React.createElement(Flex, { className: "ab-FloatinQuickSearch ab-FloatingQuickSearch" },
             React.createElement(QuickSearchInput, { autoFocus: true }))));
 };

package/src/View/QuickSearch/QuickSearchInput.d.ts

@@ -4,5 +4,6 @@ export interface QuickSearchInputProps {
     autoFocus?: boolean;
     width?: string | number;
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    inputClassName?: string;
 }
 export declare const QuickSearchInput: React.FunctionComponent<QuickSearchInputProps>;

package/src/View/QuickSearch/QuickSearchInput.js

@@ -5,8 +5,8 @@ import { AdaptableFormControlTextClear } from '../Components/Forms/AdaptableForm
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { useAdaptable } from '../AdaptableContext';
 import SimpleButton from '../../components/SimpleButton';
-import join from '../../components/utils/join';
-import { Box } from 'rebass';
+import { Flex } from '../../components/Flex';
+import { twMerge } from '../../twMerge';
 export const QuickSearchInput = (props) => {
     const adaptable = useAdaptable();
     const QuickSearchText = useSelector((state) => state.QuickSearch.QuickSearchText);
@@ -17,7 +17,7 @@ export const QuickSearchInput = (props) => {
         QuickSearchText,
         onRunQuickSearch,
     });
-    return (React.createElement(AdaptableFormControlTextClear, { onClick: props.onClick, "aria-label": 'Quick Search', type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: join('ab-QuickSearch__control', props.className), value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: props.width ?? '10rem' }, actionTools: isServerSideRowModel ? null : (React.createElement(Box, { display: "flex", flexDirection: "row", alignItems: "center", flex: 'none' },
-            React.createElement(SimpleButton, { "aria-label": 'Previous Match', icon: "arrow-up", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoPreviousMatch() }),
-            React.createElement(SimpleButton, { "aria-label": 'Next Match', icon: "arrow-down", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoNextMatch() }))) }));
+    return (React.createElement(AdaptableFormControlTextClear, { onClick: props.onClick, "aria-label": 'Quick Search', type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: twMerge('ab-QuickSearch__control twa:h-full', props.className), value: searchText, OnTextChange: search, inputClassName: twMerge('twa:w-[10rem]', props.inputClassName), actionTools: isServerSideRowModel ? null : (React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-none" },
+            React.createElement(SimpleButton, { "aria-label": 'Previous Match', icon: "arrow-up", className: "twa:px-0 twa:py-0 twa:mr-1", disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoPreviousMatch() }),
+            React.createElement(SimpleButton, { "aria-label": 'Next Match', icon: "arrow-down", className: "twa:px-0 twa:py-0 twa:mr-1", disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoNextMatch() }))) }));
 };