schummar-table 0.5.0-beta-6 → 0.5.0-beta-7

package/dist/cjs/index.js

@@ -33,13 +33,36 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports[Symbol.toStringTag] = "Module";
 var react = require("react");
-var dayzed = require("dayzed");
 var tableTheme = require("./tableTheme.js");
 var jsxRuntime = require("@emotion/react/jsx-runtime");
+var dayzed = require("dayzed");
 var immer = require("immer");
 var react$1 = require("schummar-state/react");
 require("@emotion/react");
 require("react-dom");
+function useTheme() {
+  const table = useTableContext();
+  return table.useState("theme");
+}
+function AutoFocusTextField(props) {
+  const {
+    components: {
+      TextField
+    }
+  } = useTheme();
+  const ref = react.useRef(null);
+  const {
+    visible
+  } = react.useContext(tableTheme.PopoverContext);
+  react.useLayoutEffect(() => {
+    if (visible && ref.current) {
+      ref.current.focus();
+    }
+  }, [visible]);
+  return jsxRuntime.jsx(TextField, __spreadProps(__spreadValues({}, props), {
+    inputRef: ref
+  }));
+}
 function useCssVariables() {
   const table = useTableContext();
   return table.useState((state) => ({
@@ -56,13 +79,6 @@ const weekDays = [0, 1, 2, 3, 4, 5, 6];
 const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, -1);
-const today = () => {
-  const today2 = startOfDay(new Date());
-  return {
-    min: today2,
-    max: today2
-  };
-};
 function dateIntersect(a, b) {
   if (a instanceof Date) {
     a = {
@@ -310,6 +326,7 @@ function YearSelector({
   locale
 }) {
   const [input, setInput] = react.useState();
+  const ref = react.useRef(null);
   function apply() {
     onChange(Number(input));
     setInput(void 0);
@@ -322,6 +339,10 @@ function YearSelector({
     });
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
+  react.useLayoutEffect(() => {
+    var _a;
+    return (_a = ref.current) == null ? void 0 : _a.focus();
+  }, [ref.current]);
   if (input === void 0) {
     return jsxRuntime.jsx("div", {
       onClick: () => setInput(String(value)),
@@ -329,6 +350,7 @@ function YearSelector({
     });
   }
   return jsxRuntime.jsx("input", {
+    ref,
     css: {
       width: "4ch"
     },
@@ -406,49 +428,66 @@ function DateFilter(_a) {
   return jsxRuntime.jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
-      display: "grid",
-      gap: "var(--spacing)",
-      justifyItems: "center"
+      display: "grid"
     },
-    children: [jsxRuntime.jsxs("div", {
+    children: [!singleSelect && jsxRuntime.jsxs("div", {
       css: {
         marginBottom: "var(--spacing)",
-        display: "grid",
-        gridAutoFlow: "column",
-        gap: "calc(var(--spacing) * 4)",
-        justifyContent: "space-between",
-        alignItems: "center"
+        display: "flex",
+        justifyContent: "center"
       },
-      children: [jsxRuntime.jsx("div", {
-        css: {
-          minWidth: "22ch"
-        },
-        children: !value ? text.dateFilter : value instanceof Date ? formatDate(value) : [formatDate(value.min), formatDate(value.max)].join(" - ")
-      }), jsxRuntime.jsxs("div", {
-        css: {
-          display: "grid",
-          gridAutoFlow: "column",
-          gap: "var(--spacing)"
-        },
-        children: [jsxRuntime.jsx(Button, {
-          variant: "contained",
-          onClick: () => onChange(today()),
-          children: text.today
-        }), jsxRuntime.jsx(Button, {
-          variant: "contained",
-          onClick: () => onChange(null),
-          children: text.reset
-        })]
-      })]
+      children: [value ? formatDate(value instanceof Date ? value : value.min) : "", " -", " ", value ? formatDate(value instanceof Date ? value : value.max) : ""]
     }), jsxRuntime.jsx(DatePicker, {
       rangeSelect: !singleSelect,
       value,
       onChange,
       locale,
       firstDayOfWeek
+    }), jsxRuntime.jsxs("div", {
+      css: {
+        marginTop: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        justifyContent: "center"
+      },
+      children: [jsxRuntime.jsx(Button, {
+        variant: "text",
+        onClick: () => onChange(today()),
+        children: text.today
+      }), jsxRuntime.jsx(Button, {
+        variant: "text",
+        onClick: () => onChange(thisWeek(firstDayOfWeek)),
+        children: text.thisWeek
+      }), jsxRuntime.jsx(Button, {
+        variant: "text",
+        onClick: () => onChange(null),
+        children: text.reset
+      })]
     })]
   });
 }
+const today = () => {
+  const today2 = startOfDay(new Date());
+  return {
+    min: today2,
+    max: today2
+  };
+};
+const thisWeek = (firstDayOfWeek = 0) => {
+  const now = new Date();
+  const min = new Date(now);
+  let diff = min.getDay() - firstDayOfWeek;
+  if (diff < 0) {
+    diff += 7;
+  }
+  min.setDate(min.getDate() - diff);
+  const max = new Date(min);
+  max.setDate(max.getDate() + 6);
+  return {
+    min: startOfDay(min),
+    max: endOfDay(max)
+  };
+};
 const flatMap = (arr, flatMap2) => {
   return [...arr].reduce((out, cur) => out.concat(flatMap2(cur)), []);
 };
@@ -529,10 +568,11 @@ const cx = (...classNames) => classNames.flatMap((entry) => {
 }).join(" ");
 function FormControlLabel({
   control,
-  label
+  label,
+  disabled
 }) {
   return jsxRuntime.jsxs("label", {
-    css: {
+    css: [{
       display: "flex",
       alignItems: "center",
       cursor: "pointer",
@@ -540,7 +580,9 @@ function FormControlLabel({
       "& > *": {
         cursor: "pointer"
       }
-    },
+    }, disabled && {
+      color: "rgba(0, 0, 0, 0.26)"
+    }],
     children: [control, jsxRuntime.jsx("span", {
       css: {
         marginLeft: "var(--spacing)"
@@ -1257,7 +1299,11 @@ function Export() {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(IconButton, {
       onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
-      children: jsxRuntime.jsx(Export2, {})
+      children: jsxRuntime.jsx(Export2, {
+        css: !!anchor && {
+          color: "var(--primaryMain)"
+        }
+      })
     }), jsxRuntime.jsx(Popover, {
       open: !!anchor,
       onClose: () => setAnchor(null),
@@ -1291,10 +1337,7 @@ function Export() {
     })]
   });
 }
-function useTheme() {
-  const table = useTableContext();
-  return table.useState("theme");
-}
+const FilterControlContext = react.createContext(() => void 0);
 function FilterControl() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -1319,16 +1362,33 @@ function FilterControl() {
     var _a;
     return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
   });
+  function reset() {
+    table.update((state) => {
+      state.filterValues.delete(columnId);
+    });
+  }
+  const close = react.useCallback(function() {
+    setAnchor(null);
+  }, []);
   if (!filter)
     return null;
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(IconButton, {
+  return jsxRuntime.jsxs(FilterControlContext.Provider, {
+    value: close,
+    children: [jsxRuntime.jsx("div", {
       onClick: (e) => setAnchor(e.currentTarget),
-      css: [isActive && {
-        color: "white !important",
-        backgroundColor: "var(--primaryMain) !important"
-      }],
-      children: isActive ? jsxRuntime.jsx(FilterList, {}) : jsxRuntime.jsx(ArrowDropDown, {})
+      onContextMenu: (e) => {
+        reset();
+        e.preventDefault();
+        return false;
+      },
+      children: jsxRuntime.jsx(IconButton, {
+        css: [{
+          color: "#b0bac9"
+        }, isActive && {
+          color: "var(--primaryMain) !important"
+        }],
+        children: isActive ? jsxRuntime.jsx(FilterList, {}) : jsxRuntime.jsx(ArrowDropDown, {})
+      })
     }), jsxRuntime.jsx("div", {
       onPointerDown: (e) => {
         e.stopPropagation();
@@ -1381,7 +1441,21 @@ function ResizeHandle() {
       }
     });
   }
-  return jsxRuntime.jsx("div", {
+  return jsxRuntime.jsx(ResizeHandleView, {
+    enabled,
+    onPointerDown: enabled ? onPointerDown : void 0,
+    onPointerMove: enabled ? onPointerMove : void 0,
+    onPointerUp: enabled ? onPointerUp : void 0,
+    onDoubleClick: enabled ? onDoubleClick : void 0
+  });
+}
+function ResizeHandleView(_c) {
+  var _d = _c, {
+    enabled
+  } = _d, props = __objRest(_d, [
+    "enabled"
+  ]);
+  return jsxRuntime.jsx("div", __spreadValues({
     css: {
       alignSelf: "stretch",
       padding: "0 5px",
@@ -1391,16 +1465,12 @@ function ResizeHandle() {
       "&:after": {
         content: '""',
         width: 1,
-        height: "1.2em",
-        background: "currentColor",
+        height: "1.5em",
+        background: "#c9cfda",
         transition: "transform 300ms"
       }
-    },
-    onPointerDown: enabled ? onPointerDown : void 0,
-    onPointerMove: enabled ? onPointerMove : void 0,
-    onPointerUp: enabled ? onPointerUp : void 0,
-    onDoubleClick: enabled ? onDoubleClick : void 0
-  });
+    }
+  }, props));
 }
 const Cell = react.memo(function Cell2({
   itemId,
@@ -1562,7 +1632,7 @@ function SelectComponent({
   return jsxRuntime.jsx(Checkbox, {
     css: {
       justifySelf: "start",
-      color: "inherit"
+      color: "#c9cfda"
     },
     checked: isSelected,
     onChange: toggle2
@@ -1748,23 +1818,11 @@ function throttle(fn, ms) {
     }
   });
 }
-const onAncestorScroll = (x, onScroll) => {
-  const find = (x2) => x2.parentElement ? [x2.parentElement, ...find(x2.parentElement)] : [document];
-  const ancestors = find(x);
-  for (const ancestor of ancestors) {
-    ancestor.addEventListener("scroll", onScroll);
-  }
-  return () => {
-    for (const ancestor of ancestors) {
-      ancestor.removeEventListener("scroll", onScroll);
-    }
-  };
-};
 const findScrollRoot = (x) => {
   const parent = x.parentElement;
   if (!parent)
     return document.documentElement;
-  if (parent.scrollHeight > parent.clientHeight)
+  if (parent.scrollHeight > parent.clientHeight && getComputedStyle(parent).overflowY !== "visible")
     return parent;
   return findScrollRoot(parent);
 };
@@ -1775,15 +1833,15 @@ const relativeOffset = (x, y) => {
     return relativeOffset(x.offsetParent, y) + x.offsetTop;
   return 0;
 };
-function Virtualized(_c) {
-  var _d = _c, {
+function Virtualized(_e) {
+  var _f = _e, {
     header,
     children
-  } = _d, props = __objRest(_d, [
+  } = _f, props = __objRest(_f, [
     "header",
     "children"
   ]);
-  var _a, _b, _c2, _d2;
+  var _a, _b, _c, _d;
   const table = useTableContext();
   const virtual = table.useState("props.virtual");
   const probeRef = react.useRef(null);
@@ -1807,7 +1865,7 @@ function Virtualized(_c) {
     const {
       rowHeight,
       initalRowHeight,
-      overscan = 200,
+      overscan = 100,
       overscanTop,
       overscanBottom
     } = (_a2 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a2 : {};
@@ -1842,15 +1900,20 @@ function Virtualized(_c) {
       before: before2,
       after: after2
     };
+  }, {
+    throttle: 16
   });
-  const throttleScroll = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 500;
+  const throttleScroll = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 16;
   const incCounter = react.useMemo(() => throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
   react.useEffect(() => {
     if (!virtual || !probeRef.current)
       return;
-    return onAncestorScroll(probeRef.current, incCounter);
+    window.addEventListener("scroll", incCounter, true);
+    return () => {
+      window.removeEventListener("scroll", incCounter, true);
+    };
   }, [probeRef.current, incCounter]);
-  (_d2 = (_c2 = table.getState().props).debugRender) == null ? void 0 : _d2.call(_c2, `Virtualalized render ${from} to ${to}`);
+  (_d = (_c = table.getState().props).debugRender) == null ? void 0 : _d.call(_c, `Virtualalized render ${from} to ${to}`);
   return jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
     children: [header, virtual && jsxRuntime.jsx("div", {
       style: {
@@ -1934,7 +1997,7 @@ const TableInner = react.memo(function TableInner2({
   const cssVariables = useCssVariables();
   (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
   return jsxRuntime.jsx(Virtualized, {
-    className: `${classes == null ? void 0 : classes.table}`,
+    className: classes == null ? void 0 : classes.table,
     css: [cssVariables, tableTheme.defaultClasses.table, {
       gridTemplateColumns: [
         fullWidth === "right" || fullWidth === true ? "auto" : "0",
@@ -1955,7 +2018,7 @@ const TableInner = react.memo(function TableInner2({
       }), jsxRuntime.jsxs("div", {
         className: classes == null ? void 0 : classes.headerCell,
         css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky],
-        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export, {})]
+        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export, {}), jsxRuntime.jsx(ResizeHandleView, {})]
       }), jsxRuntime.jsx(ColumnHeaderContext.Provider, {
         children: activeColumns.map((column) => {
           var _a2;
@@ -1964,13 +2027,13 @@ const TableInner = react.memo(function TableInner2({
             children: jsxRuntime.jsxs(ColumnHeader, {
               className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
               css: [tableTheme.defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && tableTheme.defaultClasses.sticky],
-              children: [jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(SortComponent, {
+              children: [jsxRuntime.jsx(SortComponent, {
                 children: column.header
               }), jsxRuntime.jsx("div", {
                 css: {
                   flex: 1
                 }
-              }), jsxRuntime.jsx(ResizeHandle, {})]
+              }), jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(ResizeHandle, {})]
             }, column.id)
           }, column.id);
         })
@@ -1994,13 +2057,13 @@ function toggle(set, value, singleSelect) {
   }
   return newSet;
 }
-function SelectFilter(_e) {
-  var _f = _e, {
+function SelectFilter(_g) {
+  var _h = _g, {
     options: providedOptions,
     stringValue = asString,
     render = stringValue,
     singleSelect
-  } = _f, props = __objRest(_f, [
+  } = _h, props = __objRest(_h, [
     "options",
     "stringValue",
     "render",
@@ -2008,8 +2071,6 @@ function SelectFilter(_e) {
   ]);
   const {
     components: {
-      TextField,
-      Button,
       IconButton,
       Checkbox
     },
@@ -2051,24 +2112,7 @@ function SelectFilter(_e) {
       display: "grid",
       gap: "var(--spacing)"
     },
-    children: [jsxRuntime.jsxs("div", {
-      css: {
-        marginBottom: "var(--spacing)",
-        display: "grid",
-        gridAutoFlow: "column",
-        gap: "var(--spacing)",
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      children: [jsxRuntime.jsx("div", {
-        children: text.selectFilter
-      }), jsxRuntime.jsx(Button, {
-        variant: "contained",
-        onClick: () => onChange(/* @__PURE__ */ new Set()),
-        disabled: value.size === 0,
-        children: text.reset
-      })]
-    }), jsxRuntime.jsx(TextField, {
+    children: [jsxRuntime.jsx(AutoFocusTextField, {
       value: query,
       onChange: (e) => setQuery(e.target.value),
       endIcon: jsxRuntime.jsx(IconButton, {
@@ -2078,18 +2122,28 @@ function SelectFilter(_e) {
       css: {
         marginBottom: "var(--spacing)"
       }
-    }), jsxRuntime.jsx("div", {
+    }), jsxRuntime.jsxs("div", {
       css: {
         maxHeight: "20em",
         overflowY: "auto"
       },
-      children: filtered.map((option, index) => jsxRuntime.jsx(FormControlLabel, {
+      children: [jsxRuntime.jsx(FormControlLabel, {
+        disabled: value.size === 0,
+        control: jsxRuntime.jsx(Checkbox, {
+          disabled: value.size === 0,
+          checked: value.size > 0,
+          onChange: () => onChange(/* @__PURE__ */ new Set())
+        }),
+        label: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: ["<", text.selected(value.size), ">"]
+        })
+      }), filtered.map((option, index) => jsxRuntime.jsx(FormControlLabel, {
         control: jsxRuntime.jsx(Checkbox, {
           checked: value.has(option),
           onChange: () => onChange(toggle(value, option, singleSelect))
         }),
         label: render(option)
-      }, index))
+      }, index))]
     }), filtered.length === 0 && jsxRuntime.jsx("span", {
       css: {
         textAlign: "center"
@@ -2160,6 +2214,7 @@ function useFilter(impl) {
       });
     }
     onChange2 == null ? void 0 : onChange2(value2);
+    setDirtyValue(void 0);
   }, 500), [table]);
   function onChange(value2) {
     setDirtyValue(value2);
@@ -2168,7 +2223,8 @@ function useFilter(impl) {
   react.useEffect(() => delayedUpdate.flush(), [delayedUpdate]);
   return {
     value: dirtyValue != null ? dirtyValue : value,
-    onChange
+    onChange,
+    close: react.useContext(FilterControlContext)
   };
 }
 const textMatch = (text, query) => {
@@ -2190,25 +2246,22 @@ const termMatch = (text, query) => {
     }
   return true;
 };
-function TextFilter(_g) {
-  var _h = _g, {
+function TextFilter(_i) {
+  var _j = _i, {
     compare = textMatch,
     filterBy = asStringOrArray
-  } = _h, props = __objRest(_h, [
+  } = _j, props = __objRest(_j, [
     "compare",
     "filterBy"
   ]);
   const {
     components: {
-      TextField,
-      IconButton,
-      Button
+      IconButton
     },
     icons: {
       Search,
       Clear
-    },
-    text
+    }
   } = useTheme();
   const {
     value = "",
@@ -2223,43 +2276,26 @@ function TextFilter(_g) {
       return compare(value2, filterValue);
     }
   }));
-  return jsxRuntime.jsxs("div", {
+  return jsxRuntime.jsx("div", {
     css: {
       padding: `calc(var(--spacing) * 2)`,
-      display: "grid",
-      gap: "var(--spacing)"
+      display: "grid"
     },
-    children: [jsxRuntime.jsxs("div", {
-      css: {
-        marginBottom: "var(--spacing)",
-        display: "grid",
-        gridAutoFlow: "column",
-        gap: "var(--spacing)",
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      children: [jsxRuntime.jsx("div", {
-        children: text.textFilter
-      }), jsxRuntime.jsx(Button, {
-        variant: "contained",
-        onClick: () => onChange(""),
-        disabled: !value,
-        children: text.reset
-      })]
-    }), jsxRuntime.jsx(TextField, {
+    children: jsxRuntime.jsx(AutoFocusTextField, {
       value,
       onChange: (e) => onChange(e.target.value),
       endIcon: jsxRuntime.jsx(IconButton, {
         onClick: () => onChange(""),
         children: !value ? jsxRuntime.jsx(Search, {}) : jsxRuntime.jsx(Clear, {})
       })
-    })]
+    })
   });
 }
 exports.TableThemeContext = tableTheme.TableThemeContext;
 exports.TableThemeProvider = tableTheme.TableThemeProvider;
 exports.configureTableTheme = tableTheme.configureTableTheme;
 exports.mergeThemes = tableTheme.mergeThemes;
+exports.AutoFocusTextField = AutoFocusTextField;
 exports.ColumnContext = ColumnContext;
 exports.DateFilter = DateFilter;
 exports.SelectFilter = SelectFilter;