schummar-table 0.3.2 → 0.5.0-beta-1

package/dist/types/types.d.ts

@@ -0,0 +1,285 @@
+import { CSSInterpolation } from '@emotion/serialize';
+import React, { ComponentType, CSSProperties, ReactNode } from 'react';
+import { TableStateStorage } from './internalState/tableStateStorage';
+import { CsvExportOptions } from './misc/csvExport';
+export declare type Sort = {
+    columnId: string | number;
+    direction: SortDirection;
+};
+export declare type SortDirection = 'asc' | 'desc';
+export declare type Id = string | number;
+export declare type KeyOfType<T, S> = {
+    [K in keyof T]: T[K] extends S ? K : never;
+}[keyof T];
+export interface TableTheme<T = unknown> {
+    /** Define display texts. */
+    text: {
+        selectColumns: ReactNode;
+        noResults: ReactNode;
+        exportTitle: ReactNode;
+        exportCopy: ReactNode;
+        exportDownload: ReactNode;
+        textFilter: ReactNode;
+        selectFilter: ReactNode;
+        dateFilter: ReactNode;
+        today: ReactNode;
+        reset: ReactNode;
+        loading: ReactNode;
+    };
+    /** Define styles. */
+    css?: {
+        table?: CSSInterpolation;
+        headerCell?: CSSInterpolation;
+        cell?: CSSInterpolation | ((item: T, index: number) => CSSInterpolation);
+        evenCell?: CSSInterpolation;
+        oddCell?: CSSInterpolation;
+    };
+    /** Defined components to be used in the table. */
+    components: {
+        IconButton: ComponentType<{
+            children: ReactNode;
+            onClick?: (e: React.MouseEvent<Element>) => void;
+            className?: string;
+        }>;
+        Button: ComponentType<{
+            children: ReactNode;
+            onClick?: (e: React.MouseEvent<Element>) => void;
+            startIcon?: ReactNode;
+            variant?: 'text' | 'outlined' | 'contained';
+            disabled?: boolean;
+        }>;
+        Checkbox: ComponentType<{
+            checked: boolean;
+            onChange: (e: React.ChangeEvent) => void;
+            disabled?: boolean;
+            className?: string;
+        }>;
+        Popover: ComponentType<{
+            anchorEl: Element | null;
+            open: boolean;
+            hidden?: boolean;
+            onClose: () => void;
+            children: ReactNode;
+            className?: string;
+            align?: 'center' | 'left';
+        }>;
+        Badge: ComponentType<{
+            children: ReactNode;
+            badgeContent: ReactNode;
+        }>;
+        TextField: ComponentType<{
+            value: string | null;
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            endIcon?: ReactNode;
+            className?: string;
+        }>;
+        Spinner: (props: {
+            className?: string;
+        }) => JSX.Element;
+    };
+    /** Define icons for the table. */
+    icons: {
+        [K in 'Settings' | 'Export' | 'Clipboard' | 'ChevronRight' | 'Search' | 'Clear' | 'ArrowDropDown' | 'FilterList' | 'ArrowUpward']: ComponentType<{
+            className?: string;
+        }>;
+    };
+    /** Define colors */
+    colors: {
+        primary: {
+            main: string;
+            light: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            light: string;
+            contrastText: string;
+        };
+    };
+    /** Spacing. */
+    spacing: string | number;
+}
+export interface TableProps<T> extends Partial<TableTheme<T>> {
+    /** The data to be rendered. One item per row. */
+    items?: T[];
+    /** Unique id for each item/row. */
+    id: ((item: T) => Id) | KeyOfType<T, Id>;
+    /** Create a nested structure by assigning parents to items. Child items are hidden until the parent is expanded. */
+    parentId?: ((item: T) => Id | undefined) | KeyOfType<T, Id | undefined>;
+    /** If true for an item, it means that children will be loaded asynchronously as soon as item is expanded. */
+    hasDeferredChildren?: (item: T) => boolean;
+    /** Column definitions. */
+    columns: Column<T, any>[] | ((col: <V>(value: (item: T) => V, column: Omit<Column<T, V>, 'value'>) => Column<T, V>) => Column<T, any>[]);
+    /** Display a cell at the start of each row. Useful for "go to details" button for example. */
+    rowAction?: ReactNode | ((item: T, index: number) => ReactNode);
+    /** Default sort order. */
+    defaultSort?: Sort[];
+    /** If given, controls the sort order. */
+    sort?: Sort[];
+    /** Called when sort order changes. */
+    onSortChange?: (sort: Sort[]) => void;
+    /** Default selection. */
+    defaultSelection?: Set<Id>;
+    /** If given, controls the selection. */
+    selection?: Set<Id>;
+    /** Called when selection changes. */
+    onSelectionChange?: (selection: Set<Id>) => void;
+    /** Whether to show checkboxes at the start of each row.
+     * @default true
+     */
+    enableSelection?: boolean;
+    /** Select and deselect children if a parent is selected or deselected.
+     * @default true
+     */
+    selectSyncChildren?: boolean;
+    /** Expand parents whose children fit a newly selected filter
+     * @default false
+     */
+    revealFiltered?: boolean;
+    /** Default expanded rows. */
+    defaultExpanded?: Set<Id>;
+    /** If given, controls expanded rows. */
+    expanded?: Set<Id>;
+    /** Called when expanded rows change. */
+    onExpandedChange?: (expanded: Set<Id>) => void;
+    /** If enabled and one row is expanded, other rows will be closed.
+     * @default false
+     */
+    expandOnlyOne?: boolean;
+    /** Default hidden columns. */
+    defaultHiddenColumns?: Set<Id>;
+    /** If given, controls hidden columns. */
+    hiddenColumns?: Set<Id>;
+    /** Called when hidden columns change. */
+    onHiddenColumnsChange?: (hiddenColumns: Set<Id>) => void;
+    /** Default width for columns. */
+    defaultWidth?: string;
+    /** Whether to stretch the table component over the available space. If value is "left" or "right", align accordingly. */
+    fullWidth?: boolean | 'left' | 'right';
+    /** Whether the table header should be sticky.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /** Whether the table cells should only be rendered when in viewport.
+     * @default true
+     */
+    virtual?: boolean | {
+        rowHeight?: number;
+        initalRowHeight?: number;
+        throttleScroll?: number;
+        overscan?: number;
+        overscanBottom?: number;
+        overscanTop?: number;
+    };
+    /** Enable menu to select which columns are visible.
+     * @default true
+     */
+    enableColumnSelection?: boolean;
+    /** Enable exporting to csv.
+     * @default false
+     */
+    enableExport?: boolean | {
+        copy?: boolean | CsvExportOptions;
+        download?: boolean | CsvExportOptions;
+    };
+    /** Allow to drag and drop column separators to resize the column left of it.
+     * @default true
+     */
+    enableColumnResize?: boolean;
+    /** Allow to drag and drop column header to reorder columns.
+     * @default true
+     */
+    enableColumnReorder?: boolean;
+    /** If enabled, automatically store table state in localStorage, localForage or another compatible storage. */
+    persist?: {
+        storage: TableStateStorage;
+        id?: string;
+        include?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[];
+        exclude?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[];
+    };
+    debug?: (...output: any) => void;
+    debugRender?: (...output: any) => void;
+}
+export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'enableExport'> & {
+    id: (item: T) => Id;
+    parentId?: (item: T) => Id | undefined;
+    columns: InternalColumn<T, unknown>[];
+    enableExport: {
+        copy?: CsvExportOptions;
+        download?: CsvExportOptions;
+    };
+};
+export declare type TableItem<T = unknown> = T & {
+    id: Id;
+    parentId?: Id;
+    children: TableItem<T>[];
+};
+export declare type Column<T, V> = {
+    id?: string;
+    header?: ReactNode;
+    value: (item: T) => V;
+    renderCell?: (value: V, item: T) => ReactNode;
+    exportCell?: (value: V, item: T) => string | number;
+    sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
+    filter?: ReactNode;
+    cannotHide?: boolean;
+    width?: string;
+    justifyContent?: CSSProperties['justifyContent'];
+    css?: TableTheme<T>['css'];
+    /** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
+    dependencies?: any[];
+};
+export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'>, 'header' | 'renderCell' | 'exportCell' | 'sortBy'> & {
+    id: Id;
+};
+declare type Required<T, S> = T & {
+    [P in keyof T as P extends S ? P : never]-?: T[P];
+};
+export declare type Rows<T, V> = [{
+    value: V;
+    item: T;
+}, ...{
+    value: V;
+    item: T;
+}[]];
+export declare type InternalTableState<T> = {
+    props: InternalTableProps<T>;
+    theme: TableTheme<T>;
+    sort: Sort[];
+    selection: Set<Id>;
+    expanded: Set<Id>;
+    rowHeights: Map<Id, number>;
+    filters: Map<Id, FilterImplementation<T, any, any, any>>;
+    filterValues: Map<Id, any>;
+    hiddenColumns: Set<Id>;
+    columnWidths: Map<Id, string>;
+    columnOrder: Id[];
+    columnStyleOverride: Map<Id, CSSInterpolation>;
+    activeColumns: InternalColumn<T, unknown>[];
+    items: TableItem<T>[];
+    itemsById: Map<Id, TableItem<T>>;
+    activeItems: TableItem<T>[];
+    activeItemsById: Map<Id, TableItem<T>>;
+    lastSelectedId?: Id;
+};
+export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
+    filterBy?: (value: V, item: T) => F | F[];
+    defaultValue?: S;
+    value?: S;
+    onChange?: (value?: S) => void;
+    dependencies?: any[];
+    persist?: boolean;
+};
+export declare type FilterImplementation<T, V, F, S extends SerializableValue> = CommonFilterProps<T, V, F, S> & {
+    id: string;
+    isActive: (filterValue: S) => boolean;
+    test: (filterValue: S, value: F) => boolean;
+};
+export declare type SerializableValue = string | number | boolean | null | Date | SerializableArray | SerializableObject | SerializableSet | SerializableMap;
+export declare type SerializableObject = {
+    [key: string]: SerializableValue;
+};
+export declare type SerializableArray = SerializableValue[];
+export declare type SerializableSet = Set<SerializableValue>;
+export declare type SerializableMap = Map<SerializableValue, SerializableValue>;
+export {};

package/package.json

@@ -1,15 +1,39 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.3.2",
+  "version": "0.5.0-beta-1",
   "description": "",
   "type": "module",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/cjs/schummar-table.js",
+  "module": "dist/esm/schummar-table.js",
   "exports": {
-    "import": "./dist/esm/index.js",
-    "require": "./dist/cjs/index.js"
+    ".": {
+      "import": "./dist/esm/schummar-table.js",
+      "require": "./dist/cjs/schummar-table.js"
+    },
+    "./mui5Theme": {
+      "import": "./dist/esm/mui5Theme.js",
+      "require": "./dist/cjs/mui5Theme.js"
+    },
+    "./mui4Theme": {
+      "import": "./dist/esm/mui4Theme.js",
+      "require": "./dist/cjs/mui4Theme.js"
+    }
+  },
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/index.d.ts"
+      ],
+      "theme/mui5Theme": [
+        "dist/types/theme/mui5Theme/index.d.ts"
+      ],
+      "theme/mui4Theme": [
+        "dist/types/theme/mui4Theme/index.d.ts"
+      ]
+    }
   },
   "author": {
     "name": "Marco Schumacher",
@@ -17,49 +41,65 @@
   },
   "license": "ISC",
   "scripts": {
-    "start": "npm --prefix example run dev",
-    "dev": "run-p dev:*",
-    "dev:esm": "tsc --watch",
-    "dev:cjs": "tsc -p tsconfig-cjs.json --watch",
-    "build": "npm-run-all -s build:clean -p build:compile:*",
-    "build:clean": "rimraf dist/**",
-    "build:compile:esm": "tsc",
-    "build:compile:cjs": "tsc -p tsconfig-cjs.json && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json",
+    "start": "vite",
+    "build": "npm-run-all build:clean -p build:compile:*",
+    "build:clean": "rimraf \"dist/**/*\"",
+    "build:compile:js": "vite build",
+    "build:compile:types": "tsc --outDir dist/types --declaration --emitDeclarationOnly",
     "lint": "run-p lint:*",
     "lint:eslint": "eslint src",
     "lint:tsc": "tsc --noEmit",
-    "prepublishOnly": "run-s test lint build",
-    "test": "cd test && ava",
-    "test-watch": "cd test && ava --watch",
-    "coverage": "nyc --include src --all npm run test"
+    "prepublishOnly": "run-s lint build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "dayzed": "^3.2.2",
+    "immer": "^9.0.12",
+    "schummar-state": "0.2.1-experimental-9"
   },
   "peerDependencies": {
-    "@material-ui/core": ">=4.11.4",
-    "@material-ui/icons": ">=4.11.2",
-    "@types/react": ">=17.0.11",
-    "immer": ">=9.0.3",
-    "react": ">=16.8.0",
-    "schummar-state": ">=0.0.36"
+    "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.12.3",
+    "@mui/material": "^5.4.0",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "@emotion/styled": {
+      "optional": true
+    },
+    "@material-ui/core": {
+      "optional": true
+    },
+    "@mui/material": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "*",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "ava": "^3.15.0",
-    "eslint": "^8.2.0",
-    "global-jsdom": "^8.3.0",
-    "immer": "*",
-    "jsdom": "^18.1.0",
+    "@emotion/styled": "^11.6.0",
+    "@fontsource/fira-sans": "^4.5.2",
+    "@material-ui/core": "^4.12.3",
+    "@mui/material": "^5.4.1",
+    "@types/react": "17",
+    "@types/react-dom": "17",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "@vitejs/plugin-react": "^1.2.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "eslint": "^8.8.0",
+    "localforage": "^1.10.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prettier": "^2.5.1",
+    "react": "17",
+    "react-dom": "17",
     "rimraf": "^3.0.2",
-    "schummar-state": "*",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.2"
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.1",
+    "zx": "^5.0.0"
   },
   "files": [
     "dist"

package/dist/cjs/components/cell.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Cell = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const __1 = require("..");
-const helpers_1 = require("../misc/helpers");
-const row_1 = require("./row");
-const useCommonClasses_1 = require("./useCommonClasses");
-exports.Cell = (0, react_1.memo)(function Cell({ itemId, rowIndex }) {
-    var _a, _b;
-    const commonClasses = (0, useCommonClasses_1.useCommonClasses)();
-    const state = (0, __1.useTableContext)();
-    const columnId = (0, __1.useColumnContext)();
-    const column = state.useState((state) => state.activeColumns.find((column) => column.id === columnId), [columnId]);
-    const item = state.useState((state) => state.activeItemsById.get(itemId), [itemId]);
-    const classes = state.useState('props.classes');
-    let wrapCell = state.useState('props.wrapCell');
-    if (!column || !item)
-        return null;
-    (_b = (_a = state.getState().props).debug) === null || _b === void 0 ? void 0 : _b.call(_a, 'render cell', itemId, columnId);
-    const className = (0, helpers_1.c)((0, row_1.calcClassName)(classes, rowIndex), (0, row_1.calcClassName)(column === null || column === void 0 ? void 0 : column.classes, rowIndex));
-    const content = column.renderCell(column.value(item), item);
-    if (!wrapCell && typeof content === 'string') {
-        wrapCell = (content) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, helpers_1.c)(commonClasses.text) }, { children: content }), void 0) }), void 0));
-    }
-    else if (!wrapCell) {
-        wrapCell = (content) => (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, helpers_1.c)(commonClasses.cell, className) }, { children: content }), void 0);
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wrapCell(content, item) }, void 0);
-});

package/dist/cjs/components/columnSelection.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnSelection = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@material-ui/core");
-const icons_1 = require("@material-ui/icons");
-const react_1 = require("react");
-const table_1 = require("../table");
-const useClasses = (0, core_1.makeStyles)((theme) => ({
-    list: {
-        padding: theme.spacing(2),
-        display: 'grid',
-    },
-}));
-function ColumnSelection() {
-    const classes = useClasses();
-    const [anchor, setAnchor] = (0, react_1.useState)(null);
-    const state = (0, table_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: (e) => setAnchor(e.currentTarget) }, { children: (0, jsx_runtime_1.jsx)(icons_1.Settings, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(core_1.Popover, Object.assign({ open: !!anchor, onClose: () => setAnchor(null), anchorEl: anchor, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'left' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.list }, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.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));
-}
-exports.ColumnSelection = ColumnSelection;

package/dist/cjs/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/cjs/components/defaultFilterComponent.js

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultFilterComponent = exports.DefaultFilter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@material-ui/core");
-const icons_1 = require("@material-ui/icons");
-const react_1 = require("react");
-const helpers_1 = require("../misc/helpers");
-const table_1 = require("../table");
-class DefaultFilter {
-    constructor(values, filter) {
-        this.values = values;
-        this.filter = filter;
-    }
-}
-exports.DefaultFilter = DefaultFilter;
-const useClasses = (0, core_1.makeStyles)((theme) => ({
-    view: {
-        padding: theme.spacing(2),
-        display: 'grid',
-        '& > :first-child': {
-            marginBottom: theme.spacing(2),
-        },
-    },
-}));
-function DefaultFilterComponent({ filterBy: _filterBy, options: _options, compare = helpers_1.defaultEquals, stringValue = helpers_1.asString, render = stringValue, }) {
-    var _a;
-    const classes = useClasses();
-    const state = (0, table_1.useTableContext)();
-    const columnId = (0, table_1.useColumnContext)();
-    const filterBy = (0, react_1.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 : (0, helpers_1.orderBy)((0, helpers_1.uniq)((0, helpers_1.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] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.view }, { children: [(0, jsx_runtime_1.jsx)(core_1.TextField, { value: input, onChange: (e) => setInput(e.target.value), InputProps: {
-                    endAdornment: input ? ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ onClick: () => setInput('') }, { children: (0, jsx_runtime_1.jsx)(icons_1.Clear, {}, void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.Search, {}, void 0)),
-                } }, void 0), (0, jsx_runtime_1.jsx)(core_1.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 ((0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(core_1.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));
-}
-exports.DefaultFilterComponent = DefaultFilterComponent;

package/dist/cjs/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/cjs/components/expandComponent.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@material-ui/core");
-const icons_1 = require("@material-ui/icons");
-const helpers_1 = require("../misc/helpers");
-const table_1 = require("../table");
-function ExpandComponent({ itemId }) {
-    const state = (0, table_1.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 ? (0, helpers_1.getAncestors)(activeItemsById, item) : []) {
-                newExpanded.add(ancestor);
-            }
-        }
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newExpanded);
-        if (!controlledExpanded) {
-            state.update((state) => {
-                state.expanded = newExpanded;
-            });
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)(core_1.IconButton, Object.assign({ size: "small", onClick: toggle }, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRight, { style: {
-                transition: 'all 500ms',
-                transform: isExpanded ? 'rotate3d(0, 0, 1, 90deg)' : 'none',
-            } }, void 0) }), void 0));
-}
-exports.ExpandComponent = ExpandComponent;