@react-fabric/data 1.0.0-beta.28 → 1.0.0-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/table/Table.js +2 -0
  2. package/dist/cjs/table/useResizer.js +4 -4
  3. package/dist/cjs/tree/TreeNode.js +1 -2
  4. package/dist/cjs/tree/useTree.js +3 -1
  5. package/dist/esm/table/Table.js +2 -0
  6. package/dist/esm/table/useResizer.js +4 -4
  7. package/dist/esm/tree/TreeNode.js +1 -2
  8. package/dist/esm/tree/useTree.js +3 -1
  9. package/package.json +6 -6
  10. package/src/table/Table.tsx +5 -1
  11. package/src/table/useResizer.ts +5 -3
  12. package/src/tree/TreeNode.tsx +2 -6
  13. package/src/tree/useTree.ts +1 -1
package/dist/cjs/table/Table.js CHANGED
@@ -108,8 +108,10 @@ var Table = function Table(_ref) {
108
108
  style: {
109
109
  gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
110
110
  },
111
+ "data-ref": "tableScroller",
111
112
  ref: scrollerRef,
112
113
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
114
+ "data-ref": "tableHeader",
113
115
  className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
114
116
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
115
117
  className: wrapperStart,
package/dist/cjs/table/useResizer.js CHANGED
@@ -44,14 +44,14 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
44
44
  /** ***************** attach handlers *******************/
45
45
  var box = colEl.getBoundingClientRect();
46
46
  if (colEl.parentElement != null) {
47
- var _colEl$parentElement;
48
- var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
47
+ var _colEl$closest;
48
+ var parentBox = (_colEl$closest = colEl.closest("[data-ref='tableScroller']")) === null || _colEl$closest === void 0 ? void 0 : _colEl$closest.getBoundingClientRect();
49
49
  if (isRtl) {
50
50
  placeholder.style.left = "unset";
51
- placeholder.style.right = "".concat(box.right - parentBox.right, "px");
51
+ placeholder.style.right = "".concat(parentBox.width - box.right, "px");
52
52
  } else {
53
53
  placeholder.style.right = "unset";
54
- placeholder.style.left = "".concat(box.left - parentBox.left, "px");
54
+ placeholder.style.left = "".concat(box.left, "px");
55
55
  }
56
56
  }
57
57
  placeholder.style.width = "".concat(colEl.offsetWidth, "px");
package/dist/cjs/tree/TreeNode.js CHANGED
@@ -36,7 +36,7 @@ var TreeNode = function TreeNode(_ref) {
36
36
  className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
37
37
  children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
38
38
  viewBox: "0 0 24 24",
39
- className: "fill-tint-200",
39
+ className: "fill-tint-200 rtl:-scale-x-100",
40
40
  children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
41
41
  d: ""
42
42
  }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -69,7 +69,6 @@ var TreeNode = function TreeNode(_ref) {
69
69
  children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
70
70
  className: "flex-initial w-6",
71
71
  children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
72
- rtlFlip: true,
73
72
  icon: core.CoreIcons.spinner,
74
73
  className: "animate-spin text-muted"
75
74
  })
package/dist/cjs/tree/useTree.js CHANGED
@@ -39,7 +39,9 @@ var useTree = function useTree(_ref) {
39
39
  }).map(function (node) {
40
40
  return node.id;
41
41
  });
42
- onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
42
+ setTimeout(function () {
43
+ return onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(expandedList);
44
+ }, 100);
43
45
  }, [onExpandToggle]);
44
46
  var loadChildren = react.useCallback(function (node) {
45
47
  var _node$children;
package/dist/esm/table/Table.js CHANGED
@@ -108,8 +108,10 @@ var Table = function Table(_ref) {
108
108
  style: {
109
109
  gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
110
110
  },
111
+ "data-ref": "tableScroller",
111
112
  ref: scrollerRef,
112
113
  children: [/*#__PURE__*/jsxs("div", {
114
+ "data-ref": "tableHeader",
113
115
  className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
114
116
  children: [/*#__PURE__*/jsxs("div", {
115
117
  className: wrapperStart,
package/dist/esm/table/useResizer.js CHANGED
@@ -44,14 +44,14 @@ var useResizer = function useResizer(colEl, ghostEl, callback) {
44
44
  /** ***************** attach handlers *******************/
45
45
  var box = colEl.getBoundingClientRect();
46
46
  if (colEl.parentElement != null) {
47
- var _colEl$parentElement;
48
- var parentBox = (_colEl$parentElement = colEl.parentElement) === null || _colEl$parentElement === void 0 ? void 0 : _colEl$parentElement.getBoundingClientRect();
47
+ var _colEl$closest;
48
+ var parentBox = (_colEl$closest = colEl.closest("[data-ref='tableScroller']")) === null || _colEl$closest === void 0 ? void 0 : _colEl$closest.getBoundingClientRect();
49
49
  if (isRtl) {
50
50
  placeholder.style.left = "unset";
51
- placeholder.style.right = "".concat(box.right - parentBox.right, "px");
51
+ placeholder.style.right = "".concat(parentBox.width - box.right, "px");
52
52
  } else {
53
53
  placeholder.style.right = "unset";
54
- placeholder.style.left = "".concat(box.left - parentBox.left, "px");
54
+ placeholder.style.left = "".concat(box.left, "px");
55
55
  }
56
56
  }
57
57
  placeholder.style.width = "".concat(colEl.offsetWidth, "px");
package/dist/esm/tree/TreeNode.js CHANGED
@@ -36,7 +36,7 @@ var TreeNode = function TreeNode(_ref) {
36
36
  className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
37
37
  children: /*#__PURE__*/jsxs("svg", {
38
38
  viewBox: "0 0 24 24",
39
- className: "fill-tint-200",
39
+ className: "fill-tint-200 rtl:-scale-x-100",
40
40
  children: [line === 0 && /*#__PURE__*/jsx("path", {
41
41
  d: ""
42
42
  }), !noLines && line === 1 && /*#__PURE__*/jsx("path", {
@@ -69,7 +69,6 @@ var TreeNode = function TreeNode(_ref) {
69
69
  children: [filler, node.loading && /*#__PURE__*/jsx("div", {
70
70
  className: "flex-initial w-6",
71
71
  children: /*#__PURE__*/jsx(Icon, {
72
- rtlFlip: true,
73
72
  icon: CoreIcons.spinner,
74
73
  className: "animate-spin text-muted"
75
74
  })
package/dist/esm/tree/useTree.js CHANGED
@@ -39,7 +39,9 @@ var useTree = function useTree(_ref) {
39
39
  }).map(function (node) {
40
40
  return node.id;
41
41
  });
42
- onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
42
+ setTimeout(function () {
43
+ return onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(expandedList);
44
+ }, 100);
43
45
  }, [onExpandToggle]);
44
46
  var loadChildren = useCallback(function (node) {
45
47
  var _node$children;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/data",
3
- "version": "1.0.0-beta.28",
3
+ "version": "1.0.0-beta.29",
4
4
  "description": "RUF: Data package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -33,10 +33,10 @@
33
33
  "watch": "npm-run-all -p watch:rollup watch:dts"
34
34
  },
35
35
  "dependencies": {
36
- "@react-fabric/core": "^1.0.0-beta.28",
37
- "@react-fabric/date": "^1.0.0-beta.28",
38
- "@react-fabric/form": "^1.0.0-beta.28",
39
- "@react-fabric/utilities": "^1.0.0-beta.28",
36
+ "@react-fabric/core": "^1.0.0-beta.29",
37
+ "@react-fabric/date": "^1.0.0-beta.29",
38
+ "@react-fabric/form": "^1.0.0-beta.29",
39
+ "@react-fabric/utilities": "^1.0.0-beta.29",
40
40
  "@tanstack/react-virtual": "^3.8.6",
41
41
  "classnames": "^2.5.1",
42
42
  "color": "^4.2.3",
@@ -52,5 +52,5 @@
52
52
  "node": ">=18.12.0",
53
53
  "npm": ">=8.19.0"
54
54
  },
55
- "gitHead": "80f9d8a9f96dbd0e7a4287087e23996682bf2c0a"
55
+ "gitHead": "1011b13034b9f8f28c292468aed602217496da4a"
56
56
  }
package/src/table/Table.tsx CHANGED
@@ -142,9 +142,13 @@ export const Table = <T extends KeyValue = KeyValue>({
142
142
  style={{
143
143
  gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
144
144
  }}
145
+ data-ref="tableScroller"
145
146
  ref={scrollerRef}
146
147
  >
147
- <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
148
+ <div
149
+ data-ref="tableHeader"
150
+ className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2"
151
+ >
148
152
  <div className={wrapperStart}>
149
153
  {canExpand && <div className="w-6" />}
150
154
  {checkableRows && (
package/src/table/useResizer.ts CHANGED
@@ -47,13 +47,15 @@ export const useResizer = (
47
47
  /** ***************** attach handlers *******************/
48
48
  const box = colEl.getBoundingClientRect();
49
49
  if (colEl.parentElement != null) {
50
- const parentBox = colEl.parentElement?.getBoundingClientRect();
50
+ const parentBox = colEl
51
+ .closest("[data-ref='tableScroller']")
52
+ ?.getBoundingClientRect() as unknown as DOMRect;
51
53
  if (isRtl) {
52
54
  placeholder.style.left = "unset";
53
- placeholder.style.right = `${box.right - parentBox.right}px`;
55
+ placeholder.style.right = `${parentBox.width - box.right}px`;
54
56
  } else {
55
57
  placeholder.style.right = "unset";
56
- placeholder.style.left = `${box.left - parentBox.left}px`;
58
+ placeholder.style.left = `${box.left}px`;
57
59
  }
58
60
  }
59
61
  placeholder.style.width = `${colEl.offsetWidth}px`;
package/src/tree/TreeNode.tsx CHANGED
@@ -61,7 +61,7 @@ export const TreeNode = ({
61
61
  !noLines && line !== 2 && "before:h-full",
62
62
  )}
63
63
  >
64
- <svg viewBox="0 0 24 24" className="fill-tint-200">
64
+ <svg viewBox="0 0 24 24" className="fill-tint-200 rtl:-scale-x-100">
65
65
  {line === 0 && <path d="" />}
66
66
  {!noLines && line === 1 && (
67
67
  <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />
@@ -107,11 +107,7 @@ export const TreeNode = ({
107
107
  {filler}
108
108
  {node.loading && (
109
109
  <div className="flex-initial w-6">
110
- <Icon
111
- rtlFlip
112
- icon={CoreIcons.spinner}
113
- className="animate-spin text-muted"
114
- />
110
+ <Icon icon={CoreIcons.spinner} className="animate-spin text-muted" />
115
111
  </div>
116
112
  )}
117
113
  {!node.leaf && !node.childFiltered && !node.loading && (
package/src/tree/useTree.ts CHANGED
@@ -113,7 +113,7 @@ export const useTree = <T extends KeyValue>({
113
113
  const expandedList = itemMap
114
114
  .filter((node) => node.open)
115
115
  .map((node) => node.id);
116
- onExpandToggle?.(expandedList);
116
+ setTimeout(() => onExpandToggle?.(expandedList), 100);
117
117
  },
118
118
  [onExpandToggle],
119
119
  );