@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.
- package/dist/components/forms/input/Input.cjs +1 -2
- package/dist/components/forms/input/Input.js +1 -2
- package/dist/components/table/Table.module.css +16 -1
- package/dist/components/table/components/TableRow.cjs +15 -2
- package/dist/components/table/components/TableRow.js +15 -2
- package/dist/components/table/hooks/useTableRowInteractions.cjs +1 -0
- package/dist/components/table/hooks/useTableRowInteractions.js +1 -0
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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(
|
|
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(
|
|
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;
|