@react-fabric/data 1.0.0-beta.41 → 1.0.0-beta.43

package/dist/cjs/table/BodyCell.js

@@ -46,7 +46,7 @@ var BodyCell = function BodyCell(_ref) {
     var _column$dataType;
     var value = utilities.getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
       var _column$valueMap;
@@ -73,7 +73,7 @@ var BodyCell = function BodyCell(_ref) {
     return value !== null && value !== void 0 ? value : "";
   }, [item, column]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "overflow-hidden bg-inherit start-0 border-e",
+    className: "overflow-hidden bg-inherit start-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,

package/dist/cjs/table/BodyRow.js

@@ -55,7 +55,7 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       "data-row": index,
-      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
+      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
       onClick: function onClick() {
         return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
       },

package/dist/cjs/table/Table.js

@@ -159,7 +159,7 @@ var Table = function Table(_ref) {
           })]
         })]
       }), loading && /*#__PURE__*/jsxRuntime.jsx(core.Loading, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "area-content flex flex-col flex-nowrap",
+        className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
         },

package/dist/cjs/table/useVirtualTable.js

@@ -31,13 +31,13 @@ var useVirtualTable = function useVirtualTable(data, options) {
         if (state.allChecked !== 0) {
           state.checked = [];
         } else if (options.keyProperty) {
-          state.checked = data.map(function (item) {
+          state.checked = state.data.map(function (item) {
             return item[options.keyProperty];
           });
         }
         (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
       }
-      var checkList = data.filter(function (hit) {
+      var checkList = state.data.filter(function (hit) {
         return state.checked.includes(hit[options.keyProperty]);
       });
       if (action.type === "groupExpand") {
@@ -52,9 +52,10 @@ var useVirtualTable = function useVirtualTable(data, options) {
           }).flat(2).filter(Boolean);
         }
       }
-      if (action.type === "grouped") {
+      if (action.type === "reset") {
+        state.data = action.data;
         if (action.key) {
-          state.grouped = utilities.groupBy(data, action.key);
+          state.grouped = utilities.groupBy(state.data, action.key);
           state.groups = Object.keys(state.grouped).sort(utilities.compareValues("asc")).map(function (group) {
             return {
               __GROUP__: true,
@@ -68,14 +69,15 @@ var useVirtualTable = function useVirtualTable(data, options) {
             return [group].concat(_toConsumableArray(state.grouped[group.key]));
           }).flat();
         } else {
-          state.items = data;
+          state.items = state.data;
         }
       }
       return _objectSpread(_objectSpread({}, state), {}, {
-        allChecked: checkList.length === data.length ? 1 : state.checked.length ? 2 : 0
+        allChecked: checkList.length === state.data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
-      items: data,
+      data: data,
+      items: [],
       grouped: {},
       groups: [],
       checked: [],
@@ -123,10 +125,11 @@ var useVirtualTable = function useVirtualTable(data, options) {
   }, [state.items]);
   react.useEffect(function () {
     dispatch({
-      type: "grouped",
-      key: options.groupProperty
+      type: "reset",
+      key: options.groupProperty,
+      data: data
     });
-  }, [options.groupProperty]);
+  }, [data, options.groupProperty]);
   react.useEffect(function () {
     var _options$checked;
     dispatch({

package/dist/esm/table/BodyCell.js

@@ -46,7 +46,7 @@ var BodyCell = function BodyCell(_ref) {
     var _column$dataType;
     var value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
       var _column$valueMap;
@@ -73,7 +73,7 @@ var BodyCell = function BodyCell(_ref) {
     return value !== null && value !== void 0 ? value : "";
   }, [item, column]);
   return /*#__PURE__*/jsx("div", {
-    className: "overflow-hidden bg-inherit start-0 border-e",
+    className: "overflow-hidden bg-inherit start-0 border-e group/table-col",
     style: {
       width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
       minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : COL_MIN_WIDTH,

package/dist/esm/table/BodyRow.js

@@ -55,7 +55,7 @@ var BodyRow = function BodyRow(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       "data-row": index,
-      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
+      className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row", onRowClick && "hover:bg-primary-50 active:bg-primary-100", index % 2 ? "bg-even" : "bg-odd"),
       onClick: function onClick() {
         return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
       },

package/dist/esm/table/Table.js

@@ -159,7 +159,7 @@ var Table = function Table(_ref) {
           })]
         })]
       }), loading && /*#__PURE__*/jsx(Loading, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
-        className: "area-content flex flex-col flex-nowrap",
+        className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
         },

package/dist/esm/table/useVirtualTable.js

@@ -31,13 +31,13 @@ var useVirtualTable = function useVirtualTable(data, options) {
         if (state.allChecked !== 0) {
           state.checked = [];
         } else if (options.keyProperty) {
-          state.checked = data.map(function (item) {
+          state.checked = state.data.map(function (item) {
             return item[options.keyProperty];
           });
         }
         (_options$onCheckChang2 = options.onCheckChanged) === null || _options$onCheckChang2 === void 0 || _options$onCheckChang2.call(options, state.checked);
       }
-      var checkList = data.filter(function (hit) {
+      var checkList = state.data.filter(function (hit) {
         return state.checked.includes(hit[options.keyProperty]);
       });
       if (action.type === "groupExpand") {
@@ -52,9 +52,10 @@ var useVirtualTable = function useVirtualTable(data, options) {
           }).flat(2).filter(Boolean);
         }
       }
-      if (action.type === "grouped") {
+      if (action.type === "reset") {
+        state.data = action.data;
         if (action.key) {
-          state.grouped = groupBy(data, action.key);
+          state.grouped = groupBy(state.data, action.key);
           state.groups = Object.keys(state.grouped).sort(compareValues("asc")).map(function (group) {
             return {
               __GROUP__: true,
@@ -68,14 +69,15 @@ var useVirtualTable = function useVirtualTable(data, options) {
             return [group].concat(_toConsumableArray(state.grouped[group.key]));
           }).flat();
         } else {
-          state.items = data;
+          state.items = state.data;
         }
       }
       return _objectSpread(_objectSpread({}, state), {}, {
-        allChecked: checkList.length === data.length ? 1 : state.checked.length ? 2 : 0
+        allChecked: checkList.length === state.data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
-      items: data,
+      data: data,
+      items: [],
       grouped: {},
       groups: [],
       checked: [],
@@ -123,10 +125,11 @@ var useVirtualTable = function useVirtualTable(data, options) {
   }, [state.items]);
   useEffect(function () {
     dispatch({
-      type: "grouped",
-      key: options.groupProperty
+      type: "reset",
+      key: options.groupProperty,
+      data: data
     });
-  }, [options.groupProperty]);
+  }, [data, options.groupProperty]);
   useEffect(function () {
     var _options$checked;
     dispatch({

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 interface DataState<T = KeyValue> {
+    data: T[];
     items: T[];
     grouped: KeyValue<T[]>;
     groups: AnyObject[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.43",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.41",
-    "@react-fabric/date": "^1.0.0-beta.41",
-    "@react-fabric/form": "^1.0.0-beta.41",
-    "@react-fabric/utilities": "^1.0.0-beta.41",
+    "@react-fabric/core": "^1.0.0-beta.43",
+    "@react-fabric/date": "^1.0.0-beta.43",
+    "@react-fabric/form": "^1.0.0-beta.43",
+    "@react-fabric/utilities": "^1.0.0-beta.43",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "bc737416d3c6a217a6b8c47291c3975a22722d80"
+  "gitHead": "92cd2fc5c71e3f0e00a9cff83ff924c51d7adb57"
 }

package/src/table/BodyCell.tsx

@@ -52,7 +52,7 @@ export const BodyCell = ({
   const content = useMemo(() => {
     const value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
       const map = column.valueMap ?? { true: "Yes", false: "no" };
@@ -74,7 +74,7 @@ export const BodyCell = ({
 
   return (
     <div
-      className="overflow-hidden bg-inherit start-0 border-e"
+      className="overflow-hidden bg-inherit start-0 border-e group/table-col"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: column.minWidth ?? COL_MIN_WIDTH,

package/src/table/BodyRow.tsx

@@ -74,7 +74,7 @@ export const BodyRow = ({
         role="none"
         data-row={index}
         className={classNames(
-          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
+          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500 group/table-row",
           onRowClick && "hover:bg-primary-50 active:bg-primary-100",
           index % 2 ? "bg-even" : "bg-odd",
         )}

package/src/table/Table.tsx

@@ -198,7 +198,7 @@ export const Table = <T extends KeyValue = KeyValue>({
         {loading && <Loading />}
         {data.length > 0 && (
           <div
-            className="area-content flex flex-col flex-nowrap"
+            className="area-content flex flex-col flex-nowrap min-h-full"
             style={{ height: totalSize() }}
             ref={refBody}
           >

package/src/table/useVirtualTable.ts

@@ -37,6 +37,7 @@ import {
 } from "react";
 
 interface DataState<T = KeyValue> {
+  data: T[];
   items: T[];
   grouped: KeyValue<T[]>;
   groups: AnyObject[];
@@ -48,7 +49,7 @@ interface DataState<T = KeyValue> {
 type DataAction =
   | { type: "updateState"; checked: AnyObject[] }
   | { type: "groupExpand"; key: AnyObject }
-  | { type: "grouped"; key: AnyObject }
+  | { type: "reset"; key: AnyObject; data: AnyObject[] }
   | { type: "expand"; key: AnyObject }
   | { type: "check"; key: AnyObject }
   | { type: "checkall" };
@@ -85,11 +86,11 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
         if (state.allChecked !== 0) {
           state.checked = [];
         } else if (options.keyProperty) {
-          state.checked = data.map((item) => item[options.keyProperty]);
+          state.checked = state.data.map((item) => item[options.keyProperty]);
         }
         options.onCheckChanged?.(state.checked);
       }
-      const checkList = data.filter((hit) =>
+      const checkList = state.data.filter((hit) =>
         state.checked.includes(hit[options.keyProperty]),
       );
       if (action.type === "groupExpand") {
@@ -106,9 +107,10 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
             .filter(Boolean) as any;
         }
       }
-      if (action.type === "grouped") {
+      if (action.type === "reset") {
+        state.data = action.data;
         if (action.key) {
-          state.grouped = groupBy<T>(data, action.key);
+          state.grouped = groupBy<T>(state.data, action.key);
           state.groups = Object.keys(state.grouped)
             .sort(compareValues("asc"))
             .map((group) => ({
@@ -122,17 +124,22 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
             .map((group) => [group, ...state.grouped[group.key]])
             .flat() as any;
         } else {
-          state.items = data;
+          state.items = state.data;
         }
       }
       return {
         ...state,
         allChecked:
-          checkList.length === data.length ? 1 : state.checked.length ? 2 : 0,
+          checkList.length === state.data.length
+            ? 1
+            : state.checked.length
+              ? 2
+              : 0,
       } as DataState<T>;
     },
     {
-      items: data,
+      data,
+      items: [],
       grouped: {},
       groups: [],
       checked: [],
@@ -188,8 +195,8 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
   );
 
   useEffect(() => {
-    dispatch({ type: "grouped", key: options.groupProperty });
-  }, [options.groupProperty]);
+    dispatch({ type: "reset", key: options.groupProperty, data });
+  }, [data, options.groupProperty]);
 
   useEffect(() => {
     dispatch({ type: "updateState", checked: options.checked ?? [] });