@react-fabric/data 1.0.0-beta.12 → 1.0.0-beta.14

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 (12) hide show
  1. package/dist/cjs/table/BodyCell.js +2 -2
  2. package/dist/cjs/table/BodyRow.js +2 -2
  3. package/dist/cjs/tree/TreeNode.js +17 -14
  4. package/dist/esm/table/BodyCell.js +2 -2
  5. package/dist/esm/table/BodyRow.js +2 -2
  6. package/dist/esm/tree/TreeNode.js +18 -15
  7. package/dist/types/table/types.d.ts +1 -0
  8. package/package.json +6 -6
  9. package/src/table/BodyCell.tsx +3 -2
  10. package/src/table/BodyRow.tsx +2 -1
  11. package/src/table/types.ts +1 -0
  12. package/src/tree/TreeNode.tsx +20 -14
package/dist/cjs/table/BodyCell.js CHANGED
@@ -72,14 +72,14 @@ var BodyCell = function BodyCell(_ref) {
72
72
  return value !== null && value !== void 0 ? value : "";
73
73
  }, [item, column]);
74
74
  return /*#__PURE__*/jsxRuntime.jsx("div", {
75
- className: "overflow-hidden bg-inherit start-0",
75
+ className: "overflow-hidden bg-inherit start-0 border-e",
76
76
  style: {
77
77
  width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
78
78
  minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,
79
79
  maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
80
80
  },
81
81
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
82
- className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
82
+ className: classNames("px-2 py-1", column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
83
83
  children: content
84
84
  })
85
85
  });
package/dist/cjs/table/BodyRow.js CHANGED
@@ -55,14 +55,14 @@ var BodyRow = function BodyRow(_ref) {
55
55
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
56
56
  role: "none",
57
57
  "data-row": index,
58
- 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"),
58
+ 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"),
59
59
  onClick: function onClick() {
60
60
  return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
61
61
  },
62
62
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
63
63
  className: wrapperStart,
64
64
  children: [!!canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
65
- className: classNames("group font-medium w-6 flex flex-nowrap text-start items-center", !canExpand(data) && "pointer-events-none opacity-35"),
65
+ className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
66
66
  children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
67
67
  className: "p-1 text-tint-700 hover:text-primary-600",
68
68
  icon: expanded ? core.CoreIcons.collapse : core.CoreIcons.expand,
package/dist/cjs/tree/TreeNode.js CHANGED
@@ -25,18 +25,21 @@ var TreeNode = function TreeNode(_ref) {
25
25
  }, [node.badge]);
26
26
  var filler = react.useMemo(function () {
27
27
  return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
28
- return /*#__PURE__*/jsxRuntime.jsxs("svg", {
29
- viewBox: "0 0 24 24",
30
- className: "flex-initial w-6 fill-tint-200",
31
- children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
32
- d: ""
33
- }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
34
- d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
35
- }), !noLines && line === 2 && /*#__PURE__*/jsxRuntime.jsx("path", {
36
- d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
37
- }), !noLines && line === 3 && /*#__PURE__*/jsxRuntime.jsx("path", {
38
- d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
39
- })]
28
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
29
+ className: classNames("flex-initial self-stretch flex items-center w-6 relative 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"),
30
+ children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
31
+ viewBox: "0 0 24 24",
32
+ className: "fill-tint-200",
33
+ children: [line === 0 && /*#__PURE__*/jsxRuntime.jsx("path", {
34
+ d: ""
35
+ }), !noLines && line === 1 && /*#__PURE__*/jsxRuntime.jsx("path", {
36
+ d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
37
+ }), !noLines && line === 2 && /*#__PURE__*/jsxRuntime.jsx("path", {
38
+ d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
39
+ }), !noLines && line === 3 && /*#__PURE__*/jsxRuntime.jsx("path", {
40
+ d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
41
+ })]
42
+ })
40
43
  }, idx);
41
44
  });
42
45
  }, [noLines, node.lines]);
@@ -53,7 +56,7 @@ var TreeNode = function TreeNode(_ref) {
53
56
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
54
57
  role: "treeitem",
55
58
  "aria-selected": node.selected,
56
- className: "flex flex-nowrap",
59
+ className: "flex flex-nowrap items-center",
57
60
  "data-testid": node["data-testid"],
58
61
  "data-test-value": node["data-test-value"],
59
62
  children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -77,7 +80,7 @@ var TreeNode = function TreeNode(_ref) {
77
80
  })
78
81
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
79
82
  role: "none",
80
- className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
83
+ className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
81
84
  "data-selected": node.selected,
82
85
  onClick: function onClick() {
83
86
  return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
package/dist/esm/table/BodyCell.js CHANGED
@@ -72,14 +72,14 @@ var BodyCell = function BodyCell(_ref) {
72
72
  return value !== null && value !== void 0 ? value : "";
73
73
  }, [item, column]);
74
74
  return /*#__PURE__*/jsx("div", {
75
- className: "overflow-hidden bg-inherit start-0",
75
+ className: "overflow-hidden bg-inherit start-0 border-e",
76
76
  style: {
77
77
  width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
78
78
  minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : COL_MIN_WIDTH,
79
79
  maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : COL_MAX_WIDTH
80
80
  },
81
81
  children: /*#__PURE__*/jsx("div", {
82
- className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
82
+ className: classNames("px-2 py-1", column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
83
83
  children: content
84
84
  })
85
85
  });
package/dist/esm/table/BodyRow.js CHANGED
@@ -55,14 +55,14 @@ var BodyRow = function BodyRow(_ref) {
55
55
  children: [/*#__PURE__*/jsxs("div", {
56
56
  role: "none",
57
57
  "data-row": index,
58
- 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"),
58
+ 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"),
59
59
  onClick: function onClick() {
60
60
  return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
61
61
  },
62
62
  children: [/*#__PURE__*/jsxs("div", {
63
63
  className: wrapperStart,
64
64
  children: [!!canExpand && /*#__PURE__*/jsx("div", {
65
- className: classNames("group font-medium w-6 flex flex-nowrap text-start items-center", !canExpand(data) && "pointer-events-none opacity-35"),
65
+ className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
66
66
  children: /*#__PURE__*/jsx(Icon, {
67
67
  className: "p-1 text-tint-700 hover:text-primary-600",
68
68
  icon: expanded ? CoreIcons.collapse : CoreIcons.expand,
package/dist/esm/tree/TreeNode.js CHANGED
@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
5
5
  import classNames from 'classnames';
6
6
  import { useMemo } from 'react';
7
- import { jsxs, jsx } from 'react/jsx-runtime';
7
+ import { jsx, jsxs } from 'react/jsx-runtime';
8
8
 
9
9
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
10
10
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25,18 +25,21 @@ var TreeNode = function TreeNode(_ref) {
25
25
  }, [node.badge]);
26
26
  var filler = useMemo(function () {
27
27
  return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
28
- return /*#__PURE__*/jsxs("svg", {
29
- viewBox: "0 0 24 24",
30
- className: "flex-initial w-6 fill-tint-200",
31
- children: [line === 0 && /*#__PURE__*/jsx("path", {
32
- d: ""
33
- }), !noLines && line === 1 && /*#__PURE__*/jsx("path", {
34
- d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
35
- }), !noLines && line === 2 && /*#__PURE__*/jsx("path", {
36
- d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
37
- }), !noLines && line === 3 && /*#__PURE__*/jsx("path", {
38
- d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
39
- })]
28
+ return /*#__PURE__*/jsx("div", {
29
+ className: classNames("flex-initial self-stretch flex items-center w-6 relative 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"),
30
+ children: /*#__PURE__*/jsxs("svg", {
31
+ viewBox: "0 0 24 24",
32
+ className: "fill-tint-200",
33
+ children: [line === 0 && /*#__PURE__*/jsx("path", {
34
+ d: ""
35
+ }), !noLines && line === 1 && /*#__PURE__*/jsx("path", {
36
+ d: "M7.45 26.1v-28.2h1.1v28.2h-1.1z"
37
+ }), !noLines && line === 2 && /*#__PURE__*/jsx("path", {
38
+ d: "M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z"
39
+ }), !noLines && line === 3 && /*#__PURE__*/jsx("path", {
40
+ d: "M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z"
41
+ })]
42
+ })
40
43
  }, idx);
41
44
  });
42
45
  }, [noLines, node.lines]);
@@ -53,7 +56,7 @@ var TreeNode = function TreeNode(_ref) {
53
56
  return /*#__PURE__*/jsxs("div", {
54
57
  role: "treeitem",
55
58
  "aria-selected": node.selected,
56
- className: "flex flex-nowrap",
59
+ className: "flex flex-nowrap items-center",
57
60
  "data-testid": node["data-testid"],
58
61
  "data-test-value": node["data-test-value"],
59
62
  children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsx("div", {
@@ -77,7 +80,7 @@ var TreeNode = function TreeNode(_ref) {
77
80
  })
78
81
  }), /*#__PURE__*/jsxs("div", {
79
82
  role: "none",
80
- className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
83
+ className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
81
84
  "data-selected": node.selected,
82
85
  onClick: function onClick() {
83
86
  return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
package/dist/types/table/types.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps
11
11
  align?: "start" | "center" | "end";
12
12
  locked?: "start" | "end";
13
13
  hidden?: boolean;
14
+ truncate?: boolean;
14
15
  hideable?: boolean;
15
16
  resizable?: boolean;
16
17
  sortable?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/data",
3
- "version": "1.0.0-beta.12",
3
+ "version": "1.0.0-beta.14",
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.12",
37
- "@react-fabric/date": "^1.0.0-beta.12",
38
- "@react-fabric/form": "^1.0.0-beta.12",
39
- "@react-fabric/utilities": "^1.0.0-beta.12",
36
+ "@react-fabric/core": "^1.0.0-beta.14",
37
+ "@react-fabric/date": "^1.0.0-beta.14",
38
+ "@react-fabric/form": "^1.0.0-beta.14",
39
+ "@react-fabric/utilities": "^1.0.0-beta.14",
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": "7f5a400622fb0266331b527b2078d4dc6886c95e"
55
+ "gitHead": "105e7af06bb2ef8f47e0bfbf29fa890c7856f7d8"
56
56
  }
package/src/table/BodyCell.tsx CHANGED
@@ -74,7 +74,7 @@ export const BodyCell = ({
74
74
 
75
75
  return (
76
76
  <div
77
- className="overflow-hidden bg-inherit start-0"
77
+ className="overflow-hidden bg-inherit start-0 border-e"
78
78
  style={{
79
79
  width: width ?? COL_DEFAULT_WIDTH,
80
80
  minWidth: column.minWidth ?? COL_MIN_WIDTH,
@@ -83,7 +83,8 @@ export const BodyCell = ({
83
83
  >
84
84
  <div
85
85
  className={classNames(
86
- "px-2 py-1 border-e truncate",
86
+ "px-2 py-1",
87
+ column.truncate && "truncate",
87
88
  column.align === "center" && "text-center",
88
89
  column.align === "end" && "text-end",
89
90
  )}
package/src/table/BodyRow.tsx CHANGED
@@ -76,6 +76,7 @@ export const BodyRow = ({
76
76
  className={classNames(
77
77
  "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
78
78
  onRowClick && "hover:bg-primary-50 active:bg-primary-100",
79
+ index % 2 ? "bg-even" : "bg-odd",
79
80
  )}
80
81
  onClick={() =>
81
82
  checkableRows && keyProperty && !onRowClick
@@ -87,7 +88,7 @@ export const BodyRow = ({
87
88
  {!!canExpand && (
88
89
  <div
89
90
  className={classNames(
90
- "group font-medium w-6 flex flex-nowrap text-start items-center",
91
+ "group font-medium w-6 flex flex-nowrap text-start py-1",
91
92
  !canExpand(data) && "pointer-events-none opacity-35",
92
93
  )}
93
94
  >
package/src/table/types.ts CHANGED
@@ -45,6 +45,7 @@ export interface TableColumn<T = KeyValue>
45
45
  align?: "start" | "center" | "end";
46
46
  locked?: "start" | "end";
47
47
  hidden?: boolean;
48
+ truncate?: boolean;
48
49
  hideable?: boolean;
49
50
  resizable?: boolean;
50
51
  sortable?: boolean;
package/src/tree/TreeNode.tsx CHANGED
@@ -45,20 +45,26 @@ export const TreeNode = ({
45
45
 
46
46
  const filler = useMemo(() => {
47
47
  return node.lines.slice(noLines ? 1 : 0).map((line, idx) => (
48
- <svg
48
+ <div
49
49
  key={idx}
50
- viewBox="0 0 24 24"
51
- className="flex-initial w-6 fill-tint-200"
52
- >
53
- {line === 0 && <path d="" />}
54
- {!noLines && line === 1 && <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />}
55
- {!noLines && line === 2 && (
56
- <path d="M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z" />
57
- )}
58
- {!noLines && line === 3 && (
59
- <path d="M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z" />
50
+ className={classNames(
51
+ "flex-initial self-stretch flex items-center w-6 relative before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]",
52
+ !noLines && line !== 2 && "before:h-full",
60
53
  )}
61
- </svg>
54
+ >
55
+ <svg viewBox="0 0 24 24" className="fill-tint-200">
56
+ {line === 0 && <path d="" />}
57
+ {!noLines && line === 1 && (
58
+ <path d="M7.45 26.1v-28.2h1.1v28.2h-1.1z" />
59
+ )}
60
+ {!noLines && line === 2 && (
61
+ <path d="M14.989 12.389l0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v14.1l0.161 0.389 0.389 0.161h6.6z" />
62
+ )}
63
+ {!noLines && line === 3 && (
64
+ <path d="M8.55 12.55h6.050l0.389-0.161 0.161-0.389-0.161-0.389-0.389-0.161h-6.050v-13.55h-1.1v28.2h1.1z" />
65
+ )}
66
+ </svg>
67
+ </div>
62
68
  ));
63
69
  }, [noLines, node.lines]);
64
70
 
@@ -82,7 +88,7 @@ export const TreeNode = ({
82
88
  <div
83
89
  role="treeitem"
84
90
  aria-selected={node.selected}
85
- className="flex flex-nowrap"
91
+ className="flex flex-nowrap items-center"
86
92
  data-testid={node["data-testid"]}
87
93
  data-test-value={node["data-test-value"]}
88
94
  >
@@ -119,7 +125,7 @@ export const TreeNode = ({
119
125
  <div
120
126
  role="none"
121
127
  className={classNames(
122
- "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 items-center overflow-hidden select-none",
128
+ "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
123
129
  node.childSelected && "font-medium",
124
130
  canSelect && "hover:bg-primary-50 cursor-pointer",
125
131
  )}