@dbcdk/react-components 0.0.138 → 0.0.139

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.
@@ -152,8 +152,7 @@ const Input = react.forwardRef(function Input2({
152
152
  }
153
153
  ) : null,
154
154
  endAdornment
155
- ] }),
156
- hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
155
+ ] })
157
156
  ]
158
157
  }
159
158
  ),
@@ -146,8 +146,7 @@ const Input = forwardRef(function Input2({
146
146
  }
147
147
  ) : null,
148
148
  endAdornment
149
- ] }),
150
- hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
149
+ ] })
151
150
  ]
152
151
  }
153
152
  ),
@@ -186,6 +186,7 @@
186
186
  background: var(--table-component-row-bg);
187
187
  overflow: hidden;
188
188
  line-height: 20px;
189
+ height: 40px;
189
190
  }
190
191
 
191
192
  .md .headerCell {
@@ -208,6 +209,19 @@
208
209
  padding-inline: var(--spacing-sm);
209
210
  font-size: var(--font-size-xs);
210
211
  line-height: 20px;
212
+ height: 32px;
213
+ }
214
+
215
+ .sm .contextMenuOverlay {
216
+ inset-block: 0;
217
+ min-block-size: 0;
218
+ block-size: min(100%, 32px);
219
+ }
220
+
221
+ .sm .contextMenuTrigger {
222
+ min-block-size: 0;
223
+ block-size: 100%;
224
+ border-radius: 0;
211
225
  }
212
226
 
213
227
  .cell[data-vertical-align='top'] {
@@ -557,6 +571,7 @@
557
571
 
558
572
  .contextMenuAnchorCell {
559
573
  overflow: visible;
574
+ z-index: 1;
560
575
  }
561
576
 
562
577
  .contextMenuAnchorCell .cellValueEllipsis,
@@ -572,7 +587,7 @@
572
587
  align-items: center;
573
588
  justify-content: center;
574
589
  min-inline-size: 40px;
575
- min-block-size: 40px;
590
+ block-size: min(100%, 40px);
576
591
  z-index: 3;
577
592
  }
578
593
 
@@ -162,7 +162,14 @@ function TableRow({
162
162
  children: cellValue
163
163
  }
164
164
  ),
165
- hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
165
+ hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(
166
+ RowContextMenu,
167
+ {
168
+ rowId,
169
+ items: contextMenuItems,
170
+ onRowClick: onRowClick ? () => onRowClick(row) : void 0
171
+ }
172
+ ) : null
166
173
  ]
167
174
  }
168
175
  )
@@ -176,7 +183,8 @@ function TableRow({
176
183
  }
177
184
  function RowContextMenu({
178
185
  rowId,
179
- items
186
+ items,
187
+ onRowClick
180
188
  }) {
181
189
  const toggleRef = react.useRef(null);
182
190
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -189,6 +197,11 @@ function RowContextMenu({
189
197
  e.stopPropagation();
190
198
  (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
191
199
  },
200
+ onContextMenu: (e) => {
201
+ e.preventDefault();
202
+ e.stopPropagation();
203
+ onRowClick == null ? void 0 : onRowClick();
204
+ },
192
205
  children: /* @__PURE__ */ jsxRuntime.jsx(
193
206
  Popover.Popover,
194
207
  {
@@ -156,7 +156,14 @@ function TableRow({
156
156
  children: cellValue
157
157
  }
158
158
  ),
159
- hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
159
+ hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(
160
+ RowContextMenu,
161
+ {
162
+ rowId,
163
+ items: contextMenuItems,
164
+ onRowClick: onRowClick ? () => onRowClick(row) : void 0
165
+ }
166
+ ) : null
160
167
  ]
161
168
  }
162
169
  )
@@ -170,7 +177,8 @@ function TableRow({
170
177
  }
171
178
  function RowContextMenu({
172
179
  rowId,
173
- items
180
+ items,
181
+ onRowClick
174
182
  }) {
175
183
  const toggleRef = useRef(null);
176
184
  return /* @__PURE__ */ jsx(
@@ -183,6 +191,11 @@ function RowContextMenu({
183
191
  e.stopPropagation();
184
192
  (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
185
193
  },
194
+ onContextMenu: (e) => {
195
+ e.preventDefault();
196
+ e.stopPropagation();
197
+ onRowClick == null ? void 0 : onRowClick();
198
+ },
186
199
  children: /* @__PURE__ */ jsx(
187
200
  Popover,
188
201
  {
@@ -14,6 +14,7 @@ function useTableRowInteractions({
14
14
  const handleRowClick = react.useCallback(
15
15
  (e) => {
16
16
  var _a, _b;
17
+ if (e.button !== 0) return;
17
18
  const target = e.target;
18
19
  if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
19
20
  return;
@@ -12,6 +12,7 @@ function useTableRowInteractions({
12
12
  const handleRowClick = useCallback(
13
13
  (e) => {
14
14
  var _a, _b;
15
+ if (e.button !== 0) return;
15
16
  const target = e.target;
16
17
  if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
17
18
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.138",
3
+ "version": "0.0.139",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",