@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
-export interface DataChangeHistoryData {
-    primaryKey: string;
-    changeKey: string;
-    changeTriggerLabel: string;
-    changedColumnLabel: string;
-    changeInfo: CellDataChangedInfo;
-}
-export interface DataChangeHistoryGridProps {
-    adaptableContainerId: string;
-    agGridContainerId: string;
-    changeHistoryLog: Record<string, CellDataChangedInfo>;
-    onUndoChange: (changeKey: string) => void;
-    onClearRow: (changeKey: string) => void;
-}
-export declare const DataChangeHistoryGrid: (props: DataChangeHistoryGridProps) => React.JSX.Element;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -1,290 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { useAdaptable } from '../AdaptableContext';
-import usePrevious from '../../components/utils/usePrevious';
-import { ACCESS_LEVEL_HIDDEN } from '../../Utilities/Constants/GeneralConstants';
-import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import { buildActionColumnButton } from './buildActionColumnButton';
-import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
-export const DataChangeHistoryGrid = (props) => {
-    const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange, onClearRow } = props;
-    const mainAdaptableInstance = useAdaptable();
-    const [_adaptableApi, setAdaptableApi] = useState(null);
-    const adaptableApiRef = useRef(null);
-    adaptableApiRef.current = _adaptableApi;
-    const undoChangeEnabled = mainAdaptableInstance.api.entitlementApi.isModuleFullEntitlement(DataChangeHistoryModuleId);
-    const previousChangeHistoryLog = usePrevious(changeHistoryLog, changeHistoryLog);
-    // initialize Adaptable grid
-    useEffect(() => {
-        const initializeAdaptableGrid = async () => {
-            const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
-            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
-            const modules = mainAdaptableInstance.agGridModulesAdapter.getAgGridRegisteredModules();
-            const dataChangeHistoryAdaptableApi = await AdaptableAgGrid._initInternal({
-                variant: 'vanilla',
-                adaptableOptions,
-                gridOptions,
-                modules,
-            });
-            setAdaptableApi(dataChangeHistoryAdaptableApi);
-        };
-        initializeAdaptableGrid();
-        return () => {
-            requestAnimationFrame(() => {
-                adaptableApiRef.current?.internalApi
-                    .getAdaptableInstance()
-                    .destroy({ unmount: true, destroyAgGrid: true });
-            });
-        };
-    }, []);
-    // update row data
-    useEffect(() => {
-        const adaptableApi = adaptableApiRef.current;
-        if (!adaptableApi) {
-            // initial render
-            return;
-        }
-        const addedChangeKeys = Object.keys(changeHistoryLog).filter((newChangeKey) => {
-            const previousChangeWithSameKey = previousChangeHistoryLog[newChangeKey];
-            if (!previousChangeWithSameKey) {
-                return true;
-            }
-            const addedChange = changeHistoryLog[newChangeKey];
-            return addedChange.changedAt !== previousChangeWithSameKey.changedAt;
-        });
-        const removedChangeKeys = Object.keys(previousChangeHistoryLog).filter((previousChangeKey) => {
-            const newChangeWithSameKey = changeHistoryLog[previousChangeKey];
-            if (!newChangeWithSameKey) {
-                return true;
-            }
-            const previousChange = previousChangeHistoryLog[previousChangeKey];
-            return previousChange.changedAt !== newChangeWithSameKey.changedAt;
-        });
-        const addedChangeHistoryLogs = filterChangeHistoryLog(changeHistoryLog, addedChangeKeys);
-        const removedChangeHistoryLogs = filterChangeHistoryLog(previousChangeHistoryLog, removedChangeKeys);
-        // here we access directly the AG Grid API, but this is OK because:
-        // 1. this method (gridAPi.applyTransaction() is NOT accessible otherwise and making it public opens other cans of worms
-        // 2. this UI will be reimplemented with Infinite Table anyway
-        const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
-        const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.agGridApi.applyTransactionAsync({
-            add: addedRows,
-            remove: removedRows,
-        });
-    }, [changeHistoryLog]);
-    return _jsx(_Fragment, {});
-};
-const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {
-    const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
-    const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
-    const undoRowNode = (rowNode) => {
-        const rowData = rowNode?.data;
-        const changeKey = rowData?.['changeKey'];
-        changeKey && onUndoChange(changeKey);
-    };
-    const clearRow = (rowNode) => {
-        const rowData = rowNode?.data;
-        const changeKey = rowData?.['changeKey'];
-        changeKey && onClearRow(changeKey);
-    };
-    const actionColumnButton = buildActionColumnButton(mainAdaptableInstance.adaptableOptions?.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode, clearRow);
-    let actionColumnOptions = undefined;
-    if (actionColumnButton) {
-        actionColumnOptions = {
-            actionColumns: [
-                {
-                    columnId: 'undoActionColumn',
-                    friendlyName: ' ',
-                    rowScope: {
-                        ExcludeGroupRows: true,
-                        ExcludeSummaryRows: true,
-                        ExcludeTotalRows: true,
-                    },
-                    actionColumnSettings: { suppressMenu: true, suppressMovable: true },
-                    actionColumnButton,
-                },
-            ],
-        };
-    }
-    const options = {
-        primaryKey: 'primaryKey',
-        licenseKey: mainAdaptableOptions.licenseKey,
-        userName: `${mainAdaptableOptions.userName}`,
-        adaptableId: `${mainAdaptableOptions.adaptableId}::DataChangeHistory`,
-        containerOptions: {
-            adaptableContainer: adaptableContainerId,
-            agGridContainer: agGridContainerId,
-        },
-        entitlementOptions: {
-            defaultAccessLevel: ACCESS_LEVEL_HIDDEN,
-        },
-        actionColumnOptions: actionColumnOptions,
-        initialState: {
-            Layout: {
-                Revision: Date.now(),
-                CurrentLayout: 'DataChangeHistoryLayout',
-                Layouts: [
-                    {
-                        Name: 'DataChangeHistoryLayout',
-                        TableColumns: [
-                            'changeInfo.primaryKeyValue',
-                            'changedColumnLabel',
-                            'changeInfo.oldValue',
-                            'changeInfo.newValue',
-                            'changeInfo.changedAt',
-                            'changeTriggerLabel',
-                            'undoActionColumn',
-                        ],
-                        ColumnSorts: [
-                            {
-                                ColumnId: 'changeInfo.changedAt',
-                                SortOrder: 'Desc',
-                            },
-                        ],
-                        ColumnSizing: {
-                            'changeInfo.primaryKeyValue': { Flex: 3 },
-                            changedColumnLabel: { Flex: 3 },
-                            'changeInfo.oldValue': { Flex: 3 },
-                            'changeInfo.newValue': { Flex: 3 },
-                            'changeInfo.changedAt': { Flex: 3 },
-                            changeTriggerLabel: { Flex: 2 },
-                            undoActionColumn: { Width: 110 },
-                        },
-                        ColumnPinning: {
-                            undoActionColumn: 'right',
-                        },
-                        AutoSizeColumns: true,
-                    },
-                ],
-            },
-            FormatColumn: {
-                Revision: Date.now(),
-                FormatColumns: [
-                    {
-                        Name: 'Changed At',
-                        Scope: {
-                            ColumnIds: ['changeInfo.changedAt'],
-                        },
-                        DisplayFormat: {
-                            Formatter: 'DateFormatter',
-                            Options: {
-                                Pattern: `${mainAdaptableOptions.userInterfaceOptions?.dateInputOptions?.dateFormat} HH:mm:ss`,
-                            },
-                        },
-                    },
-                ],
-            },
-            Theme: {
-                Revision: Date.now(),
-                CurrentTheme: mainAdaptableTheme,
-            },
-        },
-    };
-    if (!undoChangeEnabled) {
-        const layoutColumns = options.initialState.Layout.Layouts[0].TableColumns;
-        if (layoutColumns.includes('undoActionColumn')) {
-            // remove action column from layout
-            options.initialState.Layout.Layouts[0].TableColumns = layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
-        }
-    }
-    return options;
-};
-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-primary-foreground);">No Data Changes</div>',
-        defaultColDef: {
-            floatingFilter: true,
-            filter: true,
-            sortable: true,
-            resizable: true,
-            enableRowGroup: true,
-            editable: false,
-            enablePivot: false,
-            enableValue: false,
-            lockPinned: true,
-            // default set to true to pass this to the action column
-            suppressAutoSize: true,
-            menuTabs: ['generalMenuTab', 'filterMenuTab'],
-        },
-        autoGroupColumnDef: {
-            sortable: true,
-        },
-        columnDefs: [
-            {
-                field: 'primaryKey',
-                cellDataType: 'text',
-                hide: true,
-            },
-            {
-                headerName: `Row (${mainPrimaryKeyColumnHeader})`,
-                field: 'changeInfo.primaryKeyValue',
-                cellDataType: 'text',
-            },
-            {
-                headerName: 'Column',
-                field: 'changedColumnLabel',
-                cellDataType: 'text',
-            },
-            {
-                headerName: 'Previous',
-                field: 'changeInfo.oldValue',
-                cellDataType: 'text',
-            },
-            {
-                headerName: 'New',
-                field: 'changeInfo.newValue',
-                cellDataType: 'text',
-            },
-            {
-                headerName: 'Changed',
-                field: 'changeInfo.changedAt',
-                cellDataType: 'date',
-            },
-            {
-                headerName: 'Source',
-                field: 'changeTriggerLabel',
-                cellDataType: 'text',
-            },
-        ],
-        rowData: mapChangeHistoryRowData(changeHistoryLog, mainAdaptableInstance),
-        cellSelection: true,
-        suppressColumnVirtualisation: false,
-        sideBar: false,
-        rowSelection: {
-            mode: 'multiRow',
-        },
-        skipHeaderOnAutoSize: true,
-    };
-    return options;
-};
-const mapChangeHistoryRowData = (changeHistoryLog = {}, mainAdaptableInstance) => {
-    return Object.entries(changeHistoryLog).map(([changeKey, changeInfo]) => {
-        return {
-            primaryKey: `${changeKey}::${changeInfo.changedAt}`,
-            changeKey,
-            changeTriggerLabel: getChangeTriggerLabel(changeInfo),
-            changedColumnLabel: getColumnHeaderLabel(changeInfo.column.columnId, mainAdaptableInstance),
-            changeInfo,
-        };
-    });
-};
-// memoize headers to avoid unnecessary main grid lookups
-const headerMap = new Map();
-const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
-    if (!headerMap.has(columnId)) {
-        headerMap.set(columnId, mainAdaptableInstance.api.columnApi.getColumnWithColumnId(columnId)?.friendlyName ?? columnId);
-    }
-    return headerMap.get(columnId);
-};
-const getChangeTriggerLabel = (changeInfo) => {
-    return changeInfo.trigger === 'tick' ? 'Ticking' : 'User Edit';
-};
-const filterChangeHistoryLog = (changeObject, filterValues) => {
-    const result = {};
-    filterValues.forEach((allowedKey) => {
-        result[allowedKey] = changeObject[allowedKey];
-    });
-    return result;
-};

package/src/components/DropdownButton/DropdownButtonItem.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-type DropdownButtonItem = {
-    onClick?: (e: React.SyntheticEvent, item: DropdownButtonItem) => any;
-    onChange?: (e: React.SyntheticEvent, item: DropdownButtonItem) => any;
-    disabled?: boolean;
-    clickable?: boolean;
-    label?: ReactNode;
-    icon?: ReactNode;
-    separator?: boolean;
-    [key: string]: any;
-};
-export default DropdownButtonItem;

package/src/components/DropdownButton/DropdownButtonItem.js

@@ -1 +0,0 @@
-export {};

package/src/components/DropdownButton/renderItem.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import DropdownButtonItem from './DropdownButtonItem';
-type Params = {
-    item: DropdownButtonItem;
-    index: number;
-    columns: string[];
-    style: React.CSSProperties;
-    className: string;
-    idProperty?: string;
-    onItemClick?: (...args: any[]) => void;
-    domProps?: any;
-};
-declare const _default: ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }: Params) => React.JSX.Element;
-export default _default;

package/src/components/DropdownButton/renderItem.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import isPlainObject from '../../Utilities/utils/isPlainObject';
-export default ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
-    const key = item[idProperty] || index;
-    if (!isPlainObject(item)) {
-        return (_jsx("tr", { onClick: onItemClick, className: className, ...domProps, children: _jsx("td", { colSpan: columns.length, style: style, children: item }) }, key));
-    }
-    return (_jsx("tr", { onClick: onItemClick, className: className, ...domProps, children: columns.map((col) => {
-            return (_jsx("td", { style: style, children: item[col] }, col));
-        }) }, key));
-};

package/src/components/DropdownButton/useExpanded.d.ts

@@ -1,24 +0,0 @@
-import { RefObject } from 'react';
-import { ConstrainToType } from '../OverlayTrigger';
-export interface PositionInfo {
-    verticalPosition: 'top' | 'bottom';
-    horizontalPosition: 'left' | 'right';
-    maxHeight: number | string;
-    maxWidth: number | string;
-}
-export type ExpandedProps = {
-    expanded?: boolean;
-    constrainTo?: ConstrainToType;
-    defaultExpanded?: boolean;
-    onExpand?: () => void;
-    onCollapse?: () => void;
-    onExpandedChange?: (expanded: boolean) => void;
-    onToggle?: (expanded: boolean) => void;
-};
-declare const _default: (props: ExpandedProps, positionerRef: RefObject<HTMLDivElement>) => {
-    expanded: boolean;
-    setExpanded: (newExpanded: boolean) => void;
-    toggle: () => void;
-    positionInfo: PositionInfo;
-};
-export default _default;

package/src/components/DropdownButton/useExpanded.js

@@ -1,56 +0,0 @@
-import { useRef } from 'react';
-import useProperty from '../utils/useProperty';
-import getAvailableSizeInfo from '../utils/getAvailableSizeInfo';
-import { getConstrainRect } from '../OverlayTrigger';
-export default (props, positionerRef) => {
-    const positionInfoRef = useRef({
-        maxHeight: '50vh',
-        maxWidth: '50vw',
-        verticalPosition: 'bottom',
-        horizontalPosition: 'right',
-    });
-    const updatePosition = () => {
-        const positionRect = positionerRef.current.getBoundingClientRect();
-        positionInfoRef.current = getAvailableSizeInfo({
-            constrainRect: getConstrainRect(positionerRef.current, props.constrainTo),
-            targetRect: positionRect,
-            maxSizeOffset: 30,
-        });
-    };
-    const [expanded, doSetExpanded] = useProperty(props, 'expanded', false, {
-        onChange: (expanded) => {
-            if (expanded) {
-                if (props.onExpand) {
-                    props.onExpand();
-                }
-            }
-            else if (props.onCollapse) {
-                props.onCollapse();
-            }
-            if (props.onToggle) {
-                props.onToggle(expanded);
-            }
-            if (props.onExpandedChange) {
-                props.onExpandedChange(expanded);
-            }
-        },
-    });
-    const setExpanded = (newExpanded) => {
-        // if (!newExpanded) {
-        //   return;
-        // }
-        if (!expanded && newExpanded) {
-            updatePosition();
-        }
-        doSetExpanded(newExpanded);
-    };
-    const toggle = () => {
-        setExpanded(!expanded);
-    };
-    return {
-        expanded,
-        setExpanded,
-        toggle,
-        positionInfo: positionInfoRef.current,
-    };
-};

package/src/components/NewDropdownButton/index.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
-import { SimpleButtonProps } from '../SimpleButton';
-export type NewDropdownButtonItem = {
-    label: React.ReactNode;
-    onClick?: (e?: React.SyntheticEvent) => void;
-    disabled?: boolean;
-    dataName?: string;
-    separator?: boolean;
-    icon?: React.ReactNode;
-};
-export type NewDropdownButtonProps = {
-    items: NewDropdownButtonItem[];
-    children?: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    variant?: SimpleButtonProps['variant'];
-    size?: SimpleButtonProps['size'];
-    accessLevel?: AccessLevel;
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    align?: 'start' | 'center' | 'end';
-    'data-name'?: string;
-    tone?: SimpleButtonProps['tone'];
-    showDivider?: boolean;
-};
-export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/NewDropdownButton/index.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
-import { NewTooltip } from '../NewTooltip';
-import { cn } from '../../lib/utils';
-import { ChevronDownIcon } from 'lucide-react';
-import SimpleButton from '../SimpleButton';
-export const NewDropdownButton = React.forwardRef((props, ref) => {
-    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, } = props;
-    const isHidden = accessLevel === 'Hidden';
-    const isReadOnly = accessLevel === 'ReadOnly';
-    const isDisabled = disabled || isHidden || isReadOnly;
-    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName }), children: [children, showDivider && (_jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
-    const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
-    return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
-                    // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,
-                    width: `max(${maxLabelLength + 3}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
-                }, children: items.map((item, index) => {
-                    if (item.separator) {
-                        return _jsx(DropdownMenuSeparator, {}, index);
-                    }
-                    return (_jsxs(DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
-                }) })] }));
-});