pixel-react 1.10.7 → 1.10.8

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.8",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -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
+ }
@@ -118,46 +118,45 @@ const Table = ({
118
118
  onDragEnd,
119
119
  loadMore = () => {},
120
120
  }: TableProps) => {
121
-
122
121
  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;
122
+
123
+ useEffect(() => {
124
+ const scrollContainer = document.getElementById(
125
+ 'ff-table-scroll-container'
126
+ );
127
+ const firstNode = document.getElementById('ff-table-first-node');
128
+ const lastNode = document.getElementById('ff-table-last-node');
129
+
130
+ // Exit early if data is empty or elements are missing
131
+ if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
132
+ return;
133
+ }
134
+
135
+ observerRef.current = new IntersectionObserver(
136
+ (entries) => {
137
+ entries.forEach((entry) => {
138
+ if (entry.isIntersecting) {
139
+ const direction =
140
+ entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
141
+ loadMore(direction);
142
+ }
143
+ });
144
+ },
145
+ {
146
+ root: scrollContainer,
147
+ rootMargin: '8px',
148
+ threshold: 0.1,
134
149
  }
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]);
150
+ );
151
+
152
+ observerRef.current.observe(firstNode);
153
+ observerRef.current.observe(lastNode);
154
+
155
+ return () => {
156
+ // Cleanup observer
157
+ observerRef.current?.disconnect();
158
+ };
159
+ }, [data, loadMore]);
161
160
 
162
161
  const handleOnclick = (column: ColumnsProps, row: DataProps) => {
163
162
  let { onClick, accessor } = column;
@@ -260,7 +259,7 @@ const Table = ({
260
259
  </tr>
261
260
  </thead>
262
261
  <tbody className="ff-fixed-header-table">
263
- <tr id="ff-table-first-node" />
262
+ <tr id="ff-table-first-node" />
264
263
  {data?.length > 0 &&
265
264
  data?.map((row: any) => (
266
265
  <SortableRow
@@ -275,8 +274,7 @@ const Table = ({
275
274
  draggable={draggable}
276
275
  />
277
276
  ))}
278
- <tr id="ff-table-last-node" />
279
-
277
+ <tr id="ff-table-last-node" />
280
278
  </tbody>
281
279
  </table>
282
280
  {data?.length <= 0 && (
@@ -150,6 +150,7 @@
150
150
  .table-row-add-button {
151
151
  display: inline-flex;
152
152
  z-index: 9999;
153
+ align-items: center;
153
154
  }
154
155
  &:hover {
155
156
  background-color: var(--hover-color);