pixel-react 1.10.7 → 1.10.9

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.10.7",
4
+ "version": "1.10.9",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -33,7 +33,6 @@ const ArrowsButton = ({
33
33
  iconButtonSize={24}
34
34
  iconButtonBorderRadius={3}
35
35
  onOptionClick={() => {}}
36
- targetRef={menuOptionRef}
37
36
  treeRowRef={treeRowRef}
38
37
  />
39
38
  </span>
@@ -52,7 +52,7 @@ const calculatePosition = (
52
52
  left,
53
53
  right: window.innerWidth - (left + width),
54
54
  };
55
- const gap = 8; // Required gap
55
+ const gap = 0;
56
56
 
57
57
  switch (dropdownPlacement) {
58
58
  case 'top':
@@ -150,13 +150,13 @@ const MenuOption = ({
150
150
  useEffect(() => {
151
151
  if (targetRef) {
152
152
  const parentDom = getAnchorElement(targetRef);
153
- parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
153
+ parentDom?.classList.toggle('hover', isClicked);
154
154
  }
155
155
 
156
156
  return () => {
157
157
  if (targetRef) {
158
158
  const parentDom = getAnchorElement(targetRef);
159
- parentDom?.classList.remove('ff-menu-parent-hover');
159
+ parentDom?.classList.remove('hover');
160
160
  }
161
161
  };
162
162
  }, [isClicked, targetRef]);
@@ -41,6 +41,20 @@
41
41
  }
42
42
 
43
43
  tbody {
44
+ tr:hover,
45
+ tr.hover {
46
+ background-color: var(--hover-color);
47
+
48
+ .icon-container {
49
+ opacity: 1;
50
+ transform: translateX(0);
51
+ }
52
+
53
+ .ff-table-drag,
54
+ .ff-table-drag-icon {
55
+ opacity: 1;
56
+ }
57
+ }
44
58
  tr {
45
59
  .action-column {
46
60
  opacity: 0;
@@ -75,20 +89,6 @@
75
89
  }
76
90
  }
77
91
 
78
- &:hover {
79
- background-color: var(--hover-color);
80
-
81
- .icon-container {
82
- opacity: 1;
83
- transform: translateX(0);
84
- }
85
-
86
- .ff-table-drag,
87
- .ff-table-drag-icon {
88
- opacity: 1;
89
- }
90
- }
91
-
92
92
  td {
93
93
  position: relative;
94
94
  color: var(--table-column-text-color);
@@ -148,4 +148,4 @@
148
148
  tbody tr.disabled-row {
149
149
  opacity: 0.5;
150
150
  cursor: not-allowed;
151
- }
151
+ }
@@ -40,14 +40,16 @@ const SortableRow = ({
40
40
  transform: CSS.Transform.toString(transform),
41
41
  transition,
42
42
  };
43
+ const key = row._id || row.id;
43
44
  return (
44
45
  <tr
45
46
  ref={setNodeRef}
46
47
  style={style}
47
- key={row._id || row.id}
48
+ key={key}
48
49
  className={classNames(tableBodyRowClass, {
49
50
  'disabled-row': row.disabled,
50
51
  })}
52
+ id={key}
51
53
  >
52
54
  {columns.map((column: any, index: number) => {
53
55
  return (
@@ -118,46 +120,45 @@ const Table = ({
118
120
  onDragEnd,
119
121
  loadMore = () => {},
120
122
  }: TableProps) => {
121
-
122
123
  const observerRef = useRef<IntersectionObserver | null>(null);
123
-
124
- useEffect(() => {
125
- const scrollContainer = document.getElementById(
126
- 'ff-table-scroll-container'
127
- );
128
- const firstNode = document.getElementById('ff-table-first-node');
129
- const lastNode = document.getElementById('ff-table-last-node');
130
-
131
- // Exit early if data is empty or elements are missing
132
- if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
133
- return;
124
+
125
+ useEffect(() => {
126
+ const scrollContainer = document.getElementById(
127
+ 'ff-table-scroll-container'
128
+ );
129
+ const firstNode = document.getElementById('ff-table-first-node');
130
+ const lastNode = document.getElementById('ff-table-last-node');
131
+
132
+ // Exit early if data is empty or elements are missing
133
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
134
+ return;
135
+ }
136
+
137
+ observerRef.current = new IntersectionObserver(
138
+ (entries) => {
139
+ entries.forEach((entry) => {
140
+ if (entry.isIntersecting) {
141
+ const direction =
142
+ entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
143
+ loadMore(direction);
144
+ }
145
+ });
146
+ },
147
+ {
148
+ root: scrollContainer,
149
+ rootMargin: '8px',
150
+ threshold: 0.1,
134
151
  }
135
-
136
- observerRef.current = new IntersectionObserver(
137
- (entries) => {
138
- entries.forEach((entry) => {
139
- if (entry.isIntersecting) {
140
- const direction =
141
- entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
142
- loadMore(direction);
143
- }
144
- });
145
- },
146
- {
147
- root: scrollContainer,
148
- rootMargin: '8px',
149
- threshold: 0.1,
150
- }
151
- );
152
-
153
- observerRef.current.observe(firstNode);
154
- observerRef.current.observe(lastNode);
155
-
156
- return () => {
157
- // Cleanup observer
158
- observerRef.current?.disconnect();
159
- };
160
- }, [data, loadMore]);
152
+ );
153
+
154
+ observerRef.current.observe(firstNode);
155
+ observerRef.current.observe(lastNode);
156
+
157
+ return () => {
158
+ // Cleanup observer
159
+ observerRef.current?.disconnect();
160
+ };
161
+ }, [data, loadMore]);
161
162
 
162
163
  const handleOnclick = (column: ColumnsProps, row: DataProps) => {
163
164
  let { onClick, accessor } = column;
@@ -260,7 +261,7 @@ const Table = ({
260
261
  </tr>
261
262
  </thead>
262
263
  <tbody className="ff-fixed-header-table">
263
- <tr id="ff-table-first-node" />
264
+ <tr id="ff-table-first-node" />
264
265
  {data?.length > 0 &&
265
266
  data?.map((row: any) => (
266
267
  <SortableRow
@@ -275,8 +276,7 @@ const Table = ({
275
276
  draggable={draggable}
276
277
  />
277
278
  ))}
278
- <tr id="ff-table-last-node" />
279
-
279
+ <tr id="ff-table-last-node" />
280
280
  </tbody>
281
281
  </table>
282
282
  {data?.length <= 0 && (
@@ -140,6 +140,21 @@
140
140
  z-index: 2;
141
141
  }
142
142
 
143
+ .ff-table-tree-row:hover,
144
+ .ff-table-tree-row.hover {
145
+ background-color: var(--hover-color);
146
+
147
+ .ff-table-tree-td {
148
+ &:first-child {
149
+ background-color: var(--hover-color);
150
+ }
151
+ }
152
+
153
+ .table-tree-row-action {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ }
157
+ }
143
158
  .ff-table-tree-row {
144
159
  background-color: var(--base-bg-color);
145
160
 
@@ -150,20 +165,7 @@
150
165
  .table-row-add-button {
151
166
  display: inline-flex;
152
167
  z-index: 9999;
153
- }
154
- &:hover {
155
- background-color: var(--hover-color);
156
-
157
- .ff-table-tree-td {
158
- &:first-child {
159
- background-color: var(--hover-color);
160
- }
161
- }
162
-
163
- .table-tree-row-action {
164
- display: inline-flex;
165
- align-items: center;
166
- }
168
+ align-items: center;
167
169
  }
168
170
 
169
171
  &::after {
@@ -1,10 +1,13 @@
1
1
  export const prepareData = (dataObj: any, columnObj: any) => {
2
2
  let cellData = dataObj[columnObj.accessor];
3
3
  if (columnObj.cell) {
4
+ const refId = dataObj._id || dataObj.id;
5
+
4
6
  return columnObj.cell({
5
7
  value: cellData,
6
8
  row: dataObj,
7
9
  column: columnObj.accessor,
10
+ ...(refId && { refId }),
8
11
  });
9
12
  } else if (columnObj.accessor) {
10
13
  return cellData;