schummar-table 0.3.2 → 0.5.0-beta-1

package/dist/esm/components/columnSelection.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, FormControlLabel, IconButton, makeStyles, Popover } from '@material-ui/core';
-import { Settings } from '@material-ui/icons';
-import { useState } from 'react';
-import { useTableContext } from '../table';
-const useClasses = makeStyles((theme) => ({
-    list: {
-        padding: theme.spacing(2),
-        display: 'grid',
-    },
-}));
-export function ColumnSelection() {
-    const classes = useClasses();
-    const [anchor, setAnchor] = useState(null);
-    const state = useTableContext();
-    const columns = state.useState('props.columns');
-    const hiddenColumns = state.useState('hiddenColumns');
-    const toggle = (column) => {
-        const { props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange }, } = state.getState();
-        const newValue = new Set(hiddenColumns);
-        if (hiddenColumns.has(column.id))
-            newValue.delete(column.id);
-        else
-            newValue.add(column.id);
-        if (!controlledHiddenColumns) {
-            state.update((state) => {
-                state.hiddenColumns = newValue;
-            });
-        }
-        onHiddenColumnsChange === null || onHiddenColumnsChange === void 0 ? void 0 : onHiddenColumnsChange(newValue);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(Settings, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: _jsx("div", Object.assign({ className: classes.list }, { children: columns.map((column) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !hiddenColumns.has(column.id), onChange: () => toggle(column), disabled: column.cannotHide }, void 0), label: column.header }, column.id))) }), void 0) }), void 0)] }, void 0));
-}

package/dist/esm/components/defaultFilterComponent.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import { Filter } from './filterComponent';
-export declare class DefaultFilter<T, O> implements Filter<T> {
-    readonly values: Set<O>;
-    readonly filter: (item: T) => boolean;
-    constructor(values: Set<O>, filter: (item: T) => boolean);
-}
-declare type UnwrapArray<O> = O extends Array<infer S> ? S : O;
-export declare function DefaultFilterComponent<V>(props: {
-    options?: UnwrapArray<V>[];
-    compare?: (a: UnwrapArray<V>, b: UnwrapArray<V>) => boolean;
-    stringValue?: (value: UnwrapArray<V>) => string;
-    render?: (value: UnwrapArray<V>) => ReactNode;
-}): JSX.Element;
-export declare function DefaultFilterComponent<T, V, O>(props: {
-    filterBy?: (value: V, item: T) => O | O[];
-    options?: O[];
-    compare?: (a: O, b: O) => boolean;
-    stringValue?: (value: O) => string;
-    render?: (value: O) => ReactNode;
-}): JSX.Element;
-export {};

package/dist/esm/components/defaultFilterComponent.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Checkbox, FormControlLabel, IconButton, makeStyles, TextField } from '@material-ui/core';
-import { Clear, Search } from '@material-ui/icons';
-import { useCallback, useState } from 'react';
-import { asString, defaultEquals, flatMap, orderBy, uniq } from '../misc/helpers';
-import { useColumnContext, useTableContext } from '../table';
-export class DefaultFilter {
-    constructor(values, filter) {
-        this.values = values;
-        this.filter = filter;
-    }
-}
-const useClasses = makeStyles((theme) => ({
-    view: {
-        padding: theme.spacing(2),
-        display: 'grid',
-        '& > :first-child': {
-            marginBottom: theme.spacing(2),
-        },
-    },
-}));
-export function DefaultFilterComponent({ filterBy: _filterBy, options: _options, compare = defaultEquals, stringValue = asString, render = stringValue, }) {
-    var _a;
-    const classes = useClasses();
-    const state = useTableContext();
-    const columnId = useColumnContext();
-    const filterBy = useCallback((value, item) => {
-        const values = _filterBy ? _filterBy(value, item) : value;
-        return values instanceof Array ? values : [values];
-    }, [_filterBy]);
-    const { text, options, filter } = state.useState((state) => {
-        const column = state.activeColumns.find((column) => column.id === columnId);
-        const _filter = state.filters.get(columnId);
-        const filter = _filter instanceof DefaultFilter ? _filter : undefined;
-        let options = _options !== null && _options !== void 0 ? _options : orderBy(uniq(flatMap(state.items, (item) => (column ? filterBy(column.value(item), item) : []))));
-        if (filter)
-            options = options.concat([...filter.values].filter((value) => !options.includes(value)));
-        return { text: state.props.text, options, filter };
-    }, [_options, columnId, filterBy]);
-    const [input, setInput] = useState('');
-    const filtered = options.filter((option) => !input || stringValue(option).toLowerCase().includes(input.toLowerCase()));
-    function toggle(value) {
-        var _a;
-        const column = state.getState().activeColumns.find((column) => column.id === columnId);
-        if (!column)
-            return;
-        const newValues = new Set(filter === null || filter === void 0 ? void 0 : filter.values);
-        if (newValues === null || newValues === void 0 ? void 0 : newValues.has(value))
-            newValues.delete(value);
-        else
-            newValues === null || newValues === void 0 ? void 0 : newValues.add(value);
-        const newFilter = newValues.size === 0
-            ? undefined
-            : new DefaultFilter(newValues, (item) => {
-                const itemValues = filterBy(column.value(item), item);
-                return [...newValues].some((value) => itemValues.some((itemValue) => compare(value, itemValue)));
-            });
-        if (!column.filter) {
-            state.update((state) => {
-                if (newFilter)
-                    state.filters.set(column.id, newFilter);
-                else
-                    state.filters.delete(column.id);
-            });
-        }
-        (_a = column.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(column, newFilter);
-    }
-    function deselectAll() {
-        var _a;
-        const column = state.getState().activeColumns.find((column) => column.id === columnId);
-        if (!column)
-            return;
-        if (!column.filter) {
-            state.update((state) => {
-                state.filters.delete(column.id);
-            });
-        }
-        (_a = column.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(column);
-    }
-    return (_jsxs("div", Object.assign({ className: classes.view }, { children: [_jsx(TextField, { value: input, onChange: (e) => setInput(e.target.value), InputProps: {
-                    endAdornment: input ? (_jsx(IconButton, Object.assign({ onClick: () => setInput('') }, { children: _jsx(Clear, {}, void 0) }), void 0)) : (_jsx(Search, {}, void 0)),
-                } }, void 0), _jsx(Button, Object.assign({ variant: "outlined", onClick: deselectAll, disabled: !filter }, { children: (_a = text === null || text === void 0 ? void 0 : text.deselectAll) !== null && _a !== void 0 ? _a : 'Deselect all' }), void 0), filtered.map((value, index) => {
-                var _a;
-                return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: (_a = filter === null || filter === void 0 ? void 0 : filter.values.has(value)) !== null && _a !== void 0 ? _a : false, onChange: () => toggle(value) }, void 0), label: render(value) }, index));
-            })] }), void 0));
-}

package/dist/esm/components/expandComponent.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { Id } from '../types';
-export declare function ExpandComponent<T>({ itemId }: {
-    itemId: Id;
-}): JSX.Element;

package/dist/esm/components/expandComponent.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { IconButton } from '@material-ui/core';
-import { ChevronRight } from '@material-ui/icons';
-import { getAncestors } from '../misc/helpers';
-import { useTableContext } from '../table';
-export function ExpandComponent({ itemId }) {
-    const state = useTableContext();
-    const isExpanded = state.useState((state) => state.expanded.has(itemId), [itemId]);
-    function toggle() {
-        const { props: { expanded: controlledExpanded, expandOnlyOne, onExpandedChange }, expanded, activeItemsById, } = state.getState();
-        const newExpanded = new Set(expanded);
-        if (expandOnlyOne)
-            newExpanded.clear();
-        if (isExpanded)
-            newExpanded.delete(itemId);
-        else {
-            newExpanded.add(itemId);
-            const item = activeItemsById.get(itemId);
-            for (const ancestor of item ? getAncestors(activeItemsById, item) : []) {
-                newExpanded.add(ancestor);
-            }
-        }
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newExpanded);
-        if (!controlledExpanded) {
-            state.update((state) => {
-                state.expanded = newExpanded;
-            });
-        }
-    }
-    return (_jsx(IconButton, Object.assign({ size: "small", onClick: toggle }, { children: _jsx(ChevronRight, { style: {
-                transition: 'all 500ms',
-                transform: isExpanded ? 'rotate3d(0, 0, 1, 90deg)' : 'none',
-            } }, void 0) }), void 0));
-}

package/dist/esm/components/export.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Export<T>(): JSX.Element;

package/dist/esm/components/export.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, IconButton, makeStyles, Popover, Typography } from '@material-ui/core';
-import { AssignmentReturn, CloudDownload } from '@material-ui/icons';
-import { useState } from 'react';
-import { csvExport } from '../misc/csvExport';
-import { useTableContext } from '../table';
-const useClasses = makeStyles((theme) => ({
-    dialog: {
-        padding: theme.spacing(2),
-        display: 'grid',
-        justifyItems: 'stretch',
-        '& > *': {
-            justifyContent: 'start',
-        },
-    },
-}));
-export function Export() {
-    const classes = useClasses();
-    const [anchor, setAnchor] = useState(null);
-    const state = useTableContext();
-    const textTitle = state.useState('props.text.exportTitle');
-    const textCopy = state.useState('props.text.exportCopy');
-    const textDownload = state.useState('props.text.exportDownload');
-    const generate = (options) => {
-        const { activeColumns, activeItems } = state.getState();
-        const data = [
-            activeColumns.map((column) => String(column.id)),
-            ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item))),
-        ];
-        return csvExport(data, options);
-    };
-    const copy = () => {
-        navigator.clipboard.writeText(generate(state.getState().props.enableExport.copy));
-    };
-    const download = () => {
-        const a = document.createElement('a');
-        a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(generate(state.getState().props.enableExport.download));
-        a.download = 'export.csv';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: _jsx(CloudDownload, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: _jsxs("div", Object.assign({ className: classes.dialog }, { children: [_jsx(Typography, Object.assign({ variant: "caption" }, { children: textTitle !== null && textTitle !== void 0 ? textTitle : 'Export' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(AssignmentReturn, {}, void 0), fullWidth: true, onClick: copy }, { children: textCopy !== null && textCopy !== void 0 ? textCopy : 'In die Zwischenablage' }), void 0), _jsx(Button, Object.assign({ startIcon: _jsx(CloudDownload, {}, void 0), fullWidth: true, onClick: download }, { children: textDownload !== null && textDownload !== void 0 ? textDownload : 'Herunterladen' }), void 0)] }), void 0) }), void 0)] }, void 0));
-}

package/dist/esm/components/filterComponent.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare type Filter<T> = {
-    filter(item: T): boolean;
-};
-export declare function FilterComponent<T>(): JSX.Element | null;

package/dist/esm/components/filterComponent.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton, makeStyles, Popover } from '@material-ui/core';
-import { ArrowDropDown, FilterList } from '@material-ui/icons';
-import { useState } from 'react';
-import { useColumnContext, useTableContext } from '../table';
-const useClasses = makeStyles((theme) => ({
-    active: {
-        background: theme.palette.primary.main,
-    },
-}));
-export function FilterComponent() {
-    const state = useTableContext();
-    const columnId = useColumnContext();
-    const classes = useClasses();
-    const isActive = state.useState((state) => !!state.filters.get(columnId), [columnId]);
-    const filterComponent = state.useState((state) => { var _a; return (_a = state.activeColumns.find((column) => column.id === columnId)) === null || _a === void 0 ? void 0 : _a.filterComponent; });
-    const [anchor, setAnchor] = useState(null);
-    if (!filterComponent)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: (e) => setAnchor(e.currentTarget), className: isActive ? classes.active : undefined }, { children: isActive ? _jsx(FilterList, {}, void 0) : _jsx(ArrowDropDown, {}, void 0) }), void 0), _jsx(Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, { children: filterComponent }), void 0)] }, void 0));
-}

package/dist/esm/components/row.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Id, InternalColumn } from '../types';
-export declare const calcClassName: (classes: InternalColumn<any, any>['classes'] | undefined, index: number) => string;
-export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
-    itemId: Id;
-    rowIndex: number;
-}) => JSX.Element | null)>;

package/dist/esm/components/row.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect, useRef } from 'react';
-import { c, getAncestors } from '../misc/helpers';
-import { ColumnContext, useTableContext } from '../table';
-import { Cell } from './cell';
-import { ExpandComponent } from './expandComponent';
-import { SelectComponent } from './selectComponent';
-import { useCommonClasses } from './useCommonClasses';
-export const calcClassName = (classes, index) => c(classes === null || classes === void 0 ? void 0 : classes.cell, (classes === null || classes === void 0 ? void 0 : classes.evenCell) === undefined ? undefined : { [classes.evenCell]: index % 2 === 0 }, (classes === null || classes === void 0 ? void 0 : classes.oddCell) === undefined ? undefined : { [classes.oddCell]: index % 2 === 1 });
-export const Row = memo(function Row({ itemId, rowIndex }) {
-    var _a, _b;
-    const commonClasses = useCommonClasses();
-    const state = useTableContext();
-    const divRef = useRef(null);
-    const { className, indent, hasChildren, hasDeferredChildren, columnIds, enableSelection } = state.useState((state) => {
-        var _a, _b;
-        const item = state.activeItemsById.get(itemId);
-        const index = !item ? -1 : state.activeItems.indexOf(item);
-        return {
-            className: calcClassName(state.props.classes, index),
-            indent: item ? getAncestors(state.activeItemsById, item).size : 0,
-            hasChildren: !!(item === null || item === void 0 ? void 0 : item.children.length),
-            hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) === null || _b === void 0 ? void 0 : _b.call(_a, item)),
-            columnIds: state.activeColumns.map((column) => column.id),
-            enableSelection: state.props.enableSelection,
-        };
-    }, [itemId]);
-    useEffect(() => {
-        const div = divRef.current;
-        if (!div)
-            return;
-        const o = new ResizeObserver(() => {
-            if (!document.contains(div))
-                return;
-            state.update((state) => {
-                state.rowHeights.set(itemId, div.offsetHeight);
-            });
-        });
-        o.observe(div);
-        return () => o.disconnect();
-    }, [divRef.current]);
-    (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render row', itemId);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: c(commonClasses.cellFill, className), ref: divRef }, void 0), _jsxs("div", Object.assign({ className: c(commonClasses.cell, commonClasses.firstCell, className) }, { children: [_jsx("div", { style: { width: indent * 20 } }, void 0), enableSelection && _jsx(SelectComponent, { itemId: itemId }, void 0), (hasChildren || hasDeferredChildren) && _jsx(ExpandComponent, { itemId: itemId }, void 0)] }), void 0), columnIds.map((columnId) => (_jsx(ColumnContext.Provider, Object.assign({ value: columnId }, { children: _jsx(Cell, { itemId: itemId, rowIndex: rowIndex }, void 0) }), columnId))), _jsx("div", { className: c(commonClasses.cellFill, className) }, void 0)] }, void 0));
-});

package/dist/esm/components/selectComponent.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { Id } from '../types';
-export declare function SelectComponent<T>({ itemId }: {
-    itemId?: Id;
-}): JSX.Element;

package/dist/esm/components/selectComponent.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox, makeStyles } from '@material-ui/core';
-import { getAncestors, getDescendants } from '../misc/helpers';
-import { useTableContext } from '../table';
-const useClasses = makeStyles({
-    justifiedCheckbox: {
-        justifySelf: 'start',
-        color: 'inherit',
-    },
-});
-export function SelectComponent({ itemId }) {
-    const classes = useClasses();
-    const state = useTableContext();
-    const isSelected = state.useState((state) => {
-        const itemIds = itemId ? [itemId] : [...state.activeItemsById.keys()];
-        return state.activeItemsById.size > 0 && itemIds.every((itemId) => state.selection.has(itemId));
-    }, [itemId]);
-    function toggle(e) {
-        const mouseEvent = e.nativeEvent;
-        const { activeItems, activeItemsById, lastSelectedId, selection, props: { selectSyncChildren, selection: controlledSelection, onSelectionChange }, } = state.getState();
-        let range;
-        if (mouseEvent.shiftKey && itemId) {
-            const a = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
-            const b = activeItems.findIndex((item) => item.id === itemId);
-            range = activeItems.slice(Math.min(a, b), Math.max(a, b) + 1);
-        }
-        else {
-            const item = itemId ? activeItemsById.get(itemId) : undefined;
-            range = item ? [item] : activeItems;
-        }
-        const newSelection = new Set(selection);
-        for (const item of range) {
-            if (isSelected)
-                newSelection.delete(item.id);
-            else
-                newSelection.add(item.id);
-        }
-        if (selectSyncChildren && isSelected) {
-            for (const ancestor of getAncestors(activeItemsById, ...range)) {
-                newSelection.delete(ancestor);
-            }
-            for (const descendant of getDescendants(...range)) {
-                newSelection.delete(descendant);
-            }
-        }
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelection);
-        if (!controlledSelection) {
-            state.update((state) => {
-                state.selection = newSelection;
-            });
-        }
-        state.update((state) => {
-            state.lastSelectedId = itemId;
-        });
-    }
-    return _jsx(Checkbox, { className: classes.justifiedCheckbox, checked: isSelected, onChange: toggle }, void 0);
-}

package/dist/esm/components/sortComponent.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export declare function SortComponent<T>({ children }: {
-    children: ReactNode;
-}): JSX.Element;

package/dist/esm/components/sortComponent.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, makeStyles } from '@material-ui/core';
-import { ArrowDownward, ArrowUpward } from '@material-ui/icons';
-import { useColumnContext, useTableContext } from '../table';
-const useClasses = makeStyles({
-    sortView: {
-        userSelect: 'none',
-        display: 'grid',
-        gridTemplateColumns: 'minmax(0, 1fr) max-content',
-        alignItems: 'center',
-        cursor: 'pointer',
-        '& > div': {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        },
-    },
-    empty: {
-        width: 20,
-    },
-});
-export function SortComponent({ children }) {
-    const classes = useClasses();
-    const state = useTableContext();
-    const columnId = useColumnContext();
-    const { direction, index } = state.useState((state) => {
-        var _a, _b;
-        const index = (_a = state.sort.findIndex((s) => s.columnId === columnId)) !== null && _a !== void 0 ? _a : -1;
-        return {
-            direction: (_b = state.sort[index]) === null || _b === void 0 ? void 0 : _b.direction,
-            index: index >= 0 ? index + 1 : undefined,
-        };
-    });
-    function toggle(e) {
-        const { props: { sort: controlledSort, onSortChange }, } = state.getState();
-        const newDirection = direction === 'asc' ? 'desc' : 'asc';
-        const newSort = (e.getModifierState('Control') ? state.getState().sort.filter((s) => s.columnId !== columnId) : []).concat({
-            columnId,
-            direction: newDirection,
-        });
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newSort);
-        if (!controlledSort) {
-            state.update((state) => {
-                state.sort = newSort;
-            });
-        }
-    }
-    return (_jsxs("div", Object.assign({ className: classes.sortView, onClick: toggle }, { children: [_jsx("div", { children: children }, void 0), _jsx(Badge, Object.assign({ badgeContent: index }, { children: direction === 'asc' ? (_jsx(ArrowUpward, { fontSize: "small" }, void 0)) : direction === 'desc' ? (_jsx(ArrowDownward, { fontSize: "small" }, void 0)) : (_jsx("div", { className: classes.empty }, void 0)) }), void 0)] }), void 0));
-}

package/dist/esm/components/textFilterComponent.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { Filter } from './filterComponent';
-export declare class TextFilter<T> implements Filter<T> {
-    readonly query: string;
-    readonly filter: (item: T) => boolean;
-    constructor(query: string, filter: (item: T) => boolean);
-}
-export declare function TextFilterComponent<T, V>({ filterBy, compare, }: {
-    filterBy?: (value: V, item: T) => string;
-    compare?: (a: string, b: string) => boolean;
-}): JSX.Element;

package/dist/esm/components/textFilterComponent.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { IconButton, makeStyles, TextField } from '@material-ui/core';
-import { Clear, Search } from '@material-ui/icons';
-import { useEffect, useState } from 'react';
-import { asString } from '../misc/helpers';
-import { textMatch } from '../misc/textMatch';
-import { useColumnContext, useTableContext } from '../table';
-export class TextFilter {
-    constructor(query, filter) {
-        this.query = query;
-        this.filter = filter;
-    }
-}
-const useClasses = makeStyles((theme) => ({
-    view: {
-        padding: theme.spacing(2),
-        display: 'grid',
-        '& > :first-child': {
-            marginBottom: theme.spacing(2),
-        },
-    },
-}));
-export function TextFilterComponent({ filterBy = asString, compare = textMatch, }) {
-    var _a;
-    const classes = useClasses();
-    const state = useTableContext();
-    const columnId = useColumnContext();
-    const _filter = state.useState((state) => {
-        var _a;
-        const column = state.activeColumns.find((column) => column.id === columnId);
-        return (_a = state.filters.get(columnId)) !== null && _a !== void 0 ? _a : column === null || column === void 0 ? void 0 : column.defaultFilter;
-    }, [columnId]);
-    const filter = _filter instanceof TextFilter ? _filter : undefined;
-    const [input, setInput] = useState();
-    useEffect(() => {
-        if (input === undefined)
-            return;
-        const handle = setTimeout(() => {
-            var _a;
-            const column = state.getState().activeColumns.find((column) => column.id === columnId);
-            if (!column)
-                return;
-            const newFilter = input
-                ? new TextFilter(input, (item) => {
-                    const itemValue = filterBy(column.value(item), item);
-                    return compare(itemValue, input);
-                })
-                : undefined;
-            if (!column.filter) {
-                state.update((state) => {
-                    if (newFilter)
-                        state.filters.set(column.id, newFilter);
-                    else
-                        state.filters.delete(column.id);
-                });
-            }
-            (_a = column.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(column, newFilter);
-            setInput(undefined);
-        }, 500);
-        return () => clearTimeout(handle);
-    }, [input]);
-    return (_jsx("div", Object.assign({ className: classes.view }, { children: _jsx(TextField, { value: (_a = input !== null && input !== void 0 ? input : filter === null || filter === void 0 ? void 0 : filter.query) !== null && _a !== void 0 ? _a : '', onChange: (e) => setInput(e.target.value), InputProps: {
-                endAdornment: (filter === null || filter === void 0 ? void 0 : filter.query) ? (_jsx(IconButton, Object.assign({ onClick: () => setInput('') }, { children: _jsx(Clear, {}, void 0) }), void 0)) : (_jsx(Search, {}, void 0)),
-            } }, void 0) }), void 0));
-}

package/dist/esm/components/useCommonClasses.d.ts

@@ -1 +0,0 @@
-export declare const useCommonClasses: (props?: any) => import("@material-ui/styles").ClassNameMap<"table" | "text" | "cell" | "sticky" | "headerCell" | "cellFill" | "firstCell" | "headerFill" | "deferredPlaceholder">;

package/dist/esm/components/useCommonClasses.js

@@ -1,46 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-const cell = (theme) => ({
-    padding: theme.spacing(0.1, 1),
-    display: 'flex',
-    alignItems: 'center',
-    borderBottom: `1px solid ${theme.palette.grey[200]}`,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-});
-export const useCommonClasses = makeStyles((theme) => ({
-    table: {
-        position: 'relative',
-        display: 'grid',
-    },
-    cell: cell(theme),
-    cellFill: {
-        borderBottom: `1px solid ${theme.palette.grey[200]}`,
-    },
-    headerCell: Object.assign(Object.assign({}, cell(theme)), { borderBottom: `2px solid ${theme.palette.grey[400]}`, gridTemplateColumns: 'minmax(0, 1fr) max-content', background: theme.palette.common.white, '&:not(:first-child)': {
-            borderLeft: `1px solid ${theme.palette.background.default}`,
-        } }),
-    firstCell: {
-        justifyContent: 'start',
-    },
-    sticky: {
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-    },
-    headerFill: {
-        borderBottom: `3px solid ${theme.palette.grey[200]}`,
-        background: theme.palette.common.white,
-    },
-    deferredPlaceholder: {
-        padding: theme.spacing(1),
-        borderBottom: `1px solid ${theme.palette.grey[200]}`,
-        gridColumn: '1 / -1',
-        display: 'grid',
-        justifyContent: 'center',
-    },
-    text: {
-        minWidth: 0,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-}));

package/dist/esm/components/virtualized.d.ts

@@ -1,6 +0,0 @@
-import { HTMLProps, ReactNode } from 'react';
-import { Id } from '../types';
-export declare function Virtualized<T>({ header, children, ...props }: {
-    header: ReactNode;
-    children: (itemIds: Id[], startIndex: number) => ReactNode;
-} & HTMLProps<HTMLDivElement>): JSX.Element;