@adaptabletools/adaptable 23.0.0-canary.4 → 23.0.0-canary.5

package/src/View/Components/ValueSelector/index.js

@@ -46,40 +46,66 @@ export function ValueSelector(props) {
         toIdentifier,
         value,
     });
-    const notifyChange = useCallback(() => {
-        const newSelection = [...selectedMap.keys()];
+    const reorderEnabled = allowReorder !== false;
+    const commitSelection = useCallback((nextMap) => {
+        const newSelection = [...nextMap.keys()];
         if (!newSelection.length && selectedOnly) {
             setSelectedOnly(false);
         }
-        onChange(newSelection, new Map(selectedMap));
-    }, [onChange, selectedOnly, selectedMap]);
+        onChange(newSelection, nextMap);
+    }, [onChange, selectedOnly, setSelectedOnly]);
+    const updateSelection = useCallback((updater) => {
+        const nextMap = new Map(selectedMap);
+        updater(nextMap);
+        commitSelection(nextMap);
+    }, [commitSelection, selectedMap]);
+    const filteredOptions = useMemo(() => {
+        return options.filter((option) => {
+            let result = true;
+            if (filter) {
+                result = filter(option, searchInputValue);
+            }
+            result = result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
+            return result;
+        });
+    }, [filter, options, searchInputValue, selectedMap, selectedOnly, toIdentifier]);
+    const renderOptionRow = (option, index, reorderable, itemDomProps) => {
+        const identifier = toIdentifier(option);
+        const label = !reorderEnabled ? preparedToLabel(option) : null;
+        const { onPointerDown, className: itemClassName, ...restDomProps } = itemDomProps ?? {};
+        return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-2', {
+                'twa:mt-1': index,
+                'twa:mt-0': !index,
+            }, itemClassName, `${baseClassName}__option`), children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
+                            updateSelection((next) => {
+                                next.clear();
+                                if (checked) {
+                                    next.set(identifier, option);
+                                }
+                            });
+                        }, children: label })) : (_jsx(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
+                            updateSelection((next) => {
+                                if (checked) {
+                                    next.set(identifier, option);
+                                }
+                                else {
+                                    next.delete(identifier);
+                                }
+                            });
+                        }, checked: selectedMap.has(identifier), children: label })), _jsx(Box, { className: "twa:ml-2 twa:flex-1", children: reorderEnabled ? preparedToLabel(option) : null })] }) }));
+    };
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
-        const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
+        if (!reorderEnabled) {
+            return (_jsx(React.Fragment, { children: renderOptionRow(option, index, false) }, identifier));
+        }
         return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps) => {
                 const { onPointerDown, ...restDomProps } = itemDomProps;
-                return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
-                        'twa:mt-1': index,
-                        'twa:mt-0': !index,
-                    }, restDomProps.className, `${baseClassName}__option`), children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                                    if (checked) {
-                                        selectedMap.clear();
-                                        selectedMap.set(identifier, option);
-                                    }
-                                    else {
-                                        selectedMap.delete(identifier);
-                                    }
-                                    notifyChange();
-                                }, children: label })) : (_jsx(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
-                                    if (checked) {
-                                        selectedMap.set(identifier, option);
-                                    }
-                                    else {
-                                        selectedMap.delete(identifier);
-                                    }
-                                    notifyChange();
-                                }, checked: selectedMap.has(identifier), children: label })), _jsx(Box, { className: "twa:ml-2 twa:flex-1", children: allowReorder ? preparedToLabel(option) : null })] }) }));
+                return renderOptionRow(option, index, reorderable, {
+                    onPointerDown: reorderable ? onPointerDown : undefined,
+                    ...restDomProps,
+                });
             } }, identifier));
     };
     const showOnlySelectedCheckbox = (_jsx(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly, children: showSelectedOnlyLabel ?? 'Show Selected Only' }));
@@ -87,60 +113,47 @@ export function ValueSelector(props) {
         ...props,
         showOnlySelectedCheckbox,
         onSelectAll: () => {
-            options.forEach((option) => {
-                selectedMap.set(toIdentifier(option), option);
+            updateSelection((next) => {
+                options.forEach((option) => {
+                    next.set(toIdentifier(option), option);
+                });
             });
-            notifyChange();
         },
         onClearOption: (id) => {
-            selectedMap.delete(id);
-            notifyChange();
+            updateSelection((next) => {
+                next.delete(id);
+            });
         },
         onClear: () => {
-            selectedMap.clear();
-            notifyChange();
+            updateSelection((next) => {
+                next.clear();
+            });
         },
     };
-    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    const optionList = (_jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx("div", { children: filteredOptions.map(renderOption) }) }));
+    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), reorderEnabled ? (_jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];
                             const extraKeys = [];
-                            for (const [key, value] of selectedMap) {
-                                if (value != null) {
+                            for (const [key, mapValue] of selectedMap) {
+                                if (mapValue != null) {
                                     selection.push(key);
                                 }
                                 else {
-                                    // null/non-existent keys have to be stored separately
                                     extraKeys.push(key);
                                 }
                             }
-                            const clone = new Map(selectedMap);
-                            // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
-                            //   selection,
-                            //   dragIndex,
-                            //   dropIndex
-                            // );
                             const newSelection = _sortedIndexes
                                 .map((index) => selection[index])
                                 .filter((x) => x != null);
                             newSelection.push(...extraKeys);
-                            selectedMap.clear();
+                            const nextMap = new Map();
                             newSelection.forEach((key) => {
-                                selectedMap.set(key, clone.get(key));
+                                nextMap.set(key, selectedMap.get(key));
                             });
-                            notifyChange();
-                        }, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: options
-                                .filter((option) => {
-                                let result = true;
-                                if (filter) {
-                                    result = filter(option, searchInputValue);
-                                }
-                                result =
-                                    result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
-                                return result;
-                            })
-                                .map(renderOption) })) }) }) })] }));
+                            commitSelection(nextMap);
+                        }, children: (listDomProps) => _jsx("div", { ...listDomProps, children: filteredOptions.map(renderOption) }) }) }) })) : (optionList)] }));
 }
 export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,13 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
 import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
+import { Card } from '../../../components/Card';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(Tag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
@@ -28,16 +27,12 @@ export const CustomSortColumnWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         const sortableColumns = api.columnApi.getSortableColumns();
-        const nonComparerSortableColumns = sortableColumns.filter((c) => {
-            return api.customSortApi.internalApi.columnHasCustomSortComparer(c.columnId);
-        });
         const customSorts = api.customSortApi.getCustomSorts();
         const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
             ...columnSortComparers.map((comparer) => api.columnScopeApi.getColumnIdsInScope(comparer.scope)),
         ];
-        // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {
             if (api.customSortApi.internalApi.columnHasCustomSortComparer(column.columnId)) {
                 return false;
@@ -57,11 +52,11 @@ export const CustomSortColumnWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { style: { flex: 1, minHeight: 0 }, children: [_jsx(Tabs.Tab, { children: "Column" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Box, { className: "twa:text-2", children: "Columns" }), _jsx(Box, { className: "twa:flex-3" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                                    props.onChange({
-                                        ...data,
-                                        SortedValues: [],
-                                        ColumnId: ids[0],
-                                    });
-                                }, allowReorder: false })] })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Custom Sort" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }) }), _jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the column to apply the Custom Sort to" })] }), _jsx(Flex, { flexDirection: "row", alignItems: "center", className: "twa:px-2 twa:pb-2 twa:gap-2", children: _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", className: "twa:flex-1" }) }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:px-2 twa:pb-2", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                                props.onChange({
+                                    ...data,
+                                    SortedValues: [],
+                                    ColumnId: ids[0],
+                                });
+                            }, allowReorder: false }) })] })] }));
 };

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMemo, useEffect, useState } from 'react';
 import { Loader } from '../../../components/Loader';
-import { Tabs } from '../../../components/Tabs';
 import join from '../../../components/utils/join';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
 import { ValueSelector } from '../../Components/ValueSelector';
@@ -10,6 +9,8 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import ArrayExtensions from '../../.././Utilities/Extensions/ArrayExtensions';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { TagList } from '../../../components/Tag';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'At least one value is required for the Custom Sort order.';
@@ -27,7 +28,6 @@ export const CustomSortValuesWizardSection = (props) => {
     useEffect(() => {
         let isMounted = true;
         (async () => {
-            // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
             const newValues = (await runIfNotResolvedIn(api.gridApi.internalApi.getDistinctValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true))) ?? [];
             if (!isMounted) {
@@ -70,10 +70,10 @@ export const CustomSortValuesWizardSection = (props) => {
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return (_jsxs(Tabs, { style: { height: '100%' }, className: className, children: [_jsx(Tabs.Tab, { children: "Sort Order" }), _jsxs(Tabs.Content, { children: [isDistinctValuesLoading && _jsx(Loader, { children: "Loading" }), _jsx(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
-                            props.onChange({
-                                ...data,
-                                SortedValues,
-                            });
-                        } })] })] }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full twa:p-3", children: _jsxs(Card, { shadow: false, className: join('twa:flex-1 twa:min-h-0', className), children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Sort Order" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Specify the custom sort order \u2014 drag selected items to modify order" })] }), _jsxs(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: [isDistinctValuesLoading && _jsx(Loader, { children: "Loading" }), _jsx(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
+                                props.onChange({
+                                    ...data,
+                                    SortedValues,
+                                });
+                            } })] })] }) }));
 };

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -193,7 +193,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
     const mainPrimaryKeyColumnHeader = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
     const options = {
         loading: false,
-        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-text-on-primary);">No Data Changes</div>',
+        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-primary-foreground);">No Data Changes</div>',
         defaultColDef: {
             floatingFilter: true,
             filter: true,

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -5,12 +5,12 @@ import DropdownButton from '../../../../components/DropdownButton';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';
 import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
-import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptablePopover } from '../../../AdaptablePopover';
 import UIHelper from '../../../UIHelper';
 import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -62,7 +62,6 @@ export const ColumnsSection = (props) => {
             abColumn: {
                 header: 'AdapTable Column',
                 render: (params) => {
-                    // filter out used columns
                     const availableColumns = allColumns
                         .filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
                         .map((col) => {
@@ -104,16 +103,16 @@ export const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (_jsx(Box, { className: "twa:p-2", children: _jsxs(HelpBlock, { className: "twa:text-error", children: ["No Data has been Imported. Go to ", _jsx(Tag, { children: "Upload" }), " step and provide Data"] }) }));
+        return (_jsx(Box, { className: "twa:p-3", children: _jsxs(HelpBlock, { className: "twa:text-error", children: ["No data has been imported. Go to the ", _jsx(Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: _jsxs(Tabs, { className: "twa:mb-2 twa:h-full", children: [_jsx(Tabs.Tab, { children: "Columns" }), _jsx(Tabs.Content, { children: _jsx(DataSource, { data: props.columnsMap, primaryKey: 'field', children: _jsx(InfiniteTableGrid, { columnPinning: {
-                                valid: 'end',
-                                type: 'end',
-                            }, columnTypes: {
-                                default: {
-                                    minWidth: 100,
-                                    defaultFlex: 1,
-                                },
-                            }, domProps: tableDOMProps, columns: columns }) }) })] }) }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: _jsxs(Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Mapping" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(DataSource, { data: props.columnsMap, primaryKey: 'field', children: _jsx(InfiniteTableGrid, { columnPinning: {
+                                        valid: 'end',
+                                        type: 'end',
+                                    }, columnTypes: {
+                                        default: {
+                                            minWidth: 100,
+                                            defaultFlex: 1,
+                                        },
+                                    }, domProps: tableDOMProps, columns: columns }) }) })] }) })] }));
 };
 ColumnsSection.displayName = 'ColumnsSection';

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Radio from '../../../../../components/Radio/index';
-import { Tabs } from '../../../../../components/Tabs/index';
 import { ImportFileSection } from './UploadFileSection';
 import { ImportTextSection } from './UploadTextSection';
-import { Flex } from '../../../../../components/Flex';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { TypeRadio } from '../../../../Wizard/TypeRadio';
 export const UploadSection = (props) => {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file', children: "File" }), _jsx(Radio, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text', children: "Text" })] }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: props.importType === 'file' ? 'File Upload' : 'Text' }), _jsx(Tabs.Content, { children: props.importType === 'file' ? (_jsx(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (_jsx(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Import Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to import from a file or pasted text" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "File", description: "Upload a file in a supported format", checked: props.importType === 'file', onClick: () => props.onImportTypeChange('file') }), _jsx(TypeRadio, { text: "Text", description: "Paste CSV, JSON, or other supported text directly", checked: props.importType === 'text', onClick: () => props.onImportTypeChange('text') })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: props.importType === 'file' ? 'File Upload' : 'Paste Text' }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: props.importType === 'file'
+                                    ? 'Select or drag a file to load the data for import'
+                                    : 'Paste your data below — CSV or JSON is detected automatically' })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: props.importType === 'file' ? (_jsx(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (_jsx(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
 };

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import HelpBlock from '../../../../../components/HelpBlock/index';
 import Textarea from '../../../../../components/Textarea/index';
+import { Flex } from '../../../../../components/Flex';
 export const ImportTextSection = (props) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }), props.message && _jsx(HelpBlock, { children: props.message })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-[200px]", children: [_jsx(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:flex-1 twa:min-h-[200px]" }), props.message ? _jsx(HelpBlock, { className: "twa:mt-2", children: props.message }) : null] }));
 };

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
 import { DataPreview } from './DataPreview';
-import { Flex } from '../../../../components/Flex';
-const getRowErrors = (errors, primaryKeyValue) => {
-    if (!errors) {
-        return null;
-    }
-    if (!errors[primaryKeyValue]) {
-        return null;
-    }
-    return errors[primaryKeyValue];
-};
+import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const ValidationSection = (props) => {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Options" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Exclude Invalid Rows", children: _jsx(CheckBox, { onChange: () => {
-                                        props.onSkipInvalidRowsChange(!props.skipInvalidRows);
-                                    }, checked: props.skipInvalidRows }) }) }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: "Preview" }), _jsx(Tabs.Content, { children: _jsx(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Import Options" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how rows that fail validation should be handled" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { onChange: () => {
+                                props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                            }, checked: props.skipInvalidRows, children: "Exclude invalid rows from import" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Review imported data and fix any validation errors before importing" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
 };

package/src/View/Export/Wizard/ReportColumnsWizardSection.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const isValidReportColumnsScope = (report) => {
     if (report.ReportColumnScope === 'ScopeColumns') {
         return report.Scope != null ? true : 'Column scope is not defined';
@@ -18,28 +18,26 @@ export const renderReportColumnsSummary = (report) => {
                 }) })) : null] }));
 };
 export const ReportColumnsWizardSection = (props) => {
-    const { api, data } = useOnePageAdaptableWizardContext();
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Tabs, { className: "twa:m-2", value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
-                    const report = {
-                        ...data,
-                        ReportColumnScope,
-                    };
-                    if (report.ReportColumnScope !== 'ScopeColumns') {
-                        delete report.Scope;
-                    }
-                    else {
-                        if (!report.Scope) {
-                            report.Scope = {
-                                ColumnIds: [],
-                            };
-                        }
-                    }
-                    props.onChange(report);
-                }, children: [_jsx(Tabs.Tab, { value: "AllColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1, children: "All Columns" }) }), _jsx(Tabs.Tab, { value: "VisibleColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1, children: "Visible Columns" }) }), _jsx(Tabs.Tab, { value: "ScopeColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1, children: "Bespoke Columns" }) }), _jsx(Tabs.Content, { value: "AllColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "All Columns in the datasource will be included in the Report, whether visible or not at time of export" }) }), _jsx(Tabs.Content, { value: "VisibleColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only Columns that are visible at the time the Report is exported will be included" }) }), _jsx(Tabs.Content, { value: "BespokeColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only selected Columns (which you will choose in the next step) will be exported - whether visible or not" }) })] }), data.ReportColumnScope === 'ScopeColumns' ? (_jsx(Box, { className: "twa:p-2 twa:flex-1 twa:overflow-auto", children: _jsx(NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
-                        rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
-                        columnScope: 'Selected columns will be included in the report',
-                    }, scope: data.Scope, updateScope: (Scope) => {
-                        const report = { ...data, Scope };
-                        props.onChange(report);
-                    } }) })) : null] }));
+    const { data } = useOnePageAdaptableWizardContext();
+    const handleColumnScopeChange = (ReportColumnScope) => {
+        const report = {
+            ...data,
+            ReportColumnScope,
+        };
+        if (report.ReportColumnScope !== 'ScopeColumns') {
+            delete report.Scope;
+        }
+        else if (!report.Scope) {
+            report.Scope = {
+                ColumnIds: [],
+            };
+        }
+        props.onChange(report);
+    };
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which columns to include in the Report" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "All Columns", description: "All columns in the datasource will be included, whether visible or not at time of export", checked: data.ReportColumnScope === 'AllColumns', onClick: () => handleColumnScopeChange('AllColumns') }), _jsx(TypeRadio, { text: "Visible Columns", description: "Only columns that are visible at the time the Report is exported will be included", checked: data.ReportColumnScope === 'VisibleColumns', onClick: () => handleColumnScopeChange('VisibleColumns') }), _jsx(TypeRadio, { text: "Bespoke Columns", description: "Only selected columns will be exported \u2014 whether visible or not", checked: data.ReportColumnScope === 'ScopeColumns', onClick: () => handleColumnScopeChange('ScopeColumns') })] }) })] }) }), data.ReportColumnScope === 'ScopeColumns' ? (_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column Selection" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the columns to include in the Report" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
+                                rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
+                                columnScope: 'Selected columns will be included in the report',
+                            }, scope: data.Scope, updateScope: (Scope) => {
+                                props.onChange({ ...data, Scope });
+                            } }) })] })) : null] }));
 };

package/src/View/Export/Wizard/ReportNameWizardSection.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ErrorBox from '../../../components/ErrorBox';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Input from '../../../components/Input';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const renderReportNameSummary = (report) => {
     return (_jsxs(Box, { className: "twa:text-2", children: [' ', "Report Name: ", _jsx(Tag, { children: report.Name })] }));
 };
@@ -21,13 +20,11 @@ export const isValidReportName = (report, api) => {
     return hasAlreadyExistingName ? 'A Report already exists with that name' : true;
 };
 export const ReportNameWizardSection = (props) => {
-    const { api, data } = useOnePageAdaptableWizardContext();
-    const validCheck = isValidReportName(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    return (_jsx(Box, { children: _jsxs(FormLayout, { columns: [1, 2], children: [_jsxs(FormRow, { children: [_jsx(Box, { className: "twa:mr-2", children: "Name:" }), _jsx(Input, { "data-name": "export-name", className: "twa:w-full", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                                props.onChange({
-                                    ...data,
-                                    Name: e.target.value,
-                                });
-                            } })] }), _jsxs(FormRow, { children: [_jsx(_Fragment, {}), ErrorMessage ? _jsx(ErrorBox, { children: ErrorMessage }) : null] })] }) }));
+    const { data } = useOnePageAdaptableWizardContext();
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Report" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "export-name", className: "twa:max-w-[300px] twa:w-full", type: "text", autoFocus: true, placeholder: "Enter Name", value: data.Name, onChange: (e) => {
+                            props.onChange({
+                                ...data,
+                                Name: e.target.value,
+                            });
+                        } }) })] }) }));
 };

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo } from 'react';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
 import { ExpressionPreview } from '../../../components/ExpressionEditor/ExpressionPreview';
-import Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
@@ -14,34 +14,32 @@ export const isValidReportRowsQuery = (report) => {
     return true;
 };
 export const renderReportRowsSummary = (report) => {
-    const { api } = useOnePageAdaptableWizardContext();
     return (_jsxs(Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? (_jsxs(_Fragment, { children: ["Include Rows matching the query:", ' ', _jsx(Tag, { children: _jsx(ExpressionPreview, { query: report.Query }) })] })) : null] }));
 };
 export const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = useOnePageAdaptableWizardContext();
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    return (_jsx(_Fragment, { children: _jsxs(Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
-                const report = {
-                    ...data,
-                    ReportRowScope,
-                };
-                if (report.ReportRowScope !== 'ExpressionRows') {
-                    delete report.Query;
-                }
-                else {
-                    if (!report.Query) {
-                        report.Query = {
-                            BooleanExpression: '',
-                        };
-                    }
-                }
-                props.onChange(report);
-            }, children: [_jsx(Tabs.Tab, { value: "AllRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1, children: "All Rows" }) }), _jsx(Tabs.Tab, { value: "VisibleRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1, children: "Visible Rows" }) }), _jsx(Tabs.Tab, { value: "ExpressionRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1, children: "By Query" }) }), _jsx(Tabs.Content, { value: "AllRows", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "All Rows in the datasource will be included in the report, whether visible or not at time of export." }) }), _jsx(Tabs.Content, { value: "VisibleRows", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only Rows that are visible at the time the Report is exported will be included in the Export" }) }), _jsxs(Tabs.Content, { value: "ExpressionRows", children: [_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: "Only the Rows which match the Query will be exported - whether visible or not." }), _jsx(ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
+    const handleRowScopeChange = (ReportRowScope) => {
+        const report = {
+            ...data,
+            ReportRowScope,
+        };
+        if (report.ReportRowScope !== 'ExpressionRows') {
+            delete report.Query;
+        }
+        else if (!report.Query) {
+            report.Query = {
+                BooleanExpression: '',
+            };
+        }
+        props.onChange(report);
+    };
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows to include in the Report" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "All Rows", description: "All rows in the datasource will be included, whether visible or not at time of export", checked: data.ReportRowScope === 'AllRows', onClick: () => handleRowScopeChange('AllRows') }), _jsx(TypeRadio, { text: "Visible Rows", description: "Only rows that are visible at the time the Report is exported will be included", checked: data.ReportRowScope === 'VisibleRows', onClick: () => handleRowScopeChange('VisibleRows') }), _jsx(TypeRadio, { text: "By Query", description: "Only rows matching the query will be exported \u2014 whether visible or not", checked: data.ReportRowScope === 'ExpressionRows', onClick: () => handleRowScopeChange('ExpressionRows') })] }) })] }), data.ReportRowScope === 'ExpressionRows' ? (_jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Query" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a boolean expression to filter which rows are included" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                                 props.onChange({
                                     ...data,
                                     Query: {
                                         BooleanExpression,
                                     },
                                 });
-                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })] })] }) }));
+                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] })) : null] }));
 };

package/src/View/Export/Wizard/ScheduledReportSettings.d.ts

@@ -8,6 +8,8 @@ interface ScheduledReportSettingsProps {
     allDestinations: ExportDestinationType[];
     /** When set, the user picks which report this schedule exports (Export popup → New Schedule). */
     allReportNames?: ReportNameType[];
+    /** When set, the report is fixed (schedule created from a specific report). */
+    fixedReportName?: ReportNameType;
 }
 export declare const ScheduledReportSettings: React.FunctionComponent<ScheduledReportSettingsProps>;
 export {};