@phpsoftbox/react-softbox 2.8.0 → 2.8.2
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/README.md +3 -3
- package/dist/components/Card/Card.d.ts +3 -0
- package/dist/components/Card/Card.js +5 -0
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/hooks/useDropdownPosition.js +23 -7
- package/dist/hooks/useDropdownPosition.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/docs/card.md +14 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -185,7 +185,7 @@ Custom variants задаются через `--variant-{name}-*` токены:
|
|
|
185
185
|
|
|
186
186
|
`Card.Toolbar` по умолчанию (`inset=true`) — панель в скруглённой рамке: при размещении непосредственно в Card её внешний отступ равен отступу секций, а края рамки выровнены с контентом Header/Body. `inset={false}` — полоса на всю ширину без боковых границ и скруглений; её контент получает боковой padding Card и выровнен с Header/Body. `dividerTop` и `dividerBottom` независимо управляют верхней и нижней границами (по умолчанию равны `inset`). `Card.Toolbar.Group divider="none|left|right|both"` задаёт боковые разделители (по умолчанию `none`). Group должен находиться внутри Toolbar, в том числе через Grid/Row.
|
|
187
187
|
|
|
188
|
-
Для колонок используйте Grid, для ряда с переносами — Row. Toolbar не добавляет обёрток и не управляет шириной колонок.
|
|
188
|
+
Для колонок используйте Grid, для ряда с переносами — `Card.Toolbar.Row` (wrap включён, gap согласован с Group.divider). Обычный Row остаётся универсальным. Toolbar не добавляет обёрток и не управляет шириной колонок.
|
|
189
189
|
|
|
190
190
|
```tsx
|
|
191
191
|
<Card.Toolbar inset={false} dividerBottom>
|
|
@@ -205,13 +205,13 @@ Custom variants задаются через `--variant-{name}-*` токены:
|
|
|
205
205
|
|
|
206
206
|
```tsx
|
|
207
207
|
<Card.Toolbar inset={false}>
|
|
208
|
-
<Row justify="space-between"
|
|
208
|
+
<Card.Toolbar.Row justify="space-between">
|
|
209
209
|
<Text>Всего записей: 5</Text>
|
|
210
210
|
<Card.Toolbar.Group>
|
|
211
211
|
<Card.Toolbar.Button label="Экспорт" />
|
|
212
212
|
<Card.Toolbar.Button label="Добавить" />
|
|
213
213
|
</Card.Toolbar.Group>
|
|
214
|
-
</Row>
|
|
214
|
+
</Card.Toolbar.Row>
|
|
215
215
|
</Card.Toolbar>
|
|
216
216
|
```
|
|
217
217
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import Row from '../Flex/Row';
|
|
2
3
|
import type { ButtonProps } from '../Button/Button';
|
|
3
4
|
type CardProps = React.HTMLAttributes<HTMLDivElement>;
|
|
4
5
|
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -35,6 +36,7 @@ export type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
35
36
|
/** Explicit side dividers, independent of layout. Defaults to none. */
|
|
36
37
|
divider?: 'none' | 'left' | 'right' | 'both';
|
|
37
38
|
};
|
|
39
|
+
export type CardToolbarRowProps = React.ComponentProps<typeof Row>;
|
|
38
40
|
type CardToolbarButtonBaseProps<TElement extends React.ElementType = 'button'> = Omit<ButtonProps<TElement>, 'children'> & {
|
|
39
41
|
icon?: React.ReactNode;
|
|
40
42
|
label?: React.ReactNode;
|
|
@@ -53,6 +55,7 @@ export type CardToolbarButtonProps<TElement extends React.ElementType = 'button'
|
|
|
53
55
|
});
|
|
54
56
|
type CardToolbarButtonComponent = <TElement extends React.ElementType = 'button'>(props: CardToolbarButtonProps<TElement>) => React.ReactElement | null;
|
|
55
57
|
type CardToolbarComponent = React.FC<CardToolbarProps> & {
|
|
58
|
+
Row: React.FC<CardToolbarRowProps>;
|
|
56
59
|
Group: React.FC<CardToolbarGroupProps>;
|
|
57
60
|
Button: CardToolbarButtonComponent;
|
|
58
61
|
};
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import styles from './Card.module.css';
|
|
4
4
|
import Button from '../Button/Button';
|
|
5
|
+
import Row from '../Flex/Row';
|
|
5
6
|
function CardBase({ className, ...props }) {
|
|
6
7
|
const classes = [styles.card, className].filter(Boolean).join(' ');
|
|
7
8
|
return _jsx("section", { className: classes, ...props });
|
|
@@ -83,6 +84,9 @@ function CardToolbarButton({ icon, label, hideLabelOn, size, appearance, classNa
|
|
|
83
84
|
const ToolbarButtonComponent = Button;
|
|
84
85
|
return (_jsxs(ToolbarButtonComponent, { size: resolvedSize, appearance: resolvedAppearance, className: classes, "data-card-toolbar-button-icon-only": isIconOnly ? 'true' : undefined, ...props, children: [hasIcon ? (_jsx("span", { className: styles.toolbarButtonIcon, "data-card-toolbar-button-slot": "icon", children: icon })) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, "data-card-toolbar-button-slot": "label", children: label })) : null] }));
|
|
85
86
|
}
|
|
87
|
+
function CardToolbarRow({ gap = 'var(--card-toolbar-group-divider-gap, var(--spacing-2))', wrap = 'wrap', ...props }) {
|
|
88
|
+
return _jsx(Row, { gap: gap, wrap: wrap, ...props });
|
|
89
|
+
}
|
|
86
90
|
function CardToolbarGroup({ attached = false, divider = 'none', className, role, ...props }) {
|
|
87
91
|
const toolbar = React.useContext(CardToolbarContext);
|
|
88
92
|
if (!toolbar) {
|
|
@@ -100,6 +104,7 @@ function CardToolbarGroup({ attached = false, divider = 'none', className, role,
|
|
|
100
104
|
return _jsx("div", { className: classes, role: resolvedRole, ...props });
|
|
101
105
|
}
|
|
102
106
|
const CardToolbar = Object.assign(CardToolbarBase, {
|
|
107
|
+
Row: CardToolbarRow,
|
|
103
108
|
Group: CardToolbarGroup,
|
|
104
109
|
Button: CardToolbarButton,
|
|
105
110
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,18 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
3
3
|
const fixedPositionSettleMs = 500;
|
|
4
|
+
const isSameStyle = (a, b) => {
|
|
5
|
+
const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
|
|
6
|
+
for (const key of keys) {
|
|
7
|
+
if (a[key] !== b[key]) {
|
|
8
|
+
return false;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return true;
|
|
12
|
+
};
|
|
4
13
|
export default function useDropdownPosition(open, options = {}) {
|
|
5
14
|
const { gap = 8, align = 'right', placement: requestedPlacement = 'auto', anchorRef, strategy = 'absolute' } = options;
|
|
6
15
|
const ref = React.useRef(null);
|
|
7
16
|
const lockedPlacementRef = React.useRef(null);
|
|
8
|
-
const [style,
|
|
17
|
+
const [style, setStyleState] = React.useState({});
|
|
18
|
+
const setStyle = React.useCallback((next) => {
|
|
19
|
+
setStyleState((prev) => (isSameStyle(prev, next) ? prev : next));
|
|
20
|
+
}, []);
|
|
9
21
|
const [currentPlacement, setCurrentPlacement] = React.useState('down');
|
|
10
22
|
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
11
23
|
const compute = React.useCallback(() => {
|
|
12
24
|
if (!ref.current) {
|
|
13
25
|
return;
|
|
14
26
|
}
|
|
15
|
-
const
|
|
27
|
+
const element = ref.current;
|
|
28
|
+
const rect = element.getBoundingClientRect();
|
|
29
|
+
// Натуральная высота контента, не зависящая от уже применённого max-height.
|
|
30
|
+
const contentHeight = element.scrollHeight + (element.offsetHeight - element.clientHeight);
|
|
16
31
|
const anchorRect = anchorRef?.current?.getBoundingClientRect() ?? rect;
|
|
17
32
|
const padding = 12;
|
|
18
33
|
const availableWidth = window.innerWidth - padding * 2;
|
|
@@ -34,7 +49,7 @@ export default function useDropdownPosition(open, options = {}) {
|
|
|
34
49
|
maxWidth = availableWidth;
|
|
35
50
|
}
|
|
36
51
|
if (requestedPlacement === 'auto' && !lockedPlacementRef.current) {
|
|
37
|
-
if (
|
|
52
|
+
if (contentHeight > availableBelow && availableAbove > availableBelow) {
|
|
38
53
|
nextPlacement = 'up';
|
|
39
54
|
}
|
|
40
55
|
}
|
|
@@ -45,17 +60,18 @@ export default function useDropdownPosition(open, options = {}) {
|
|
|
45
60
|
lockedPlacementRef.current = nextPlacement;
|
|
46
61
|
}
|
|
47
62
|
const availableSpace = nextPlacement === 'up' ? availableAbove : availableBelow;
|
|
48
|
-
if (availableSpace > 0 &&
|
|
63
|
+
if (availableSpace > 0 && contentHeight > availableSpace) {
|
|
49
64
|
maxHeight = Math.max(140, availableSpace);
|
|
50
65
|
}
|
|
66
|
+
const height = maxHeight ? Math.min(contentHeight, maxHeight) : contentHeight;
|
|
51
67
|
setCurrentPlacement(nextPlacement);
|
|
52
68
|
if (strategy === 'fixed' && anchorRef?.current) {
|
|
53
69
|
const anchor = anchorRef.current.getBoundingClientRect();
|
|
54
70
|
let left = align === 'right' ? anchor.right - rect.width : anchor.left;
|
|
55
71
|
const maxLeft = window.innerWidth - padding - rect.width;
|
|
56
72
|
left = clamp(left, padding, Math.max(padding, maxLeft));
|
|
57
|
-
let top = nextPlacement === 'down' ? anchor.bottom + gap : anchor.top -
|
|
58
|
-
const maxTop = window.innerHeight - padding -
|
|
73
|
+
let top = nextPlacement === 'down' ? anchor.bottom + gap : anchor.top - height - gap;
|
|
74
|
+
const maxTop = window.innerHeight - padding - height;
|
|
59
75
|
top = clamp(top, padding, Math.max(padding, maxTop));
|
|
60
76
|
setStyle({
|
|
61
77
|
position: 'fixed',
|
|
@@ -77,7 +93,7 @@ export default function useDropdownPosition(open, options = {}) {
|
|
|
77
93
|
bottom: nextPlacement === 'up' ? `calc(100% + ${gap}px)` : 'auto',
|
|
78
94
|
transformOrigin: `${nextPlacement === 'up' ? 'bottom' : 'top'} ${align}`,
|
|
79
95
|
});
|
|
80
|
-
}, [gap, align, requestedPlacement, anchorRef, strategy]);
|
|
96
|
+
}, [gap, align, requestedPlacement, anchorRef, strategy, setStyle]);
|
|
81
97
|
useIsomorphicLayoutEffect(() => {
|
|
82
98
|
if (!open) {
|
|
83
99
|
lockedPlacementRef.current = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../src/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,yBAAyB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;AAC1G,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAa,EAAE,UAAmB,EAAE;IAC9E,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,EAAE,kBAAkB,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,OAAO,CAAC;IACvH,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAuB,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../src/hooks/useDropdownPosition.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { default as Button } from './components/Button/Button';
|
|
|
2
2
|
export type { ButtonAppearance, ButtonGroupOrientation, ButtonGroupProps, ButtonProps, ButtonSize, ButtonSplitMainProps, ButtonSplitMenuAlign, ButtonSplitMenuItem, ButtonSplitMenuProps, ButtonSplitProps, ButtonVariant, } from './components/Button/Button';
|
|
3
3
|
export { default as Badge } from './components/Badge/Badge';
|
|
4
4
|
export { default as Card } from './components/Card/Card';
|
|
5
|
-
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, } from './components/Card/Card';
|
|
5
|
+
export type { CardToolbarButtonProps, CardToolbarGroupProps, CardToolbarProps, CardToolbarRowProps, } from './components/Card/Card';
|
|
6
6
|
export { default as CollapseButton } from './components/CollapseButton/CollapseButton';
|
|
7
7
|
export { default as Collapse } from './components/Collapse/Collapse';
|
|
8
8
|
export { default as FormField } from './components/Input/FormField/FormField';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAc/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAc/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAOzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAO3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AA+B/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
package/docs/card.md
CHANGED
|
@@ -133,7 +133,7 @@ Header использует CSS Grid для прямых слотов. Прои
|
|
|
133
133
|
|
|
134
134
|
```tsx
|
|
135
135
|
<Card.Toolbar>
|
|
136
|
-
<Row
|
|
136
|
+
<Card.Toolbar.Row>
|
|
137
137
|
<Card.Toolbar.Group attached>
|
|
138
138
|
<Card.Toolbar.Button label="Обзор" />
|
|
139
139
|
<Card.Toolbar.Button label="Метрики" />
|
|
@@ -148,7 +148,7 @@ Header использует CSS Grid для прямых слотов. Прои
|
|
|
148
148
|
<Card.Toolbar.Group divider="left">
|
|
149
149
|
<Card.Toolbar.Button aria-label="Настройки" icon={<SettingsIcon />} />
|
|
150
150
|
</Card.Toolbar.Group>
|
|
151
|
-
</Row>
|
|
151
|
+
</Card.Toolbar.Row>
|
|
152
152
|
</Card.Toolbar>
|
|
153
153
|
```
|
|
154
154
|
|
|
@@ -161,13 +161,13 @@ Header использует CSS Grid для прямых слотов. Прои
|
|
|
161
161
|
|
|
162
162
|
`divider="none" | "left" | "right" | "both"` задаёт боковые линии конкретной группы, по умолчанию `none`. Линии занимают высоту группы, а отступ от линии до контента задаётся `--card-toolbar-group-divider-gap` (по умолчанию `--spacing-2`). Проп совместим с `attached` и не зависит от выравнивания, вложенности или положения группы в строке. Left/right обозначают физические стороны.
|
|
163
163
|
|
|
164
|
-
Для одинаковых расстояний по обе стороны линии между соседними группами
|
|
164
|
+
Для одинаковых расстояний по обе стороны линии между соседними группами используйте `Card.Toolbar.Row`: он согласует gap с отступами Group по умолчанию. Обычный Row остаётся универсальным: например, его gap 16px и padding группы 8px дадут асимметрию. В Grid с растянутыми колонками свободное место в колонке также влияет на расстояние до контента; для плотного ряда групп используйте Row.
|
|
165
165
|
|
|
166
166
|
Group требует предка Card.Toolbar, но между ними могут находиться Grid, Row и пользовательские компоненты. Без Toolbar компонент выдаёт понятную ошибку. Текст и отдельные кнопки не обязательно оборачивать в Group.
|
|
167
167
|
|
|
168
168
|
При переносе явно заданные боковые линии сохраняются. Автоматических разделителей между группами и строками нет. Для адаптивного изменения линий используйте класс/style группы; не задавайте одновременно right и left у соседних групп, если нужна одна общая линия.
|
|
169
169
|
|
|
170
|
-
Для колонок используйте Grid, для ряда с переносами — Row
|
|
170
|
+
Для колонок используйте Grid, для ряда с переносами — `Card.Toolbar.Row`. Toolbar не добавляет обёрток и не управляет шириной колонок.
|
|
171
171
|
|
|
172
172
|
```tsx
|
|
173
173
|
<Card.Toolbar inset={false} dividerBottom>
|
|
@@ -187,24 +187,30 @@ Group требует предка Card.Toolbar, но между ними мог
|
|
|
187
187
|
|
|
188
188
|
```tsx
|
|
189
189
|
<Card.Toolbar inset={false}>
|
|
190
|
-
<Row justify="space-between"
|
|
190
|
+
<Card.Toolbar.Row justify="space-between">
|
|
191
191
|
<Text>Всего записей: 5</Text>
|
|
192
192
|
<Card.Toolbar.Group>
|
|
193
193
|
<Card.Toolbar.Button label="Экспорт" />
|
|
194
194
|
<Card.Toolbar.Button label="Добавить" />
|
|
195
195
|
</Card.Toolbar.Group>
|
|
196
|
-
</Row>
|
|
196
|
+
</Card.Toolbar.Row>
|
|
197
197
|
</Card.Toolbar>
|
|
198
198
|
```
|
|
199
199
|
|
|
200
200
|
Для трёх зон с геометрически центрированной средней колонкой задайте Grid `grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)`. На узком экране переключайте колонки через CSS media query. Готовые примеры есть в playground.
|
|
201
201
|
|
|
202
|
+
### Toolbar.Row
|
|
203
|
+
|
|
204
|
+
Обёртка над обычным Row без дополнительных DOM-элементов. По умолчанию `gap="var(--card-toolbar-group-divider-gap, var(--spacing-2))"`, `wrap="wrap"`, `align="center"`, `justify="flex-start"`.
|
|
205
|
+
|
|
206
|
+
Принимает все пропсы Row, включая числовой или строковый gap, className, style и HTML/ARIA-атрибуты; экспортируется тип `CardToolbarRowProps`. Любой параметр можно переопределить. Явный gap меняет только расстояние между группами. Чтобы одновременно изменить gap и отступы до линий, задайте `--card-toolbar-group-divider-gap` на Toolbar или Toolbar.Row. Пропы и значения по умолчанию универсального Row не изменены.
|
|
207
|
+
|
|
202
208
|
### Переход со старого Toolbar
|
|
203
209
|
|
|
204
210
|
- Удалены `align`, `dividers`, `Card.Toolbar.Section` и типы `CardToolbarSectionAlign`/`CardToolbarSectionProps`.
|
|
205
|
-
- Вместо `align="between"` используйте `Row justify="space-between"`; вместо left/right — `justify="flex-start"`/`"flex-end"`.
|
|
211
|
+
- Вместо `align="between"` используйте `Card.Toolbar.Row justify="space-between"`; вместо left/right — `justify="flex-start"`/`"flex-end"`.
|
|
206
212
|
- Вместо Section используйте колонки Grid. Grid/Row — непосредственные дети Toolbar, без служебных обёрток.
|
|
207
|
-
- Несколько соседних групп оберните в Row с
|
|
213
|
+
- Несколько соседних групп оберните в `Card.Toolbar.Row` с готовыми настройками gap/wrap либо в обычный Row с явными параметрами. Toolbar теперь отвечает только за оформление контейнера.
|
|
208
214
|
- Вместо общего `dividers` назначайте нужным группам `divider`. По умолчанию линий нет, включая раскладку space-between.
|
|
209
215
|
- Удалите стили для старых `data-toolbar-row-*`/`data-card-toolbar-item`: измерения строк, автоматические псевдоэлементы и ResizeObserver больше не используются.
|
|
210
216
|
|