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

package/src/View/Wizard/AdaptableWizard.d.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { AdaptableWizardStep } from './Interface/IAdaptableWizard';
-import { AdaptableApi } from '../../types';
-import { CSSProperties } from 'react';
-import { ModuleInfo } from '../../Strategy/Interface/IModule';
-export interface IWizardStepInfo {
-    StepName: string;
-    Element: React.JSX.Element;
-    Index: number;
-}
-export declare const AdaptableWizardContext: React.Context<{
-    data: any;
-    updateGoBackState: () => void;
-    onRender: (ActiveStep: AdaptableWizardStep) => void;
-    api: AdaptableApi;
-}>;
-export declare const useWizardContext: () => {
-    data: any;
-    updateGoBackState: () => void;
-    onRender: (ActiveStep: AdaptableWizardStep) => void;
-    api: AdaptableApi;
-};
-export interface AdaptableWizardProps extends React.ClassAttributes<AdaptableWizard> {
-    steps: IWizardStepInfo[];
-    data: any;
-    closeText?: React.ReactNode;
-    closeTooltip?: string;
-    onHide: Function;
-    onFinish?: Function;
-    stepStartIndex?: number;
-    moduleInfo: ModuleInfo;
-    modalContainer: HTMLElement;
-    canFinishWizard: Function;
-    style?: CSSProperties;
-    showStepsLegend?: Boolean;
-    api: AdaptableApi;
-}
-export interface AdaptableWizardState extends React.ClassAttributes<AdaptableWizard> {
-    ActiveState: any;
-    IndexState: number;
-}
-export declare class AdaptableWizard extends React.Component<AdaptableWizardProps, AdaptableWizardState> {
-    private ActiveStep;
-    private stepName;
-    constructor(props: AdaptableWizardProps);
-    render(): React.JSX.Element;
-    private onStepButtonClicked;
-    ForceUpdateGoBackState(): void;
-    isLastStep(): boolean;
-    isFirstStep(): boolean;
-    canFinishWizard(): boolean;
-    handleClickBack(): void;
-    handleClickNext(): void;
-    handleClickFinish(): void;
-    private cloneWizardStep;
-}

package/src/View/Wizard/AdaptableWizard.js

@@ -1,168 +0,0 @@
-import * as React from 'react';
-import { WizardLegend } from './WizardLegend';
-import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
-import { Flex } from 'rebass';
-import Dialog from '../../components/Dialog';
-import SimpleButton from '../../components/SimpleButton';
-import Panel from '../../components/Panel';
-import kebabCase from 'lodash/kebabCase';
-export const AdaptableWizardContext = React.createContext({
-    data: null,
-    updateGoBackState: () => { },
-    onRender: (ActiveStep) => { },
-    api: null,
-});
-export const useWizardContext = () => {
-    return React.useContext(AdaptableWizardContext);
-};
-class DummyActiveStep {
-    canNext() {
-        return false;
-    }
-    canBack() {
-        return false;
-    }
-    next() {
-        // no implementation for this
-    }
-    back() {
-        // no implementation for this
-    }
-    getIndexStepIncrement() {
-        return 1;
-    }
-    getIndexStepDecrement() {
-        return 1;
-    }
-}
-//Remark : the component doesnt handle the change of props once displayed... It's easy to do but not sure it's needed
-//as in the top component we do the render with a ternary expression so we add/remove the element from the render instead of having a property
-//Show/hide.
-export class AdaptableWizard extends React.Component {
-    constructor(props) {
-        super(props);
-        //we need to init with a dummy one as Ref is a callback once the component is rendered. So once set we force Re render....
-        //I have no idea so far how to do it differently
-        this.ActiveStep = new DummyActiveStep();
-        let indexStart = 0;
-        if (this.props.stepStartIndex) {
-            indexStart = this.props.stepStartIndex;
-        }
-        let BodyElement = this.props.steps[indexStart].Element;
-        this.stepName = this.props.steps[indexStart].StepName;
-        let newElement = this.cloneWizardStep(BodyElement);
-        this.state = { ActiveState: newElement, IndexState: indexStart };
-    }
-    render() {
-        let wizardStepNames = ArrayExtensions.RetrieveDistinct(this.props.steps.map((x) => {
-            return x.StepName;
-        }));
-        const hasNext = this.props.steps.length > 1;
-        const hasBack = hasNext;
-        return (React.createElement(AdaptableWizardContext.Provider, { value: {
-                data: this.props.data,
-                updateGoBackState: () => this.ForceUpdateGoBackState(),
-                api: this.props.api,
-                onRender: (ActiveStep) => {
-                    this.ActiveStep = ActiveStep;
-                    this.forceUpdate();
-                },
-            } },
-            React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, onDismiss: () => (this.props.onHide ? this.props.onHide() : null) },
-                React.createElement(Flex, { flexDirection: "column", "data-name": this.props.moduleInfo.FriendlyName
-                        ? `${kebabCase(this.props.moduleInfo.FriendlyName)}-wizard`
-                        : '', style: {
-                        height: '100%',
-                        width: '70vw',
-                        maxWidth: 1000,
-                        maxHeight: '80vh',
-                        ...this.props.style,
-                    } },
-                    React.createElement(Panel, { header: this.props.moduleInfo.FriendlyName, border: "none", className: "ab-WizardDialog__steps", borderRadius: "none", variant: "primary", style: { flex: 'none' } }, this.props.showStepsLegend === false ? null : (React.createElement(WizardLegend, { StepNames: wizardStepNames, ActiveStepName: this.stepName, FriendlyName: '', CanShowAllSteps: this.canFinishWizard(), onStepButtonClicked: (s) => this.onStepButtonClicked(s) }))),
-                    React.createElement(Flex, { style: { flex: 1, overflow: 'auto' }, flexDirection: "column" }, this.state.ActiveState),
-                    React.createElement(Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center", className: "ab-WizardDialog__footer" },
-                        React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => this.props.onHide(), tooltip: this.props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, this.props.closeText ?? 'CLOSE'),
-                        React.createElement("div", { style: { flex: 1 } }),
-                        hasBack ? (React.createElement(SimpleButton, { "data-name": "back", variant: "outlined", disabled: !this.ActiveStep.canBack() || this.isFirstStep(), onClick: () => this.handleClickBack(), icon: "arrow-left", accessLevel: 'Full' }, "Back")) : null,
-                        hasNext ? (React.createElement(SimpleButton, { variant: "outlined", "data-name": "next", disabled: !this.ActiveStep.canNext() || this.isLastStep(), onClick: () => this.handleClickNext(), icon: "arrow-right", iconPosition: "end", accessLevel: 'Full', marginLeft: 2, marginRight: 2 }, "Next")) : null,
-                        React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: !this.canFinishWizard(), onClick: () => this.handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish"))))));
-    }
-    onStepButtonClicked(stepName) {
-        let wizardStepInfo = this.props.steps.find((s) => s.StepName == stepName);
-        let bodyElement = wizardStepInfo.Element;
-        let newElement = this.cloneWizardStep(bodyElement);
-        this.stepName = wizardStepInfo.StepName;
-        this.setState({
-            ActiveState: newElement,
-            IndexState: wizardStepInfo.Index,
-        });
-    }
-    ForceUpdateGoBackState() {
-        this.forceUpdate();
-    }
-    isLastStep() {
-        return this.state.IndexState == this.props.steps.length - 1;
-    }
-    isFirstStep() {
-        return this.state.IndexState == 0;
-    }
-    canFinishWizard() {
-        return this.ActiveStep.canNext() && this.props.canFinishWizard();
-    }
-    handleClickBack() {
-        if (!this.isFirstStep()) {
-            if (this.ActiveStep.canBack()) {
-                let decrement = this.ActiveStep.getIndexStepDecrement();
-                this.ActiveStep.back();
-                let activeWizardInfo = this.props.steps[this.state.IndexState - decrement];
-                let bodyElement = activeWizardInfo.Element;
-                let newElement = this.cloneWizardStep(bodyElement);
-                this.stepName = activeWizardInfo.StepName;
-                this.setState({
-                    ActiveState: newElement,
-                    IndexState: this.state.IndexState - decrement,
-                });
-            }
-        }
-    }
-    handleClickNext() {
-        if (this.ActiveStep.canNext()) {
-            let increment = this.ActiveStep.getIndexStepIncrement();
-            this.ActiveStep.next();
-            let activeWizardInfo = this.props.steps[this.state.IndexState + increment];
-            let bodyElement = activeWizardInfo.Element;
-            let newElement = this.cloneWizardStep(bodyElement);
-            this.stepName = activeWizardInfo.StepName;
-            this.setState({
-                ActiveState: newElement,
-                IndexState: this.state.IndexState + increment,
-            });
-        }
-    }
-    handleClickFinish() {
-        if (this.ActiveStep.canNext()) {
-            this.ActiveStep.next();
-            if (this.props.onFinish) {
-                this.props.onFinish();
-            }
-            this.props.onHide();
-        }
-    }
-    //So we inject everything needed for the Wizard
-    cloneWizardStep(step) {
-        return React.cloneElement(step, {
-            ref: (Element) => {
-                if (Element) {
-                    this.ActiveStep = Element;
-                    this.forceUpdate();
-                }
-                else {
-                    this.ActiveStep = null;
-                }
-            },
-            data: this.props.data,
-            updateGoBackState: () => this.ForceUpdateGoBackState(),
-            api: this.props.api,
-        });
-    }
-}

package/src/components/ContainerProps.d.ts

@@ -1,30 +0,0 @@
-export type ContainerScaleType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
-export type ContainerProps = Partial<{
-    margin: ContainerScaleType;
-    marginLeft: ContainerScaleType;
-    ml: ContainerScaleType;
-    marginRight: ContainerScaleType;
-    mr: ContainerScaleType;
-    marginTop: ContainerScaleType;
-    mt: ContainerScaleType;
-    marginBottom: ContainerScaleType;
-    mb: ContainerScaleType;
-    marginVertical: ContainerScaleType;
-    my: ContainerScaleType;
-    marginHorizontal: ContainerScaleType;
-    mx: ContainerScaleType;
-    padding: ContainerScaleType;
-    paddingLeft: ContainerScaleType;
-    pl: ContainerScaleType;
-    paddingRight: ContainerScaleType;
-    pr: ContainerScaleType;
-    paddingTop: ContainerScaleType;
-    pt: ContainerScaleType;
-    paddingBottom: ContainerScaleType;
-    pb: ContainerScaleType;
-    paddingVertical: ContainerScaleType;
-    py: ContainerScaleType;
-    paddingHorizontal: ContainerScaleType;
-    px: ContainerScaleType;
-    fontSize: ContainerScaleType;
-}>;

package/src/components/ContainerProps.js

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

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { FlexProps } from 'rebass';
-type EllipsisContainerProps = {
-    direction: 'horizontal' | 'vertical';
-    count: number;
-    allowWrap?: boolean;
-    renderItem: (index: number, count: number) => React.ReactElement;
-    renderEllipsis?: ({ remaining }: {
-        remaining: number;
-    }) => React.ReactElement;
-};
-export declare const EllipsisContainer: (props: EllipsisContainerProps & FlexProps) => React.JSX.Element;
-export {};

package/src/components/EllipsisContainer/index.js

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { useRef, useState } from 'react';
-import { Flex } from 'rebass';
-import { useLatest } from '../utils/useLatest';
-import usePrevious from '../utils/usePrevious';
-const Container = ({ children, index, hidden, observerRef, }) => {
-    const [mounted, setMounted] = useState(false);
-    React.useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            // we wait for a bit, so intersection observer
-            // has time to kick in before we trigger a rerender
-            // to make the element visible if needed
-            setMounted(true);
-        }, 50);
-        return () => clearTimeout(timeoutId);
-    }, []);
-    const domRef = useRef(null);
-    const onMount = (node) => {
-        if (node) {
-            if (!node.getAttribute('data-index')) {
-                throw 'The element you render from "renderItem" should accept a "data-index" prop.';
-            }
-            observerRef.current?.observe(node);
-        }
-        else {
-            observerRef.current?.unobserve(domRef.current);
-        }
-        domRef.current = node;
-    };
-    let child = React.Children.toArray(children)[0];
-    const cloneProps = {
-        ref: onMount,
-        'data-index': index,
-    };
-    if (hidden || !mounted) {
-        cloneProps.style = { ...child.props?.style, visibility: 'hidden' };
-    }
-    child = React.cloneElement(child, cloneProps);
-    return React.createElement(React.Fragment, null, child);
-};
-export const EllipsisContainer = (props) => {
-    const { allowWrap, count, direction, renderItem, renderEllipsis, ...boxProps } = props;
-    const domRef = useRef(null);
-    const observerRef = useRef(null);
-    const [minNotVisibleIndex, setMinNotVisibleIndex] = React.useState(props.count);
-    const [visibleSet] = useState(() => new Set());
-    const [invisibleSet] = useState(() => new Set());
-    const getCount = useLatest(props.count);
-    React.useEffect(() => {
-        const callback = (entries) => {
-            const count = getCount();
-            const isVisible = (entry) => entry.intersectionRatio === 1;
-            entries.forEach((entry) => {
-                const { target } = entry;
-                const index = Number(target.getAttribute('data-index'));
-                const visible = isVisible(entry);
-                if (visible) {
-                    visibleSet.add(index);
-                    invisibleSet.delete(index);
-                }
-                else {
-                    visibleSet.delete(index);
-                    invisibleSet.add(index);
-                }
-            });
-            const minNotVisibleIndex = Math.min(count, ...invisibleSet.values());
-            setMinNotVisibleIndex(minNotVisibleIndex);
-        };
-        if (allowWrap) {
-            return;
-        }
-        const observer = new IntersectionObserver(callback, {
-            root: domRef.current,
-            threshold: 0.01,
-        });
-        observerRef.current = observer;
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    const prevCount = usePrevious(count, count);
-    React.useLayoutEffect(() => {
-        if (allowWrap) {
-            return;
-        }
-        if (minNotVisibleIndex === prevCount) {
-            setMinNotVisibleIndex(count);
-        }
-    }, [count, minNotVisibleIndex, allowWrap]);
-    const children = [...new Array(count)].map((_, index) => {
-        const remaining = count - 1 - index;
-        const hidden = allowWrap ? false : index >= minNotVisibleIndex;
-        return (React.createElement(React.Fragment, { key: index },
-            React.createElement(Container, { hidden: hidden, index: index, observerRef: observerRef }, renderItem(index, count)),
-            !allowWrap && index === minNotVisibleIndex - 1 && remaining
-                ? renderEllipsis?.({ remaining }) ?? '...'
-                : null));
-    });
-    return (React.createElement(Flex, { ref: domRef, flexWrap: allowWrap ? 'wrap' : 'nowrap', alignItems: "center", "data-name": "options-container", ...boxProps, flexDirection: direction === 'horizontal' ? 'row' : 'column' }, children));
-};

package/src/components/List/GridList/index.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-export interface GridListProps {
-    children: ReactNode[];
-    className?: string;
-    rowHeight?: number | string;
-    showZebraRows?: boolean;
-}
-declare const GridList: (props: GridListProps) => React.JSX.Element;
-export default GridList;

package/src/components/List/GridList/index.js

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
-import join from '../../utils/join';
-const baseClassName = 'ab-GridList';
-const columnsMap = {
-    item: { field: 'item', header: null, defaultFlex: 1 },
-};
-const GridList = (props) => {
-    const data = React.Children.map(props.children, (c, index) => {
-        return {
-            item: c,
-            id: index,
-        };
-    }).filter((data) => !!data.item);
-    return (React.createElement(DataSource, { data: data, primaryKey: "id" },
-        React.createElement(InfiniteTableGrid, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
-                className: join(baseClassName, props.className),
-                style: {
-                    minHeight: '15rem',
-                },
-            }, columns: columnsMap })));
-};
-export default GridList;

package/src/components/List/ListGroup/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { BoxProps } from 'rebass';
-export interface ListGroupProps extends BoxProps {
-}
-declare const ListGroup: (props: ListGroupProps) => React.JSX.Element;
-export default ListGroup;

package/src/components/List/ListGroup/index.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import join from '../../utils/join';
-import { Box } from 'rebass';
-const baseClassName = 'ab-ListGroup';
-const ListGroup = (props) => {
-    const { className, ...domProps } = props;
-    return React.createElement(Box, { ...domProps, className: join(className, baseClassName) });
-};
-export default ListGroup;

package/src/components/List/ListGroupItem/index.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { HTMLProps } from 'react';
-type TypeProps = HTMLProps<HTMLElement> & {
-    factory?: string | React.ComponentType<any>;
-    active?: boolean;
-    noZebra?: boolean;
-    index?: number;
-    selectionId?: string | number;
-};
-declare const ListGroupItem: React.ForwardRefExoticComponent<Omit<TypeProps, "ref"> & React.RefAttributes<unknown>>;
-export default ListGroupItem;

package/src/components/List/ListGroupItem/index.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import join from '../../utils/join';
-import { useSelectionEvent } from '../../SelectableList';
-const baseClassName = 'ab-ListGroupItem';
-const ListGroupItem = React.forwardRef((props, ref) => {
-    const { className, active, factory: Tag = 'button', noZebra, ...domProps } = props;
-    const onSelectionClick = useSelectionEvent();
-    const result = (React.createElement(Tag, { ...domProps, onClick: (event) => {
-            if (domProps.onClick) {
-                domProps.onClick(event);
-            }
-            onSelectionClick(event, { index: props.index });
-        }, ref: ref, className: join(className, baseClassName, noZebra ? `${baseClassName}--no-zebra` : null, `${baseClassName}--${active ? 'active' : 'not-active'}`) }));
-    return result;
-});
-export default ListGroupItem;

package/src/components/utils/useTheme.d.ts

@@ -1,32 +0,0 @@
-declare const _default: () => {
-    breakpoints: string[];
-    fontSizes: string[];
-    colors: {
-        accent: string;
-        blue: string;
-        warn: string;
-        info: string;
-        error: string;
-        errorlight: string;
-        defaultbackground: string;
-        primary: string;
-        primarydark: string;
-        primarylight: string;
-        'text-on-primary': string;
-        secondary: string;
-        secondarydark: string;
-        secondarylight: string;
-        'text-on-secondary': string;
-        'text-on-secondarylight': string;
-    };
-    space: string[];
-    fonts: {
-        sans: string;
-        mono: string;
-    };
-    fontWeights: {
-        normal: string;
-        bold: string;
-    };
-};
-export default _default;

package/src/components/utils/useTheme.js

@@ -1,2 +0,0 @@
-import theme from '../../theme';
-export default () => theme;

package/src/theme.d.ts

@@ -1,32 +0,0 @@
-declare const _default: {
-    breakpoints: string[];
-    fontSizes: string[];
-    colors: {
-        accent: string;
-        blue: string;
-        warn: string;
-        info: string;
-        error: string;
-        errorlight: string;
-        defaultbackground: string;
-        primary: string;
-        primarydark: string;
-        primarylight: string;
-        'text-on-primary': string;
-        secondary: string;
-        secondarydark: string;
-        secondarylight: string;
-        'text-on-secondary': string;
-        'text-on-secondarylight': string;
-    };
-    space: string[];
-    fonts: {
-        sans: string;
-        mono: string;
-    };
-    fontWeights: {
-        normal: string;
-        bold: string;
-    };
-};
-export default _default;

package/src/theme.js

@@ -1,49 +0,0 @@
-export default {
-    breakpoints: ['40em', '52em', '64em'],
-    fontSizes: [
-        'var(--ab-font-size-0)',
-        'var(--ab-font-size-1)',
-        'var(--ab-font-size-2)',
-        'var(--ab-font-size-3)',
-        'var(--ab-font-size-4)',
-        'var(--ab-font-size-5)',
-        'var(--ab-font-size-6)',
-        'var(--ab-font-size-7)',
-    ],
-    colors: {
-        accent: 'var(--ab-color-accent)',
-        blue: 'var(--ab-color-blue)',
-        warn: 'var(--ab-color-warn)',
-        info: 'var(--ab-color-info)',
-        error: 'var(--ab-color-error)',
-        errorlight: 'var(--ab-color-errorlight)',
-        defaultbackground: 'var(--ab-color-defaultbackground)',
-        primary: 'var(--ab-color-primary)',
-        primarydark: 'var(--ab-color-primarydark)',
-        primarylight: 'var(--ab-color-primarylight)',
-        'text-on-primary': 'var(--ab-color-text-on-primary)',
-        secondary: 'var(--ab-color-secondary)',
-        secondarydark: 'var(--ab-color-secondarydark)',
-        secondarylight: 'var(--ab-color-secondarylight)',
-        'text-on-secondary': 'var(--ab-color-text-on-secondary)',
-        'text-on-secondarylight': 'var(--ab-color-text-on-secondarylight)',
-    },
-    space: [
-        'var(--ab-space-0)',
-        'var(--ab-space-1)',
-        'var(--ab-space-2)',
-        'var(--ab-space-3)',
-        'var(--ab-space-4)',
-        'var(--ab-space-5)',
-        'var(--ab-space-6)',
-        'var(--ab-space-7)',
-    ],
-    fonts: {
-        sans: 'system-ui, sans-serif',
-        mono: 'Menlo, monospace',
-    },
-    fontWeights: {
-        normal: 'normal',
-        bold: '700',
-    },
-};

package/themes/dark.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/adaptable/src/themes/dark.scss","dark.css"],"names":[],"mappings":"AAAA;EACE,yCAAA;EACA,uBAAA;EAEA,6CAAA;EAEA,qCAAA;EACA,6CAAA;EAEA,2BAAA;EACA,gCAAA;EACA,+BAAA;EACA,mCAAA;EAQA,4BAAA;EACA,8DAAA;EAEA,wEAAA;EAEA,gEAAA;EACA,gEAAA;ACXF;ADaE;;EAEE,yTAAA;ACXJ","file":"dark.css"}

package/themes/light.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/adaptable/src/themes/light.scss","light.css"],"names":[],"mappings":"AAAA;EACE,wBAAA;ACCF","file":"light.css"}