schummar-table 0.8.1 → 0.9.0

package/dist/cjs/tableTheme.js

@@ -83,6 +83,15 @@ const defaultClasses = {
     borderRadius: 4,
     boxShadow: "0px 3px 14px 2px rgb(0 0 0 / 12%)",
     background: "white"
+  }),
+  clearFiltersButton: react.css({
+    fontWeight: "bold",
+    textAlign: "center",
+    gridColumn: "1/-1",
+    button: {
+      color: "var(--primaryMain) !important",
+      margin: "var(--spacing)"
+    }
   })
 };
 const MARGIN = 10;

package/dist/cjs/tableTheme.js.map

@@ -1 +1 @@
-{"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","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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"}
+{"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    fontWeight: 'bold',\n    textAlign: 'center',\n    gridColumn: '1/-1',\n    button: {\n      color: '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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"}

package/dist/es/index.js

@@ -399,7 +399,7 @@ const noopParentId = () => void 0;
 function calcProps(props) {
   const cache = useTableMemo();
   return useMemo(() => {
-    var _f, _g, _h, _i, _j, _k, _l;
+    var _f, _g, _h, _i, _j, _k, _l, _m;
     let id;
     if (props.id instanceof Function || Array.isArray(props.id)) {
       id = cache("id", props.id);
@@ -478,8 +478,9 @@ function calcProps(props) {
       stickyFooter: (_i = props.stickyFooter) != null ? _i : true,
       enableExport,
       enableColumnSelection: (_j = props.enableColumnSelection) != null ? _j : true,
-      enableColumnResize: (_k = props.enableColumnResize) != null ? _k : true,
-      enableColumnReorder: (_l = props.enableColumnReorder) != null ? _l : true
+      enableClearFiltersButton: (_k = props.enableClearFiltersButton) != null ? _k : false,
+      enableColumnResize: (_l = props.enableColumnResize) != null ? _l : true,
+      enableColumnReorder: (_m = props.enableColumnReorder) != null ? _m : true
     });
   }, [props]);
 }
@@ -635,7 +636,7 @@ function ColumnFooter() {
     const column = state.activeColumns.find((column2) => column2.id === columnId);
     if ((column == null ? void 0 : column.footer) instanceof Function) {
       const items = state.activeItems;
-      const values = items.map((item) => column == null ? void 0 : column.value(item));
+      const values = items.map((item) => column == null ? void 0 : column.value(item.value));
       return column == null ? void 0 : column.footer(values, items);
     }
     return column == null ? void 0 : column.footer;
@@ -1633,6 +1634,13 @@ const TableInner = memo(function TableInner2({
     width: column.width,
     classes: column.classes
   })));
+  const hasActiveFilters = table.useState((state) => {
+    return state.activeColumns.some((column) => {
+      const filter = state.filters.get(column.id);
+      const filterValue = state.filterValues.get(column.id);
+      return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
+    });
+  });
   const columnWidths = table.useState("columnWidths", {
     throttle: 16
   });
@@ -1644,6 +1652,9 @@ const TableInner = memo(function TableInner2({
   const enableColumnSelection = table.useState("props.enableColumnSelection");
   const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
   const cssVariables = useCssVariables();
+  const enableClearFiltersButton = table.useState("props.enableClearFiltersButton");
+  const Button2 = useTheme((t) => t.components.Button);
+  const textClearFilters = useTheme((t) => t.text.clearFilters);
   useLayoutEffect(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
@@ -1681,19 +1692,34 @@ const TableInner = memo(function TableInner2({
         css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
       })]
     }),
-    footer: hasFooter && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), /* @__PURE__ */ jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), activeColumns.map((column) => /* @__PURE__ */ jsx(ColumnContext.Provider, {
-        value: column.id,
-        children: /* @__PURE__ */ jsx(ColumnFooter, {})
-      }, column.id)), /* @__PURE__ */ jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+    footer: /* @__PURE__ */ jsxs(Fragment, {
+      children: [enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsx("div", {
+        css: defaultClasses.clearFiltersButton,
+        children: /* @__PURE__ */ jsx(Button2, {
+          variant: "text",
+          onClick: () => {
+            table.update((state) => {
+              state.activeColumns.forEach((column) => {
+                state.filterValues.delete(column.id);
+              });
+            });
+          },
+          children: textClearFilters
+        })
+      }), hasFooter && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), activeColumns.map((column) => /* @__PURE__ */ jsx(ColumnContext.Provider, {
+          value: column.id,
+          children: /* @__PURE__ */ jsx(ColumnFooter, {})
+        }, column.id)), /* @__PURE__ */ jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [defaultClasses.footerFill, stickyFooter && defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        })]
       })]
     }),
     children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsx(Row, {
@@ -2125,6 +2151,7 @@ const defaultTexts = {
   exportDownload: "Download",
   today: "Today",
   thisWeek: "This week",
+  clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
   selected: (count) => `${count} selected`
@@ -2341,6 +2368,7 @@ function DatePicker({
   const textToday = useTheme((t) => t.text.today);
   const textThisWeek = useTheme((t) => t.text.thisWeek);
   const textReset = useTheme((t) => t.text.reset);
+  const cssVariables = useCssVariables();
   const [baseDate] = useState(new Date());
   const [dateInView, setDateInView] = useState(baseDate);
   const [dirty, setDirty] = useState();
@@ -2418,6 +2446,7 @@ function DatePicker({
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
   return /* @__PURE__ */ jsxs("div", {
+    css: cssVariables,
     children: [/* @__PURE__ */ jsxs("div", {
       css: {
         display: "grid",