schummar-table 0.10.5 → 0.12.1

package/dist/types/components/table.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { Store } from 'schummar-state/react';
 import { Id, InternalTableState, TableProps } from '../types';
 export declare const TableContext: React.Context<Store<InternalTableState<any>> | null>;
+export declare const TableResetContext: React.Context<() => void>;
 export declare const ColumnContext: React.Context<Id | null>;
 export declare function useTableContext<T>(): Store<InternalTableState<T>>;
 export declare function useColumnContext(): Id;

package/dist/types/hooks/useFilter.d.ts

@@ -1,7 +1,7 @@
 import { FilterImplementation, SerializableValue } from '../types';
 export declare function useFilter<T, V, F, S extends SerializableValue>(impl: FilterImplementation<T, V, F, S>): {
     value: S | undefined;
-    onChange: (value?: S | undefined) => void;
+    onChange: (value?: S) => void;
     close: () => void;
     filterBy: (value: V, item: T) => F | F[];
 };

package/dist/types/internalState/tableStateStorage.d.ts

@@ -1,3 +1,5 @@
+import { Store } from 'schummar-state/react';
+import { InternalTableState } from '../types';
 export declare type TableStateStorage = {
     getItem: (key: string) => string | null | Promise<string | null>;
     setItem: (key: string, value: string) => unknown | Promise<unknown>;
@@ -8,4 +10,4 @@ export declare type TableStateStorage = {
     length: number | (() => number | Promise<number>);
     key: (keyIndex: number) => string | null | Promise<string | null>;
 });
-export declare function useTableStateStorage(): boolean;
+export declare function useTableStateStorage(table: Store<InternalTableState<any>>): readonly [boolean, () => Promise<void>];

package/dist/types/internalState/useTableState.d.ts

@@ -1,3 +1,3 @@
 import { Store } from 'schummar-state/react';
 import { InternalTableState, TableProps } from '../types';
-export declare function useTableState<T>(_props: TableProps<T>): Store<InternalTableState<T>>;
+export declare function useTableState<T>(_props: TableProps<T>): [Store<InternalTableState<T>>, () => void];

package/dist/types/misc/queue.d.ts

@@ -2,5 +2,6 @@ export declare class Queue {
     private q;
     private isRunning;
     run<T>(job: () => Promise<T>, replace?: boolean): Promise<T>;
+    clear(): void;
     private start;
 }

package/dist/types/types.d.ts

@@ -29,6 +29,7 @@ export interface TableTheme<T = unknown> {
         loading: ReactNode;
         clearFilters: ReactNode;
         deselectAll: ReactNode;
+        resetAll: ReactNode;
     };
     /** Define styles. */
     classes?: {
@@ -136,6 +137,8 @@ export interface TableProps<T> extends PartialTableTheme<T> {
     sort?: Sort[];
     /** Called when sort order changes. */
     onSortChange?: (sort: Sort[]) => void;
+    /** Handle sorting externally, e.g. server side */
+    externalSort?: boolean;
     /** Default selection. */
     defaultSelection?: Set<Id>;
     /** If given, controls the selection. */
@@ -280,6 +283,7 @@ declare type Required<T, S> = T & {
 };
 export declare type InternalTableState<T> = {
     props: InternalTableProps<T>;
+    key: any;
     sort: Sort[];
     selection: Set<Id>;
     expanded: Set<Id>;
@@ -306,6 +310,8 @@ export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
     value?: S;
     /** Notifies on filter change. */
     onChange?: (value?: S) => void;
+    /** Table should not filter using this filter. It will be done externally, e.g. server side. */
+    external?: boolean;
     /** Whether to persist filter value (given that filter persitance is enabled for the table).
      * @default true
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.10.5",
+  "version": "0.12.1",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -44,7 +44,7 @@
   },
   "license": "ISC",
   "scripts": {
-    "start": "vite",
+    "start": "npm -w docs start",
     "build": "runp build:clean :p build:compile:* :s build:cjsPackage",
     "build:clean": "rimraf \"dist/**/*\"",
     "build:compile:js": "vite build",
@@ -54,13 +54,12 @@
     "lint:eslint": "eslint src",
     "lint:tsc": "tsc --emitDeclarationOnly false --noEmit",
     "prepublishOnly": "runp :s lint build",
-    "docs": "npm -w docs start",
     "docs:build": "npm -w docs run build"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "dayzed": "^3.2.2",
-    "immer": "^9.0.12",
+    "@emotion/react": "^11.10.4",
+    "dayzed": "^3.2.3",
+    "immer": "^9.0.15",
     "schummar-state": "0.2.1-experimental-13"
   },
   "peerDependencies": {
@@ -83,29 +82,32 @@
     }
   },
   "devDependencies": {
-    "@emotion/styled": "^11.8.1",
+    "@emotion/styled": "^11.10.4",
     "@material-ui/core": "^4.12.4",
-    "@mui/material": "^5.6.3",
+    "@mui/material": "^5.10.3",
     "@schummar/runp": "^1.5.3",
     "@types/react": "17",
     "@types/react-dom": "^17.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "@vitejs/plugin-react": "^1.3.1",
-    "eslint": "^8.14.0",
-    "prettier": "^2.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "@vitejs/plugin-react": "^2.0.1",
+    "eslint": "^8.23.0",
+    "eslint-plugin-storybook": "^0.6.4",
+    "prettier": "^2.7.1",
     "react": "17",
     "react-dom": "17",
     "rimraf": "^3.0.2",
     "semantic-release": "^19.0.5",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9"
   },
   "files": [
     "dist"
   ],
   "workspaces": [
-    "example",
     "docs"
-  ]
+  ],
+  "volta": {
+    "node": "16.17.0"
+  }
 }

package/dist/cjs/mui4Theme.js

@@ -1,98 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports[Symbol.toStringTag] = "Module";
-var core = require("@material-ui/core");
-var react = require("react");
-var tableTheme = require("./tableTheme.js");
-var jsxRuntime = require("@emotion/react/jsx-runtime");
-require("react-dom");
-require("@emotion/react");
-const mui4Theme = {
-  components: {
-    Button: (props) => /* @__PURE__ */ jsxRuntime.jsx(core.Button, __spreadProps(__spreadValues({}, props), {
-      size: "small",
-      fullWidth: true,
-      css: {
-        justifyContent: "start !important"
-      },
-      color: props.variant === "contained" ? "primary" : "inherit"
-    })),
-    IconButton: (props) => /* @__PURE__ */ jsxRuntime.jsx(core.IconButton, __spreadProps(__spreadValues({}, props), {
-      size: "small",
-      color: "inherit"
-    })),
-    Checkbox: (props) => /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, __spreadProps(__spreadValues({}, props), {
-      color: "primary",
-      size: "medium"
-    })),
-    Popover: tableTheme.Popover,
-    Badge: core.Badge,
-    TextField: (_a) => {
-      var _b = _a, {
-        endIcon
-      } = _b, props = __objRest(_b, [
-        "endIcon"
-      ]);
-      return /* @__PURE__ */ jsxRuntime.jsx(core.TextField, __spreadProps(__spreadValues({}, props), {
-        InputProps: {
-          endAdornment: endIcon
-        },
-        size: "small",
-        variant: "outlined"
-      }));
-    },
-    Spinner: core.CircularProgress
-  }
-};
-function Mui4TableThemeProvider({
-  theme,
-  children
-}) {
-  const muiTheme = core.useTheme();
-  const _theme = react.useMemo(() => {
-    return tableTheme.mergeThemes({
-      colors: {
-        primary: muiTheme.palette.primary,
-        secondary: muiTheme.palette.secondary
-      }
-    }, mui4Theme, theme != null ? theme : {});
-  }, [muiTheme, theme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(tableTheme.TableThemeContext.Provider, {
-    value: _theme,
-    children
-  });
-}
-exports.Mui4TableThemeProvider = Mui4TableThemeProvider;
-exports.mui4Theme = mui4Theme;
-//# sourceMappingURL=mui4Theme.js.map

package/dist/cjs/mui4Theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mui4Theme.js","sources":["../../src/theme/mui4Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@material-ui/core';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui4Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"medium\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" variant=\"outlined\" />,\n    Spinner: CircularProgress,\n  },\n};\n\nexport function Mui4TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui4Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui4Theme","components","Button","props","justifyContent","variant","IconButton","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary","TableThemeContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,0CACND,8CACKC;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEC,gBAAgB;AAAA;MACvB,OAAOD,MAAME,YAAY,cAAc,YAAY;AAAA;IAGvDC,YAAaH,0CAAWG,kDAAeH;MAAO,MAAK;AAAA,MAAQ,OAAM;AAAA;IACjEI,UAAWJ,0CAAWI,gDAAaJ;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;aAC/DK;WACAC;IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcR,kBAAd,IAAcA;AAAAA,QAAZQ;AAAAA;4CAAyBD,iDAAcP;QAAO,YAAY;AAAA,UAAES,cAAcD;AAAAA;QAAW,MAAK;AAAA,QAAQ,SAAQ;AAAA;;IACxHE,SAASC;;AAhB+B;gCAoBL;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,cAAQ,MAAM;WACpBC,uBACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;OAGhCzB,WACAe,wBAAS,EARO;AAAA,KAUjB,CAACE,UAAUF,KAAX,CAXmB;wCAadW,6BAAkB;IAAS,OAAOP;AAAAA;;AAC3C;;;"}

package/dist/cjs/mui5Theme.js

@@ -1,102 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports[Symbol.toStringTag] = "Module";
-var material = require("@mui/material");
-var react = require("react");
-var tableTheme = require("./tableTheme.js");
-var jsxRuntime = require("@emotion/react/jsx-runtime");
-require("react-dom");
-require("@emotion/react");
-const mui5Theme = {
-  components: {
-    Button: (props) => /* @__PURE__ */ jsxRuntime.jsx(material.Button, __spreadProps(__spreadValues({}, props), {
-      size: "small",
-      fullWidth: true,
-      css: {
-        justifyContent: "start !important"
-      },
-      color: props.variant === "contained" ? "primary" : "inherit"
-    })),
-    IconButton: (props) => /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, __spreadProps(__spreadValues({}, props), {
-      size: "small",
-      css: {
-        fontSize: "0.8em"
-      },
-      color: "inherit"
-    })),
-    Checkbox: (props) => /* @__PURE__ */ jsxRuntime.jsx(material.Checkbox, __spreadProps(__spreadValues({}, props), {
-      color: "primary",
-      size: "small"
-    })),
-    Popover: tableTheme.Popover,
-    Badge: material.Badge,
-    TextField: (_a) => {
-      var _b = _a, {
-        endIcon
-      } = _b, props = __objRest(_b, [
-        "endIcon"
-      ]);
-      return /* @__PURE__ */ jsxRuntime.jsx(material.TextField, __spreadProps(__spreadValues({}, props), {
-        InputProps: {
-          endAdornment: endIcon
-        },
-        size: "small"
-      }));
-    },
-    Spinner: (props) => /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, __spreadProps(__spreadValues({}, props), {
-      size: 20
-    }))
-  }
-};
-function Mui5TableThemeProvider({
-  theme,
-  children
-}) {
-  const muiTheme = material.useTheme();
-  const _theme = react.useMemo(() => {
-    return tableTheme.mergeThemes({
-      colors: {
-        primary: muiTheme.palette.primary,
-        secondary: muiTheme.palette.secondary
-      }
-    }, mui5Theme, theme != null ? theme : {});
-  }, [muiTheme, theme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(tableTheme.TableThemeContext.Provider, {
-    value: _theme,
-    children
-  });
-}
-exports.Mui5TableThemeProvider = Mui5TableThemeProvider;
-exports.mui5Theme = mui5Theme;
-//# sourceMappingURL=mui5Theme.js.map

package/dist/cjs/mui5Theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mui5Theme.js","sources":["../../src/theme/mui5Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@mui/material';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui5Theme: PartialTableTheme = {\n  components: {\n    Button: (props) => (\n      <Button\n        {...props}\n        size=\"small\"\n        fullWidth\n        css={{ justifyContent: 'start !important' }}\n        color={props.variant === 'contained' ? 'primary' : 'inherit'}\n      />\n    ),\n    IconButton: (props) => <IconButton {...props} size=\"small\" css={{ fontSize: '0.8em' }} color=\"inherit\" />,\n    Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"small\" />,\n    Popover,\n    Badge,\n    TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" />,\n    Spinner: (props) => <CircularProgress {...props} size={20} />,\n  },\n};\n\nexport function Mui5TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n  const muiTheme = useTheme();\n\n  const _theme = useMemo(() => {\n    return mergeThemes(\n      {\n        colors: {\n          primary: muiTheme.palette.primary,\n          secondary: muiTheme.palette.secondary,\n        },\n      },\n      mui5Theme,\n      theme ?? {},\n    );\n  }, [muiTheme, theme]);\n\n  return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui5Theme","components","Button","props","justifyContent","variant","IconButton","fontSize","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary","TableThemeContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,0CACND,kDACKC;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEC,gBAAgB;AAAA;MACvB,OAAOD,MAAME,YAAY,cAAc,YAAY;AAAA;IAGvDC,YAAaH,0CAAWG,sDAAeH;MAAO,MAAK;AAAA,MAAQ,KAAK;AAAA,QAAEI,UAAU;AAAA;MAAW,OAAM;AAAA;IAC7FC,UAAWL,0CAAWK,oDAAaL;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;aAC/DM;WACAC;IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcT,kBAAd,IAAcA;AAAAA,QAAZS;AAAAA;4CAAyBD,qDAAcR;QAAO,YAAY;AAAA,UAAEU,cAAcD;AAAAA;QAAW,MAAK;AAAA;;IACxGE,SAAUX,0CAAWY,4DAAqBZ;MAAO,MAAM;AAAA;;AAhBf;gCAoBL;AAAA,EAAEa;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,cAAQ,MAAM;WACpBC,uBACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;OAGhC1B,WACAgB,wBAAS,EARO;AAAA,KAUjB,CAACE,UAAUF,KAAX,CAXmB;wCAadW,6BAAkB;IAAS,OAAOP;AAAAA;;AAC3C;;;"}

package/dist/cjs/tableTheme.js

@@ -1,248 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var react$1 = require("react");
-var reactDom = require("react-dom");
-var react = require("@emotion/react");
-var jsxRuntime = require("@emotion/react/jsx-runtime");
-const white = "#ffffff";
-const lightGray = "#eeeeee";
-const gray = "#bdbdbd";
-const darkGray = "#777";
-const cell = react.css({
-  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,
-  display: "flex",
-  alignItems: "center",
-  borderBottom: `1px solid #dfe2e9`,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  background: "white"
-});
-const defaultClasses = {
-  table: react.css({
-    position: "relative",
-    display: "grid"
-  }),
-  cell,
-  cellFill: react.css({
-    borderBottom: `1px solid ${lightGray}`
-  }),
-  headerCell: react.css(cell, {
-    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,
-    borderBottom: `1px solid #c9cfda`
-  }),
-  footerCell: react.css(cell, {
-    padding: `var(--spacing) calc(2 * var(--spacing))`,
-    borderTop: `1px solid #c9cfda`,
-    borderBottom: "none"
-  }),
-  firstCell: react.css({
-    justifyContent: "start"
-  }),
-  sticky: react.css({
-    position: "sticky",
-    top: 0,
-    zIndex: 2
-  }),
-  stickyBottom: react.css({
-    position: "sticky",
-    bottom: 0,
-    zIndex: 2
-  }),
-  headerFill: react.css({
-    borderBottom: `1px solid #c9cfda`,
-    background: white
-  }),
-  footerFill: react.css({
-    borderTop: `1px solid #c9cfda`,
-    background: white
-  }),
-  text: react.css({
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  }),
-  card: react.css({
-    borderRadius: 4,
-    boxShadow: "0px 3px 14px 2px rgb(0 0 0 / 12%)",
-    background: "white"
-  }),
-  clearFiltersButton: react.css({
-    padding: `0 calc(2 * var(--spacing))`,
-    fontWeight: "bold",
-    position: "sticky",
-    left: 0,
-    maxWidth: "fit-content",
-    gridColumn: "2/-1",
-    button: {
-      color: "var(--primaryMain) !important",
-      border: "solid 1px",
-      borderColor: "var(--primaryMain) !important",
-      margin: "var(--spacing)"
-    }
-  })
-};
-const MARGIN = 10;
-const MAX_OFFSET = 20;
-const PopoverContext = react$1.createContext({
-  depth: 0,
-  visible: false
-});
-const Popover = ({
-  anchorEl,
-  open,
-  hidden,
-  onClose,
-  children,
-  className,
-  align
-}) => {
-  const popper = react$1.useRef(null);
-  const [position, setPosition] = react$1.useState();
-  react$1.useLayoutEffect(() => {
-    if (!anchorEl || !open) {
-      setPosition(void 0);
-      return;
-    }
-    let last;
-    function check() {
-      var _a, _b;
-      if (!anchorEl)
-        return;
-      const {
-        left: anchorLeft,
-        bottom: anchorBottom,
-        width: anchorWidth
-      } = anchorEl.getBoundingClientRect();
-      const {
-        width: popperWidth = 0,
-        height: popperHeight = 0
-      } = (_b = (_a = popper.current) == null ? void 0 : _a.getBoundingClientRect()) != null ? _b : {};
-      const viewportWidth = document.documentElement.clientWidth;
-      const viewportHeight = document.documentElement.clientHeight;
-      const next = {
-        left: align === "center" ? anchorLeft + anchorWidth / 2 - popperWidth / 2 : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),
-        top: anchorBottom
-      };
-      if (next.left + popperWidth + MARGIN > viewportWidth) {
-        next.left = viewportWidth - popperWidth - MARGIN;
-      }
-      if (next.top + popperHeight + MARGIN > viewportHeight) {
-        next.top = viewportHeight - popperHeight - MARGIN;
-      }
-      if (next.left !== (last == null ? void 0 : last.left) || next.top !== (last == null ? void 0 : last.top)) {
-        setPosition(next);
-      }
-      last = next;
-    }
-    check();
-    const handle = setInterval(check, 16);
-    return () => {
-      clearInterval(handle);
-    };
-  }, [anchorEl, open]);
-  const {
-    depth
-  } = react$1.useContext(PopoverContext);
-  const visible = !hidden && !!position;
-  const context = react$1.useMemo(() => ({
-    depth: depth + 1,
-    visible
-  }), [depth, visible]);
-  if (!open)
-    return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, {
-    value: context,
-    children: reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        css: [{
-          position: "fixed",
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          zIndex: 1e3 + depth * 2
-        }, hidden && {
-          display: "none"
-        }],
-        onClick: () => onClose()
-      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref: popper,
-        className,
-        css: [defaultClasses.card, __spreadProps(__spreadValues({
-          position: "fixed",
-          maxWidth: document.documentElement.clientWidth,
-          maxHeight: document.documentElement.clientHeight
-        }, position), {
-          zIndex: 1001 + depth * 2
-        }), hidden && {
-          display: "none"
-        }, !position && {
-          visibility: "hidden"
-        }],
-        children
-      })]
-    }), document.body)
-  });
-};
-exports.globalTableTheme = {};
-function configureTableTheme(tableTheme) {
-  exports.globalTableTheme = tableTheme;
-}
-const TableThemeContext = react$1.createContext({});
-function TableThemeProvider({
-  theme,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TableThemeContext.Provider, {
-    value: theme,
-    children
-  });
-}
-function mergeThemes(...themes) {
-  return {
-    text: Object.assign({}, ...themes.map((theme) => theme.text)),
-    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),
-    components: Object.assign({}, ...themes.map((theme) => theme.components)),
-    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),
-    colors: {
-      primary: Object.assign({}, ...themes.map((theme) => {
-        var _a;
-        return (_a = theme.colors) == null ? void 0 : _a.primary;
-      })),
-      secondary: Object.assign({}, ...themes.map((theme) => {
-        var _a;
-        return (_a = theme.colors) == null ? void 0 : _a.secondary;
-      }))
-    },
-    spacing: themes.map((theme) => theme.spacing).reverse().find((x) => x !== void 0)
-  };
-}
-exports.Popover = Popover;
-exports.PopoverContext = PopoverContext;
-exports.TableThemeContext = TableThemeContext;
-exports.TableThemeProvider = TableThemeProvider;
-exports.configureTableTheme = configureTableTheme;
-exports.darkGray = darkGray;
-exports.defaultClasses = defaultClasses;
-exports.gray = gray;
-exports.lightGray = lightGray;
-exports.mergeThemes = mergeThemes;
-//# sourceMappingURL=tableTheme.js.map

package/dist/cjs/tableTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tableTheme.js","sources":["../../src/theme/defaultTheme/defaultClasses.ts","../../src/theme/defaultTheme/popover.tsx","../../src/theme/tableTheme.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const white = '#ffffff';\nexport const lightGray = '#eeeeee';\nexport const gray = '#bdbdbd';\nexport const darkGray = '#777';\n\nconst cell = css({\n  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,\n  display: 'flex',\n  alignItems: 'center',\n  borderBottom: `1px solid #dfe2e9`,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  background: 'white',\n});\n\nexport const defaultClasses = {\n  table: css({\n    position: 'relative',\n    display: 'grid',\n  }),\n\n  cell,\n\n  cellFill: css({\n    borderBottom: `1px solid ${lightGray}`,\n  }),\n\n  headerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderBottom: `1px solid #c9cfda`,\n  }),\n\n  footerCell: css(cell, {\n    padding: `var(--spacing) calc(2 * var(--spacing))`,\n    borderTop: `1px solid #c9cfda`,\n    borderBottom: 'none',\n  }),\n\n  firstCell: css({\n    justifyContent: 'start',\n  }),\n\n  sticky: css({\n    position: 'sticky',\n    top: 0,\n    zIndex: 2,\n  }),\n\n  stickyBottom: css({\n    position: 'sticky',\n    bottom: 0,\n    zIndex: 2,\n  }),\n\n  headerFill: css({\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  footerFill: css({\n    borderTop: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  text: css({\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n\n  card: css({\n    borderRadius: 4,\n    boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',\n    background: 'white',\n  }),\n\n  clearFiltersButton: css({\n    padding: `0 calc(2 * var(--spacing))`,\n    fontWeight: 'bold',\n    position: 'sticky',\n    left: 0,\n    maxWidth: 'fit-content',\n    gridColumn: '2/-1',\n    button: {\n      color: 'var(--primaryMain) !important',\n      border: 'solid 1px',\n      borderColor: 'var(--primaryMain) !important',\n      margin: 'var(--spacing)',\n    },\n  }),\n};\n","import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TableTheme } from '../../types';\nimport { defaultClasses } from './defaultClasses';\n\nconst MARGIN = 10;\nconst MAX_OFFSET = 20;\n\nexport const PopoverContext = createContext({ depth: 0, visible: false });\n\nexport const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {\n  const popper = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<{ left: number; top: number }>();\n\n  useLayoutEffect(() => {\n    if (!anchorEl || !open) {\n      setPosition(undefined);\n      return;\n    }\n\n    let last: { left: number; top: number } | undefined;\n\n    function check() {\n      if (!anchorEl) return;\n      const { left: anchorLeft, bottom: anchorBottom, width: anchorWidth } = anchorEl.getBoundingClientRect();\n      const { width: popperWidth = 0, height: popperHeight = 0 } = popper.current?.getBoundingClientRect() ?? {};\n      const viewportWidth = document.documentElement.clientWidth;\n      const viewportHeight = document.documentElement.clientHeight;\n\n      const next = {\n        left:\n          align === 'center'\n            ? anchorLeft + anchorWidth / 2 - popperWidth / 2\n            : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),\n        top: anchorBottom,\n      };\n\n      if (next.left + popperWidth + MARGIN > viewportWidth) {\n        next.left = viewportWidth - popperWidth - MARGIN;\n      }\n      if (next.top + popperHeight + MARGIN > viewportHeight) {\n        next.top = viewportHeight - popperHeight - MARGIN;\n      }\n\n      if (next.left !== last?.left || next.top !== last?.top) {\n        setPosition(next);\n      }\n\n      last = next;\n    }\n    check();\n\n    const handle = setInterval(check, 16);\n    return () => {\n      clearInterval(handle);\n    };\n  }, [anchorEl, open]);\n\n  const { depth } = useContext(PopoverContext);\n  const visible = !hidden && !!position;\n  const context = useMemo(() => ({ depth: depth + 1, visible }), [depth, visible]);\n\n  if (!open) return null;\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {createPortal(\n        <>\n          <div\n            css={[\n              {\n                position: 'fixed',\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n                zIndex: 1000 + depth * 2,\n              },\n              hidden && { display: 'none' },\n            ]}\n            onClick={() => onClose()}\n          />\n\n          <div\n            ref={popper}\n            className={className}\n            css={[\n              defaultClasses.card,\n              {\n                position: 'fixed',\n                maxWidth: document.documentElement.clientWidth,\n                maxHeight: document.documentElement.clientHeight,\n                ...position,\n                zIndex: 1001 + depth * 2,\n              },\n              hidden && { display: 'none' },\n              !position && { visibility: 'hidden' },\n            ]}\n          >\n            {children}\n          </div>\n        </>,\n        document.body,\n      )}\n    </PopoverContext.Provider>\n  );\n};\n","import { createContext, ReactNode } from 'react';\nimport { PartialTableTheme } from '../types';\n\nexport let globalTableTheme: PartialTableTheme = {};\nexport function configureTableTheme(tableTheme: PartialTableTheme) {\n  globalTableTheme = tableTheme;\n}\n\nexport const TableThemeContext = createContext<PartialTableTheme>({});\n\nexport function TableThemeProvider({ theme, children }: { theme: PartialTableTheme; children: ReactNode }) {\n  return <TableThemeContext.Provider value={theme}>{children}</TableThemeContext.Provider>;\n}\n\nexport function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T> {\n  return {\n    text: Object.assign({}, ...themes.map((theme) => theme.text)),\n    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),\n    components: Object.assign({}, ...themes.map((theme) => theme.components)),\n    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),\n    colors: {\n      primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),\n      secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),\n    },\n    spacing: themes\n      .map((theme) => theme.spacing)\n      .reverse()\n      .find((x) => x !== undefined),\n  };\n}\n"],"names":["css","MARGIN","MAX_OFFSET","PopoverContext","createContext","depth","visible","Popover","anchorEl","open","hidden","onClose","children","className","align","popper","useRef","position","setPosition","useState","undefined","last","left","anchorLeft","bottom","anchorBottom","width","anchorWidth","getBoundingClientRect","popperWidth","height","popperHeight","current","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","next","Math","min","Infinity","top","handle","setInterval","check","useContext","context","useMemo","createPortal","right","zIndex","display","defaultClasses","card","maxWidth","maxHeight","visibility","body","globalTableTheme","tableTheme","TableThemeContext","theme","themes","text","Object","assign","map","classes","components","icons","colors","primary","secondary","spacing","reverse","find","x"],"mappings":"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"}