@react-fabric/data 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/cjs/json/JsonViewer.js

@@ -99,6 +99,11 @@ var JsonEntry = function JsonEntry(_ref3) {
         clamp: 3,
         children: ret
       });
+    } else {
+      ret = /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "break-words",
+        children: ret
+      });
     }
     return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [ret, utilities.isObject(value) && value._score_ > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Meter, {
@@ -120,28 +125,30 @@ var JsonEntry = function JsonEntry(_ref3) {
   }, [filters, path, pathWithoutOrdinal]);
   var labelDisplay = react.useMemo(function () {
     var _labeler;
-    return /*#__PURE__*/jsxRuntime.jsx(core.ActionLabel, {
-      className: "text-dimmed text-sm px-2 flex-1 truncate",
-      actions: !canExpand && canFilter ? [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "danger",
-        size: "sm",
-        variant: "link",
-        icon: core.CoreIcons.funnelMinus,
-        "aria-label": "Filter Negative",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
-        }
-      }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        color: "primary",
-        size: "sm",
-        variant: "link",
-        icon: core.CoreIcons.funnelPlus,
-        "aria-label": "Filter",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
-        }
-      }, "positive")] : [],
-      children: (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words"),
+      children: [!canExpand && canFilter && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "hidden pe-1 group-hover:inline-block",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "danger",
+          size: "xs",
+          variant: "link",
+          icon: core.CoreIcons.funnelMinus,
+          "aria-label": "Filter Negative",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+          }
+        }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          color: "primary",
+          size: "xs",
+          variant: "link",
+          icon: core.CoreIcons.funnelPlus,
+          "aria-label": "Filter",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
+          }
+        }, "positive")]
+      }), (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field]
     });
   }, [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
@@ -164,11 +171,14 @@ var JsonEntry = function JsonEntry(_ref3) {
           icon: expanded ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
           size: "xs",
           text: actualValue
-        }), display]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), !showPropertyTree && !children && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("py-2", inline && "flex flex-nowrap items-center"),
@@ -180,11 +190,14 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: labelDisplay
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsxRuntime.jsx(core.Copy, {
           size: "xs",
           text: value
-        }), display]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), expanded && (children === null || children === void 0 ? void 0 : children.map(function (item) {
       return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
@@ -223,7 +236,7 @@ var JsonViewer = function JsonViewer(_ref5) {
     return reduceObject(json);
   }, [json]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(className, "p-4 bg-alternate"),
+    className: classNames(className, "bg-alternate"),
     children: !utilities.isEmpty(json) ? list.map(function (item) {
       return /*#__PURE__*/jsxRuntime.jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
         copy: copy,

package/dist/cjs/virtual/Gallery.js

@@ -152,14 +152,14 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;

package/dist/cjs/virtual/List.js

@@ -141,14 +141,14 @@ var _VirtualList = function _VirtualList(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(index, {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;

package/dist/esm/json/JsonViewer.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { EmptyContent, Text, Meter, ActionLabel, Button, CoreIcons, Icon, Copy } from '@react-fabric/core';
+import { EmptyContent, Text, Meter, Button, CoreIcons, Icon, Copy } from '@react-fabric/core';
 import { isEmpty, isArray, isObject, isNil, Format, isBoolean, isTrue } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useState, Fragment } from 'react';
@@ -99,6 +99,11 @@ var JsonEntry = function JsonEntry(_ref3) {
         clamp: 3,
         children: ret
       });
+    } else {
+      ret = /*#__PURE__*/jsx("div", {
+        className: "break-words",
+        children: ret
+      });
     }
     return /*#__PURE__*/jsxs(Fragment, {
       children: [ret, isObject(value) && value._score_ > 0 && /*#__PURE__*/jsx(Meter, {
@@ -120,28 +125,30 @@ var JsonEntry = function JsonEntry(_ref3) {
   }, [filters, path, pathWithoutOrdinal]);
   var labelDisplay = useMemo(function () {
     var _labeler;
-    return /*#__PURE__*/jsx(ActionLabel, {
-      className: "text-dimmed text-sm px-2 flex-1 truncate",
-      actions: !canExpand && canFilter ? [/*#__PURE__*/jsx(Button, {
-        color: "danger",
-        size: "sm",
-        variant: "link",
-        icon: CoreIcons.funnelMinus,
-        "aria-label": "Filter Negative",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
-        }
-      }, "negative"), /*#__PURE__*/jsx(Button, {
-        color: "primary",
-        size: "sm",
-        variant: "link",
-        icon: CoreIcons.funnelPlus,
-        "aria-label": "Filter",
-        onClick: function onClick() {
-          return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
-        }
-      }, "positive")] : [],
-      children: (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field
+    return /*#__PURE__*/jsxs("div", {
+      className: classNames("text-dimmed text-sm px-2 flex-1 group", inline ? "truncate" : "break-words"),
+      children: [!canExpand && canFilter && /*#__PURE__*/jsxs("div", {
+        className: "hidden pe-1 group-hover:inline-block",
+        children: [/*#__PURE__*/jsx(Button, {
+          color: "danger",
+          size: "xs",
+          variant: "link",
+          icon: CoreIcons.funnelMinus,
+          "aria-label": "Filter Negative",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue, true);
+          }
+        }, "negative"), /*#__PURE__*/jsx(Button, {
+          color: "primary",
+          size: "xs",
+          variant: "link",
+          icon: CoreIcons.funnelPlus,
+          "aria-label": "Filter",
+          onClick: function onClick() {
+            return onFilter === null || onFilter === void 0 ? void 0 : onFilter(pathWithoutOrdinal, actualValue);
+          }
+        }, "positive")]
+      }), (_labeler = labeler === null || labeler === void 0 ? void 0 : labeler(path)) !== null && _labeler !== void 0 ? _labeler : field]
     });
   }, [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter]);
   return /*#__PURE__*/jsxs(Fragment, {
@@ -164,11 +171,14 @@ var JsonEntry = function JsonEntry(_ref3) {
           icon: expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight
         }), labelDisplay]
       }), display && /*#__PURE__*/jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsx(Copy, {
           size: "xs",
           text: actualValue
-        }), display]
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), !showPropertyTree && !children && /*#__PURE__*/jsxs("div", {
       className: classNames("py-2", inline && "flex flex-nowrap items-center"),
@@ -180,11 +190,14 @@ var JsonEntry = function JsonEntry(_ref3) {
         },
         children: labelDisplay
       }), /*#__PURE__*/jsxs("div", {
-        className: classNames("px-2", inline && "flex-1"),
+        className: classNames("px-2 flex flex-nowrap overflow-hidden", inline && "flex-1"),
         children: [canCopy && /*#__PURE__*/jsx(Copy, {
           size: "xs",
           text: value
-        }), display]
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: display
+        })]
       })]
     }), expanded && (children === null || children === void 0 ? void 0 : children.map(function (item) {
       return /*#__PURE__*/jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
@@ -223,7 +236,7 @@ var JsonViewer = function JsonViewer(_ref5) {
     return reduceObject(json);
   }, [json]);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: classNames(className, "p-4 bg-alternate"),
+    className: classNames(className, "bg-alternate"),
     children: !isEmpty(json) ? list.map(function (item) {
       return /*#__PURE__*/jsx(JsonEntry, _objectSpread(_objectSpread({}, item), {}, {
         copy: copy,

package/dist/esm/virtual/Gallery.js

@@ -152,14 +152,14 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;

package/dist/esm/virtual/List.js

@@ -141,14 +141,14 @@ var _VirtualList = function _VirtualList(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(index, {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;

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

@@ -51,7 +51,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
     /**
      * load more callback
      */
-    onLoadMore?: () => void;
+    onLoadMore?: (page?: number) => void;
     /**
      * scroll handler
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.32",
   "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.30",
-    "@react-fabric/date": "^1.0.0-beta.30",
-    "@react-fabric/form": "^1.0.0-beta.30",
-    "@react-fabric/utilities": "^1.0.0-beta.30",
+    "@react-fabric/core": "^1.0.0-beta.32",
+    "@react-fabric/date": "^1.0.0-beta.32",
+    "@react-fabric/form": "^1.0.0-beta.32",
+    "@react-fabric/utilities": "^1.0.0-beta.32",
     "@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": "5b10298b7627c2e56bcccf18100b6d85a02c9b06"
+  "gitHead": "e8ba7088116f5ae253ed989854d6fdaef2ad7507"
 }

package/src/json/JsonViewer.tsx

@@ -22,7 +22,6 @@
  */
 
 import {
-  ActionLabel,
   Button,
   Copy,
   CoreIcons,
@@ -181,6 +180,8 @@ const JsonEntry = ({
       ret = actualValue ? t("json.true") : t("json.false");
     if (ret?.length > 128) {
       ret = <Text clamp={3}>{ret}</Text>;
+    } else {
+      ret = <div className="break-words">{ret}</div>;
     }
 
     return (
@@ -216,37 +217,36 @@ const JsonEntry = ({
 
   const labelDisplay = useMemo(
     () => (
-      <ActionLabel
-        className="text-dimmed text-sm px-2 flex-1 truncate"
-        actions={
-          !canExpand && canFilter
-            ? [
-                <Button
-                  key="negative"
-                  color="danger"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelMinus}
-                  aria-label="Filter Negative"
-                  onClick={() =>
-                    onFilter?.(pathWithoutOrdinal, actualValue, true)
-                  }
-                />,
-                <Button
-                  key="positive"
-                  color="primary"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelPlus}
-                  aria-label="Filter"
-                  onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
-                />,
-              ]
-            : []
-        }
+      <div
+        className={classNames(
+          "text-dimmed text-sm px-2 flex-1 group",
+          inline ? "truncate" : "break-words",
+        )}
       >
+        {!canExpand && canFilter && (
+          <div className="hidden pe-1 group-hover:inline-block">
+            <Button
+              key="negative"
+              color="danger"
+              size="xs"
+              variant="link"
+              icon={CoreIcons.funnelMinus}
+              aria-label="Filter Negative"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
+            />
+            <Button
+              key="positive"
+              color="primary"
+              size="xs"
+              variant="link"
+              icon={CoreIcons.funnelPlus}
+              aria-label="Filter"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
+            />
+          </div>
+        )}
         {labeler?.(path) ?? field}
-      </ActionLabel>
+      </div>
     ),
     [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter],
   );
@@ -283,9 +283,14 @@ const JsonEntry = ({
             {labelDisplay}
           </div>
           {display && (
-            <div className={classNames("px-2", inline && "flex-1")}>
+            <div
+              className={classNames(
+                "px-2 flex flex-nowrap overflow-hidden",
+                inline && "flex-1",
+              )}
+            >
               {canCopy && <Copy size="xs" text={actualValue} />}
-              {display}
+              <div className="flex-1">{display}</div>
             </div>
           )}
         </div>
@@ -309,9 +314,14 @@ const JsonEntry = ({
           >
             {labelDisplay}
           </div>
-          <div className={classNames("px-2", inline && "flex-1")}>
+          <div
+            className={classNames(
+              "px-2 flex flex-nowrap overflow-hidden",
+              inline && "flex-1",
+            )}
+          >
             {canCopy && <Copy size="xs" text={value} />}
-            {display}
+            <div className="flex-1">{display}</div>
           </div>
         </div>
       )}
@@ -356,7 +366,7 @@ export const JsonViewer = <T extends KeyValue = KeyValue>({
   const list = useMemo(() => reduceObject(json), [json]);
 
   return (
-    <div {...rest} className={classNames(className, "p-4 bg-alternate")}>
+    <div {...rest} className={classNames(className, "bg-alternate")}>
       {!isEmpty(json) ? (
         list.map((item) => (
           <JsonEntry

package/src/virtual/Gallery.tsx

@@ -94,7 +94,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: () => void;
+  onLoadMore?: (page?: number) => void;
   /**
    * scroll handler
    */
@@ -248,7 +248,7 @@ const _VirtualGallery = <T extends KeyValue>({
     () => ({
       scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
       },
       hilight(index) {
@@ -256,7 +256,7 @@ const _VirtualGallery = <T extends KeyValue>({
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current

package/src/virtual/List.tsx

@@ -235,14 +235,14 @@ const _VirtualList = <T extends KeyValue>({
     listRef,
     () => ({
       scrollToItem(index) {
-        virtualizer.scrollToIndex(index, { align: "start" });
+        virtualizer.scrollToIndex(index, { align: "auto" });
       },
       hilight(index) {
         scrollerRef.current
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current