schummar-table 0.45.3 → 0.46.1

package/dist/index.cjs

@@ -3335,10 +3335,53 @@ function SelectFilter(_a) {
 }
 
 // src/components/table.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
-// src/internalState/tableStateStorage.ts
+// src/hooks/useTableRef.ts
 var import_react23 = require("react");
+function useTableRef(table, ref) {
+  (0, import_react23.useImperativeHandle)(
+    ref,
+    () => ({
+      getSort() {
+        return table.getState().sort;
+      },
+      setSort(sort) {
+        table.update((state) => {
+          state.sort = sort;
+        });
+      },
+      getSelection() {
+        return table.getState().selection;
+      },
+      setSelection(selection) {
+        table.update((state) => {
+          state.selection = selection;
+        });
+      },
+      getExpanded() {
+        return table.getState().expanded;
+      },
+      setExpanded(expanded) {
+        table.update((state) => {
+          state.expanded = expanded;
+        });
+      },
+      getHiddenColumns() {
+        return table.getState().hiddenColumns;
+      },
+      setHiddenColumns(hidden) {
+        table.update((state) => {
+          state.hiddenColumns = hidden;
+        });
+      }
+    }),
+    [table]
+  );
+}
+
+// src/internalState/tableStateStorage.ts
+var import_react24 = require("react");
 
 // src/misc/queue.ts
 var Queue = class {
@@ -3422,9 +3465,9 @@ function parse(value) {
   });
 }
 function useTableStateStorage(table) {
-  const [isHydrated, setIsHydrated] = (0, import_react23.useState)(false);
-  const [q2] = (0, import_react23.useState)(() => new Queue());
-  (0, import_react23.useEffect)(() => {
+  const [isHydrated, setIsHydrated] = (0, import_react24.useState)(false);
+  const [q2] = (0, import_react24.useState)(() => new Queue());
+  (0, import_react24.useEffect)(() => {
     const { persist } = table.getState().props;
     if (!persist) {
       setIsHydrated(true);
@@ -3484,7 +3527,7 @@ function useTableStateStorage(table) {
       isCanceled = true;
     };
   }, [table]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!isHydrated) return;
     return table.subscribe(
       (state) => {
@@ -3545,13 +3588,13 @@ function useTableStateStorage(table) {
 
 // src/internalState/useTableState.ts
 var import_immer6 = require("immer");
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/internalState/calcItems.ts
 var import_immer4 = require("immer");
-var import_react24 = require("react");
+var import_react25 = require("react");
 function calcItems(state) {
-  (0, import_react24.useEffect)(
+  (0, import_react25.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.items,
@@ -3670,7 +3713,7 @@ function calcItems(state) {
 }
 
 // src/internalState/calcProps.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/exporters/serializer.ts
 function defaultSerializer(x) {
@@ -3719,7 +3762,7 @@ var defaultProps = {
 };
 function calcProps(props) {
   const cache = useTableMemo();
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => overrides(defaultProps, calc(props, cache)),
     [props]
   );
@@ -3827,9 +3870,9 @@ function calc(props, cache) {
 }
 
 // src/internalState/cleanupState.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function cleanupState(state) {
-  (0, import_react26.useEffect)(
+  (0, import_react27.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.columns,
@@ -3889,9 +3932,9 @@ function cleanupState(state) {
 }
 
 // src/internalState/filterColumns.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function filterColumns(state) {
-  (0, import_react27.useEffect)(
+  (0, import_react28.useEffect)(
     () => state.addReaction(
       (state2) => [
         state2.props.columns,
@@ -3919,9 +3962,9 @@ function filterColumns(state) {
 }
 
 // src/internalState/normalizeExpanded.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 function normalizeExpanded(table) {
-  (0, import_react28.useEffect)(
+  (0, import_react29.useEffect)(
     () => table.addReaction(
       (state) => [state.props.expandOnlyOne, state.expanded, state.itemsById],
       ([expandOnlyOne, , itemsById], state) => {
@@ -3965,9 +4008,9 @@ function normalizeExpanded(table) {
 }
 
 // src/internalState/syncSelections.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function syncSelections(table) {
-  (0, import_react29.useEffect)(
+  (0, import_react30.useEffect)(
     () => table.addReaction(
       (state) => [state.props.selectSyncChildren, state.selection, state.activeItems],
       ([selectSyncChildren, selection, activeItems], state) => {
@@ -3994,13 +4037,13 @@ function syncSelections(table) {
 
 // src/internalState/watchDisplaySize.ts
 var import_immer5 = require("immer");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var DEFAULT_DISPLAY_SIZES = {
   mobile: 400,
   desktop: Infinity
 };
 function watchDisplaySize(state) {
-  (0, import_react30.useEffect)(
+  (0, import_react31.useEffect)(
     () => state.addReaction(
       (state2) => ({
         displaySizePx: state2.displaySizePx,
@@ -4022,7 +4065,7 @@ function watchDisplaySize(state) {
     ),
     [state]
   );
-  (0, import_react30.useEffect)(
+  (0, import_react31.useEffect)(
     () => state.addReaction(
       (state2) => ({
         props: state2.normalizedProps,
@@ -4041,7 +4084,7 @@ function watchDisplaySize(state) {
 
 // src/internalState/useTableState.ts
 function useTableState(_props) {
-  const [key, setKey] = (0, import_react31.useState)({});
+  const [key, setKey] = (0, import_react32.useState)({});
   const props = calcProps(_props);
   function reset() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -4060,7 +4103,7 @@ function useTableState(_props) {
     }
     (_i = props.onReset) == null ? void 0 : _i.call(props, "table");
   }
-  const state = (0, import_react31.useMemo)(
+  const state = (0, import_react32.useMemo)(
     () => {
       var _a, _b, _c, _d;
       return new Store2({
@@ -4096,7 +4139,7 @@ function useTableState(_props) {
   syncSelections(state);
   cleanupState(state);
   watchDisplaySize(state);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     state.update((state2) => {
       state2.normalizedProps = (0, import_immer6.castDraft)(props);
       if (props.sort) state2.sort = props.sort;
@@ -4190,7 +4233,7 @@ function ColumnFooter() {
 
 // src/components/columnHeader.tsx
 var import_immer7 = require("immer");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/resizeHandle.tsx
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
@@ -4364,7 +4407,7 @@ var ColumnHeaderContext = new StoreScope({
   items: /* @__PURE__ */ new Map()
 });
 function ColumnHeader() {
-  const ref = (0, import_react33.useRef)(null);
+  const ref = (0, import_react34.useRef)(null);
   const columnId = useColumnContext();
   const table = useTableContext();
   const enabled = table.useState((state) => state.props.enableColumnReorder);
@@ -4390,9 +4433,9 @@ function ColumnHeader() {
     };
   });
   const store = ColumnHeaderContext.useStore();
-  const draggingStart = (0, import_react33.useRef)();
-  const clone = (0, import_react33.useRef)();
-  (0, import_react33.useEffect)(() => {
+  const draggingStart = (0, import_react34.useRef)();
+  const clone = (0, import_react34.useRef)();
+  (0, import_react34.useEffect)(() => {
     const div = ref.current;
     if (!div) return;
     store.update((state) => {
@@ -4532,7 +4575,7 @@ function ColumnHeader() {
 }
 
 // src/components/columnSelection.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 function ColumnSelection() {
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
@@ -4547,10 +4590,10 @@ function ColumnSelection() {
   const classes = useTheme((t2) => t2.classes);
   const cssVariables = useCssVariables();
   const table = useTableContext();
-  const reset = (0, import_react35.useContext)(TableResetContext);
+  const reset = (0, import_react36.useContext)(TableResetContext);
   const columns = table.useState((state) => state.props.columns);
   const hiddenColumns = table.useState((state) => state.hiddenColumns);
-  const [anchorElement, setAnchorElement] = (0, import_react35.useState)(null);
+  const [anchorElement, setAnchorElement] = (0, import_react36.useState)(null);
   const toggle2 = (column, state) => {
     const {
       props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange }
@@ -4613,10 +4656,10 @@ function ColumnSelection() {
 }
 
 // src/components/export.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 function Export2() {
-  const { exporters: contextExporters } = (0, import_react36.useContext)(TableSettingsContext);
+  const { exporters: contextExporters } = (0, import_react37.useContext)(TableSettingsContext);
   const table = useTableContext();
   const Button2 = useTheme((t2) => t2.components.Button);
   const IconButton2 = useTheme((t2) => t2.components.IconButton);
@@ -4637,7 +4680,7 @@ function Export2() {
     }
     return state.props.enableExport;
   });
-  const [anchor, setAnchor] = (0, import_react36.useState)(null);
+  const [anchor, setAnchor] = (0, import_react37.useState)(null);
   function execute({ action, exporter }) {
     const { activeColumns, activeItems, items } = table.getState();
     const columns = activeColumns.map((column) => column.exportHeader);
@@ -4707,8 +4750,8 @@ function Export2() {
 }
 
 // src/components/row.tsx
-var import_react39 = require("@emotion/react");
-var import_react40 = require("react");
+var import_react40 = require("@emotion/react");
+var import_react41 = require("react");
 
 // src/misc/calcClassNames.ts
 function calcClassNames(classes, item, index) {
@@ -4727,7 +4770,7 @@ function calcCss(styles, item, index) {
 }
 
 // src/components/cell.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 var defaultWrapCell = (content) => {
   if (typeof content === "string") {
@@ -4735,7 +4778,7 @@ var defaultWrapCell = (content) => {
   }
   return content;
 };
-var Cell = (0, import_react37.memo)(function Cell2({ itemId, rowIndex }) {
+var Cell = (0, import_react38.memo)(function Cell2({ itemId, rowIndex }) {
   var _a;
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -4751,7 +4794,7 @@ var Cell = (0, import_react37.memo)(function Cell2({ itemId, rowIndex }) {
   const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
     throttle: 16
   });
-  (0, import_react37.useLayoutEffect)(() => {
+  (0, import_react38.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render cell", itemId, columnId);
   });
@@ -4763,9 +4806,9 @@ var Cell = (0, import_react37.memo)(function Cell2({ itemId, rowIndex }) {
 });
 
 // src/components/details.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
-var Details = (0, import_react38.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
+var Details = (0, import_react39.forwardRef)(function Details2({ itemId, rowIndex }, ref) {
   const table = useTableContext();
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
@@ -4910,14 +4953,14 @@ function SelectComponent({ itemId }) {
 
 // src/components/row.tsx
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
-var Row = (0, import_react40.memo)(function Row2({
+var Row = (0, import_react41.memo)(function Row2({
   itemId,
   rowIndex
 }) {
   var _a;
   const table = useTableContext();
-  const divRef = (0, import_react40.useRef)(null);
-  const detailsDivRef = (0, import_react40.useRef)(null);
+  const divRef = (0, import_react41.useRef)(null);
+  const detailsDivRef = (0, import_react41.useRef)(null);
   const classes = useTheme((t2) => t2.classes);
   const styles = useTheme((t2) => t2.styles);
   const item = table.useState((state) => state.activeItemsById.get(itemId));
@@ -4950,7 +4993,7 @@ var Row = (0, import_react40.memo)(function Row2({
       hasDetails: state.props.rowDetails instanceof Function ? item2 ? !!state.props.rowDetails(item2.value, rowIndex) : null : !!state.props.rowDetails
     };
   });
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     function update() {
       table.update((state) => {
         if (!divRef.current) {
@@ -4971,14 +5014,14 @@ var Row = (0, import_react40.memo)(function Row2({
       handles.forEach((h2) => h2());
     };
   }, [table, itemId, divRef.current, detailsDivRef.current]);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     var _a2, _b;
     return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render row", itemId);
   });
   if (!item) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react39.ClassNames, { children: ({ css: css4 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: wrapRow(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react40.ClassNames, { children: ({ css: css4 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: wrapRow(
     {
       className: css4([
         subgrid ? {
@@ -5024,7 +5067,7 @@ var Row = (0, import_react40.memo)(function Row2({
 });
 
 // src/components/virtualized.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 var findScrollRoot = (x) => {
   const parent = x.parentElement;
@@ -5051,8 +5094,8 @@ function Virtualized(_a) {
   var _a2, _b2;
   const table = useTableContext();
   const virtual = table.useState((state) => state.props.virtual);
-  const probeRef = (0, import_react41.useRef)(null);
-  const [, setId] = (0, import_react41.useState)({});
+  const probeRef = (0, import_react42.useRef)(null);
+  const [, setId] = (0, import_react42.useState)({});
   const {
     itemIds = [],
     from = 0,
@@ -5104,8 +5147,8 @@ function Virtualized(_a) {
     { throttle: 16 }
   );
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
-  const update = (0, import_react41.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
-  (0, import_react41.useEffect)(() => {
+  const update = (0, import_react42.useMemo)(() => throttle2(() => setId({}), throttleScroll), [throttleScroll]);
+  (0, import_react42.useEffect)(() => {
     var _a3;
     const tableElem = (_a3 = probeRef.current) == null ? void 0 : _a3.parentElement;
     if (!tableElem) return;
@@ -5122,7 +5165,7 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update2, true);
     };
   }, [table, probeRef.current]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!virtual || !probeRef.current) return;
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update, true);
@@ -5131,8 +5174,8 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update, true);
     };
   }, [update, virtual]);
-  (0, import_react41.useEffect)(() => update.cancel, [update]);
-  (0, import_react41.useLayoutEffect)(
+  (0, import_react42.useEffect)(() => update.cancel, [update]);
+  (0, import_react42.useLayoutEffect)(
     () => {
       var _a3, _b3;
       return (_b3 = (_a3 = table.getState().props).debugRender) == null ? void 0 : _b3.call(_a3, `Virtualalized render ${from} to ${to}`);
@@ -5149,16 +5192,18 @@ function Virtualized(_a) {
 
 // src/components/table.tsx
 var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
-function Table(props) {
+var Table = (0, import_react43.forwardRef)(_Table);
+function _Table(props, ref) {
   const [table, resetState] = useTableState(props);
   const [isHydrated, clearStorage] = useTableStateStorage(table);
+  useTableRef(table, ref);
   function reset() {
     return __async(this, null, function* () {
       yield clearStorage();
       resetState();
     });
   }
-  (0, import_react42.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
   });
@@ -5166,8 +5211,8 @@ function Table(props) {
 }
 function TableLoadingState({ isHydrated }) {
   const loadingText = useTheme((t2) => t2.text.loading);
-  const [showLoading, setShowLoading] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [showLoading, setShowLoading] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
@@ -5176,7 +5221,7 @@ function TableLoadingState({ isHydrated }) {
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableInner, { hidden: !isHydrated })
   ] });
 }
-var TableInner = (0, import_react42.memo)(function TableInner2({ hidden }) {
+var TableInner = (0, import_react43.memo)(function TableInner2({ hidden }) {
   const table = useTableContext();
   const fullWidth = table.useState((state) => state.props.fullWidth);
   const visibleColumns = table.useState(
@@ -5210,7 +5255,7 @@ var TableInner = (0, import_react42.memo)(function TableInner2({ hidden }) {
   );
   const cssVariables = useCssVariables();
   const enableClearFiltersButton = table.useState((state) => state.props.enableClearFiltersButton);
-  (0, import_react42.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
   });