@react-fabric/data 1.0.0-beta.18 → 1.0.0-beta.20

package/dist/cjs/histogram/Histogram.js

@@ -71,6 +71,7 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "danger",
             size: "sm",
+            stopPropagation: true,
             icon: core.CoreIcons.funnelMinus,
             "aria-label": "Filter Negative",
             onClick: function onClick() {
@@ -79,6 +80,7 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "primary",
             size: "sm",
+            stopPropagation: true,
             icon: core.CoreIcons.funnelPlus,
             "aria-label": "Filter",
             onClick: function onClick() {

package/dist/cjs/hooks/usePagination.js

@@ -58,9 +58,12 @@ var usePagination = function usePagination(_ref) {
 
   /** ***************** set page *******************/
   react.useEffect(function () {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange === null || onChange === void 0 || onChange(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      var actual = Math.min(currentPage, totalPages - 1);
+      setPage(actual);
+      actual !== currentPage && (onChange === null || onChange === void 0 ? void 0 : onChange(actual));
+    }
+  }, [currentPage, totalRecords, totalPages]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "text-muted",
@@ -72,7 +75,7 @@ var usePagination = function usePagination(_ref) {
     startTransition(function () {
       return onChange === null || onChange === void 0 ? void 0 : onChange(page);
     });
-  }, []);
+  }, [onChange]);
   return {
     page: page,
     totalPages: totalPages,

package/dist/cjs/table/BodyCell.js

@@ -43,6 +43,7 @@ var BodyCell = function BodyCell(_ref) {
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
   var content = react.useMemo(function () {
+    var _column$dataType;
     var value = utilities.getByPath(item, column.id.toString());
     if (column.renderer != null) {
       return column.renderer(item[column.id], item, index);
@@ -60,7 +61,7 @@ var BodyCell = function BodyCell(_ref) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
       return /*#__PURE__*/jsxRuntime.jsx(date.DateDisplay, {
         date: value,
         format: column.format

package/dist/cjs/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       icon: state === 2 ? core.CoreIcons.checkboxInt : state === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",

package/dist/cjs/virtual/Gallery.js

@@ -43,11 +43,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var extraSize = react.useMemo(function () {
     return onLoadMore ? 64 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
@@ -187,7 +187,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
@@ -198,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               index = _ref3.index,
               measureElement = _ref3.measureElement;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex justify-center",
+              className: "flex justify-start",
               "data-index": index,
               ref: measureElement,
               children: columnMap.map(function (col) {

package/dist/cjs/virtual/List.js

@@ -44,11 +44,11 @@ var _VirtualList = function _VirtualList(_ref) {
   var extraSize = react.useMemo(function () {
     return onLoadMore ? 64 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
@@ -177,9 +177,9 @@ var _VirtualList = function _VirtualList(_ref) {
         },
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: orientation === "vertical" ? {

package/dist/esm/histogram/Histogram.js

@@ -71,6 +71,7 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsx(Button, {
             color: "danger",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelMinus,
             "aria-label": "Filter Negative",
             onClick: function onClick() {
@@ -79,6 +80,7 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsx(Button, {
             color: "primary",
             size: "sm",
+            stopPropagation: true,
             icon: CoreIcons.funnelPlus,
             "aria-label": "Filter",
             onClick: function onClick() {

package/dist/esm/hooks/usePagination.js

@@ -58,9 +58,12 @@ var usePagination = function usePagination(_ref) {
 
   /** ***************** set page *******************/
   useEffect(function () {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange === null || onChange === void 0 || onChange(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      var actual = Math.min(currentPage, totalPages - 1);
+      setPage(actual);
+      actual !== currentPage && (onChange === null || onChange === void 0 ? void 0 : onChange(actual));
+    }
+  }, [currentPage, totalRecords, totalPages]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {
       className: "text-muted",
@@ -72,7 +75,7 @@ var usePagination = function usePagination(_ref) {
     startTransition(function () {
       return onChange === null || onChange === void 0 ? void 0 : onChange(page);
     });
-  }, []);
+  }, [onChange]);
   return {
     page: page,
     totalPages: totalPages,

package/dist/esm/table/BodyCell.js

@@ -43,6 +43,7 @@ var BodyCell = function BodyCell(_ref) {
     return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
   }, [widths, column]);
   var content = useMemo(function () {
+    var _column$dataType;
     var value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
       return column.renderer(item[column.id], item, index);
@@ -60,7 +61,7 @@ var BodyCell = function BodyCell(_ref) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes((_column$dataType = column.dataType) !== null && _column$dataType !== void 0 ? _column$dataType : "")) {
       return /*#__PURE__*/jsx(DateDisplay, {
         date: value,
         format: column.format

package/dist/esm/table/CheckboxCell.js

@@ -30,7 +30,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   var state = _ref.state,
     _onClick = _ref.onClick;
   return /*#__PURE__*/jsx("div", {
-    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsx(Icon, {
       icon: state === 2 ? CoreIcons.checkboxInt : state === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
       className: "p-1 text-tint-700 hover:text-primary-600",

package/dist/esm/virtual/Gallery.js

@@ -43,11 +43,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var extraSize = useMemo(function () {
     return onLoadMore ? 64 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = useRef(null);
@@ -187,7 +187,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         },
         children: /*#__PURE__*/jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsx("div", {
             style: {
@@ -198,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               index = _ref3.index,
               measureElement = _ref3.measureElement;
             return /*#__PURE__*/jsx("div", {
-              className: "flex justify-center",
+              className: "flex justify-start",
               "data-index": index,
               ref: measureElement,
               children: columnMap.map(function (col) {

package/dist/esm/virtual/List.js

@@ -44,11 +44,11 @@ var _VirtualList = function _VirtualList(_ref) {
   var extraSize = useMemo(function () {
     return onLoadMore ? 64 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = useRef(null);
@@ -177,9 +177,9 @@ var _VirtualList = function _VirtualList(_ref) {
         },
         children: [/*#__PURE__*/jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsx("div", {
             style: orientation === "vertical" ? {

package/dist/types/virtual/Gallery.d.ts

@@ -7,7 +7,7 @@ export interface VirtualGalleryRef {
 }
 export interface VirtualGalleryProps<T> extends TestProps {
     children: (props: {
-        data: T;
+        item: T;
         index: number;
         isLast: boolean;
     }) => ReactElement;

package/dist/types/virtual/List.d.ts

@@ -7,7 +7,7 @@ export interface VirtualListRef {
 }
 export interface VirtualListProps<T> extends TestProps {
     children: (props: {
-        data: T;
+        item: T;
         index: number;
         isLast: boolean;
     }) => ReactElement;

package/package.json

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

package/src/histogram/Histogram.tsx

@@ -150,6 +150,7 @@ export const Histogram = ({
                 key="negative"
                 color="danger"
                 size="sm"
+                stopPropagation
                 icon={CoreIcons.funnelMinus}
                 aria-label="Filter Negative"
                 onClick={() => onClick?.(item.id, true)}
@@ -158,6 +159,7 @@ export const Histogram = ({
                 key="positive"
                 color="primary"
                 size="sm"
+                stopPropagation
                 icon={CoreIcons.funnelPlus}
                 aria-label="Filter"
                 onClick={() => onClick?.(item.id)}

package/src/hooks/usePagination.tsx

@@ -111,9 +111,12 @@ export const usePagination = ({
 
   /** ***************** set page *******************/
   useEffect(() => {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange?.(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      const actual = Math.min(currentPage, totalPages - 1);
+      setPage(actual);
+      actual !== currentPage && onChange?.(actual);
+    }
+  }, [currentPage, totalRecords, totalPages]);
 
   const headLabel = useMemo(
     () => (
@@ -126,10 +129,13 @@ export const usePagination = ({
     [page, perPage, totalRecords],
   );
 
-  const onPageChange = useCallback((page: number) => {
-    setPage(page);
-    startTransition(() => onChange?.(page));
-  }, []);
+  const onPageChange = useCallback(
+    (page: number) => {
+      setPage(page);
+      startTransition(() => onChange?.(page));
+    },
+    [onChange],
+  );
 
   return { page, totalPages, headLabel, ranges, onPageChange };
 };

package/src/table/BodyCell.tsx

@@ -63,7 +63,7 @@ export const BodyCell = ({
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes(column.dataType ?? "")) {
       return <DateDisplay date={value} format={column.format} />;
     }
     if (column.dataType === "number") {

package/src/table/CheckboxCell.tsx

@@ -31,7 +31,7 @@ export const CheckboxCell = ({
   onClick?: () => void;
 }) => {
   return (
-    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+    <div className="group font-medium border-e w-6 flex flex-nowrap text-start py-1">
       <Icon
         icon={
           state === 2

package/src/virtual/Gallery.tsx

@@ -50,7 +50,7 @@ export interface VirtualGalleryRef {
 
 export interface VirtualGalleryProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -124,15 +124,15 @@ const _VirtualGallery = <T extends KeyValue>({
   const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -308,13 +308,13 @@ const _VirtualGallery = <T extends KeyValue>({
         >
           <div
             style={{
-              height: virtualizer.getTotalSize(),
+              height: virtualizer.getTotalSize() + extraSize,
             }}
           >
             <div style={{ height: virtualItems[0]?.start }} />
             {virtualItems.map(({ key, index, measureElement }) => (
               <div
-                className="flex justify-center"
+                className="flex justify-start"
                 key={key}
                 data-index={index}
                 ref={measureElement}

package/src/virtual/List.tsx

@@ -57,7 +57,7 @@ export interface VirtualListRef {
 
 export interface VirtualListProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -135,11 +135,11 @@ const _VirtualList = <T extends KeyValue>({
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -290,8 +290,8 @@ const _VirtualList = <T extends KeyValue>({
           <div
             style={
               orientation === "vertical"
-                ? { height: virtualizer.getTotalSize() }
-                : { width: virtualizer.getTotalSize() }
+                ? { height: virtualizer.getTotalSize() + extraSize }
+                : { width: virtualizer.getTotalSize() + extraSize }
             }
           >
             <div