@dbcdk/react-components 0.0.76 → 0.0.78
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.
|
@@ -149,7 +149,7 @@ const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label,
|
|
|
149
149
|
if ((_a = target.closest('label')) !== null && _a !== void 0 ? _a : target.closest('input'))
|
|
150
150
|
return;
|
|
151
151
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
152
|
-
}, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
|
|
152
|
+
}, children: _jsx(RadioButton, { noContainer: true, name: name, size: "sm", value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
|
|
153
153
|
});
|
|
154
154
|
MenuRadioItem.displayName = 'Menu.RadioItem';
|
|
155
155
|
const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
|
|
@@ -22,21 +22,18 @@
|
|
|
22
22
|
inline-size: 100%;
|
|
23
23
|
text-align: start;
|
|
24
24
|
text-decoration: none;
|
|
25
|
-
|
|
26
|
-
padding-block: var(--spacing-xs);
|
|
25
|
+
padding-block: var(--spacing-xxs);
|
|
27
26
|
padding-inline: var(--spacing-md);
|
|
28
|
-
|
|
27
|
+
margin-block: var(--spacing-2xs);
|
|
28
|
+
min-block-size: var(--component-size-sm);
|
|
29
29
|
background: transparent;
|
|
30
30
|
border: none;
|
|
31
|
-
|
|
32
31
|
font-family: var(--font-family);
|
|
33
32
|
font-size: var(--font-size-sm);
|
|
34
33
|
line-height: var(--line-height-normal);
|
|
35
34
|
color: var(--color-fg-default);
|
|
36
35
|
cursor: pointer;
|
|
37
|
-
|
|
38
|
-
border-radius: var(--border-radius-sm);
|
|
39
|
-
|
|
36
|
+
border-radius: var(--border-radius-md);
|
|
40
37
|
transition:
|
|
41
38
|
background-color var(--transition-fast) var(--ease-standard),
|
|
42
39
|
color var(--transition-fast) var(--ease-standard);
|
|
@@ -56,17 +53,19 @@
|
|
|
56
53
|
.interactiveChild {
|
|
57
54
|
display: block;
|
|
58
55
|
inline-size: 100%;
|
|
59
|
-
border-radius: var(--border-radius-
|
|
56
|
+
border-radius: var(--border-radius-md);
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
|
|
63
60
|
.row > .interactiveChild {
|
|
64
61
|
display: flex;
|
|
65
|
-
align-items:
|
|
62
|
+
align-items: center;
|
|
66
63
|
inline-size: 100%;
|
|
67
|
-
padding-block: var(--spacing-
|
|
64
|
+
padding-block: var(--spacing-xxs);
|
|
68
65
|
padding-inline: var(--spacing-md);
|
|
69
|
-
|
|
66
|
+
margin-block: var(--spacing-2xs);
|
|
67
|
+
min-block-size: var(--component-size-sm);
|
|
68
|
+
border-radius: var(--border-radius-md);
|
|
70
69
|
cursor: pointer;
|
|
71
70
|
}
|
|
72
71
|
|
|
@@ -174,7 +173,7 @@
|
|
|
174
173
|
/* Visual separator row (used by <Menu.Separator />) */
|
|
175
174
|
.separator {
|
|
176
175
|
block-size: 1px;
|
|
177
|
-
margin-block: var(--spacing-
|
|
176
|
+
margin-block: var(--spacing-xxs);
|
|
178
177
|
background: var(--color-border-subtle);
|
|
179
178
|
opacity: 0.8;
|
|
180
179
|
border-radius: 999px;
|
|
@@ -201,7 +200,7 @@
|
|
|
201
200
|
/* Bordered item variant */
|
|
202
201
|
.rowBordered {
|
|
203
202
|
border: 1px solid var(--color-border-default);
|
|
204
|
-
border-radius: var(--border-radius-
|
|
203
|
+
border-radius: var(--border-radius-md);
|
|
205
204
|
overflow: hidden;
|
|
206
205
|
}
|
|
207
206
|
|
|
@@ -250,7 +250,8 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
|
|
|
250
250
|
maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
|
|
251
251
|
visibility: positioned ? undefined : 'hidden',
|
|
252
252
|
}, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
|
|
253
|
-
?
|
|
253
|
+
? // eslint-disable-next-line react-hooks/refs
|
|
254
|
+
children(() => closePopover('api'))
|
|
254
255
|
: children }), document.body)] }));
|
|
255
256
|
});
|
|
256
257
|
Popover.displayName = 'Popover';
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
border: 1px solid var(--color-border-subtle);
|
|
42
42
|
background-color: var(--color-bg-surface);
|
|
43
43
|
border-radius: var(--border-radius-lg);
|
|
44
|
-
padding:
|
|
44
|
+
padding: var(--spacing-xxs);
|
|
45
45
|
z-index: var(--z-popover);
|
|
46
46
|
overflow: auto;
|
|
47
47
|
box-shadow:
|
|
@@ -52,8 +52,3 @@
|
|
|
52
52
|
.content[hidden] {
|
|
53
53
|
display: none;
|
|
54
54
|
}
|
|
55
|
-
|
|
56
|
-
.content svg {
|
|
57
|
-
height: 20px;
|
|
58
|
-
width: 20px;
|
|
59
|
-
}
|