@react-spectrum/layout 3.6.5-nightly.4624 → 3.6.6-nightly.4629
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/Flex.main.js +10 -10
- package/dist/Flex.mjs +10 -10
- package/dist/Flex.module.js +10 -10
- package/dist/Grid.main.js +16 -16
- package/dist/Grid.mjs +16 -16
- package/dist/Grid.module.js +16 -16
- package/package.json +7 -7
package/dist/Flex.main.js
CHANGED
|
@@ -30,23 +30,23 @@ $parcel$export(module.exports, "Flex", () => $a2ef5497697e8437$export$f51f4c4ede
|
|
|
30
30
|
|
|
31
31
|
const $a2ef5497697e8437$var$flexStyleProps = {
|
|
32
32
|
direction: [
|
|
33
|
-
|
|
33
|
+
'flexDirection',
|
|
34
34
|
(0, $1yXrx$reactspectrumutils.passthroughStyle)
|
|
35
35
|
],
|
|
36
36
|
wrap: [
|
|
37
|
-
|
|
37
|
+
'flexWrap',
|
|
38
38
|
$a2ef5497697e8437$var$flexWrapValue
|
|
39
39
|
],
|
|
40
40
|
justifyContent: [
|
|
41
|
-
|
|
41
|
+
'justifyContent',
|
|
42
42
|
$a2ef5497697e8437$var$flexAlignValue
|
|
43
43
|
],
|
|
44
44
|
alignItems: [
|
|
45
|
-
|
|
45
|
+
'alignItems',
|
|
46
46
|
$a2ef5497697e8437$var$flexAlignValue
|
|
47
47
|
],
|
|
48
48
|
alignContent: [
|
|
49
|
-
|
|
49
|
+
'alignContent',
|
|
50
50
|
$a2ef5497697e8437$var$flexAlignValue
|
|
51
51
|
]
|
|
52
52
|
};
|
|
@@ -54,7 +54,7 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
|
54
54
|
let { children: children, ...otherProps } = props;
|
|
55
55
|
let breakpointProvider = (0, $1yXrx$reactspectrumutils.useBreakpoint)();
|
|
56
56
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
57
|
-
|
|
57
|
+
'base'
|
|
58
58
|
];
|
|
59
59
|
let { styleProps: styleProps } = (0, $1yXrx$reactspectrumutils.useStyleProps)(otherProps);
|
|
60
60
|
let { styleProps: flexStyle } = (0, $1yXrx$reactspectrumutils.useStyleProps)(otherProps, $a2ef5497697e8437$var$flexStyleProps);
|
|
@@ -68,7 +68,7 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
|
68
68
|
if (props.rowGap != null) style.rowGap = (0, $1yXrx$reactspectrumutils.responsiveDimensionValue)(props.rowGap, matchedBreakpoints);
|
|
69
69
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($1yXrx$react))).createElement("div", {
|
|
70
70
|
...(0, $1yXrx$reactariautils.filterDOMProps)(otherProps),
|
|
71
|
-
className: (0, $1yXrx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($12be0ef8be5abc46$exports))),
|
|
71
|
+
className: (0, $1yXrx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($12be0ef8be5abc46$exports))), 'flex', styleProps.className),
|
|
72
72
|
style: style,
|
|
73
73
|
ref: domRef
|
|
74
74
|
}, children);
|
|
@@ -77,14 +77,14 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
|
77
77
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
78
78
|
* in flex containers for browser compatibility.
|
|
79
79
|
*/ function $a2ef5497697e8437$var$flexAlignValue(value) {
|
|
80
|
-
if (value ===
|
|
81
|
-
if (value ===
|
|
80
|
+
if (value === 'start') return 'flex-start';
|
|
81
|
+
if (value === 'end') return 'flex-end';
|
|
82
82
|
return value;
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* Takes a boolean and translates it to flex wrap or nowrap.
|
|
86
86
|
*/ function $a2ef5497697e8437$var$flexWrapValue(value) {
|
|
87
|
-
if (typeof value ===
|
|
87
|
+
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
88
88
|
return value;
|
|
89
89
|
}
|
|
90
90
|
/**
|
package/dist/Flex.mjs
CHANGED
|
@@ -24,23 +24,23 @@ function $parcel$interopDefault(a) {
|
|
|
24
24
|
|
|
25
25
|
const $884c64d19340d345$var$flexStyleProps = {
|
|
26
26
|
direction: [
|
|
27
|
-
|
|
27
|
+
'flexDirection',
|
|
28
28
|
(0, $bDezp$passthroughStyle)
|
|
29
29
|
],
|
|
30
30
|
wrap: [
|
|
31
|
-
|
|
31
|
+
'flexWrap',
|
|
32
32
|
$884c64d19340d345$var$flexWrapValue
|
|
33
33
|
],
|
|
34
34
|
justifyContent: [
|
|
35
|
-
|
|
35
|
+
'justifyContent',
|
|
36
36
|
$884c64d19340d345$var$flexAlignValue
|
|
37
37
|
],
|
|
38
38
|
alignItems: [
|
|
39
|
-
|
|
39
|
+
'alignItems',
|
|
40
40
|
$884c64d19340d345$var$flexAlignValue
|
|
41
41
|
],
|
|
42
42
|
alignContent: [
|
|
43
|
-
|
|
43
|
+
'alignContent',
|
|
44
44
|
$884c64d19340d345$var$flexAlignValue
|
|
45
45
|
]
|
|
46
46
|
};
|
|
@@ -48,7 +48,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
48
48
|
let { children: children, ...otherProps } = props;
|
|
49
49
|
let breakpointProvider = (0, $bDezp$useBreakpoint)();
|
|
50
50
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
51
|
-
|
|
51
|
+
'base'
|
|
52
52
|
];
|
|
53
53
|
let { styleProps: styleProps } = (0, $bDezp$useStyleProps)(otherProps);
|
|
54
54
|
let { styleProps: flexStyle } = (0, $bDezp$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
|
|
@@ -62,7 +62,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
62
62
|
if (props.rowGap != null) style.rowGap = (0, $bDezp$responsiveDimensionValue)(props.rowGap, matchedBreakpoints);
|
|
63
63
|
return /*#__PURE__*/ (0, $bDezp$react).createElement("div", {
|
|
64
64
|
...(0, $bDezp$filterDOMProps)(otherProps),
|
|
65
|
-
className: (0, $bDezp$classNames)((0, ($parcel$interopDefault($bDezp$flexgap_cssmodulejs))),
|
|
65
|
+
className: (0, $bDezp$classNames)((0, ($parcel$interopDefault($bDezp$flexgap_cssmodulejs))), 'flex', styleProps.className),
|
|
66
66
|
style: style,
|
|
67
67
|
ref: domRef
|
|
68
68
|
}, children);
|
|
@@ -71,14 +71,14 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
71
71
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
72
72
|
* in flex containers for browser compatibility.
|
|
73
73
|
*/ function $884c64d19340d345$var$flexAlignValue(value) {
|
|
74
|
-
if (value ===
|
|
75
|
-
if (value ===
|
|
74
|
+
if (value === 'start') return 'flex-start';
|
|
75
|
+
if (value === 'end') return 'flex-end';
|
|
76
76
|
return value;
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
79
|
* Takes a boolean and translates it to flex wrap or nowrap.
|
|
80
80
|
*/ function $884c64d19340d345$var$flexWrapValue(value) {
|
|
81
|
-
if (typeof value ===
|
|
81
|
+
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
82
82
|
return value;
|
|
83
83
|
}
|
|
84
84
|
/**
|
package/dist/Flex.module.js
CHANGED
|
@@ -24,23 +24,23 @@ function $parcel$interopDefault(a) {
|
|
|
24
24
|
|
|
25
25
|
const $884c64d19340d345$var$flexStyleProps = {
|
|
26
26
|
direction: [
|
|
27
|
-
|
|
27
|
+
'flexDirection',
|
|
28
28
|
(0, $bDezp$passthroughStyle)
|
|
29
29
|
],
|
|
30
30
|
wrap: [
|
|
31
|
-
|
|
31
|
+
'flexWrap',
|
|
32
32
|
$884c64d19340d345$var$flexWrapValue
|
|
33
33
|
],
|
|
34
34
|
justifyContent: [
|
|
35
|
-
|
|
35
|
+
'justifyContent',
|
|
36
36
|
$884c64d19340d345$var$flexAlignValue
|
|
37
37
|
],
|
|
38
38
|
alignItems: [
|
|
39
|
-
|
|
39
|
+
'alignItems',
|
|
40
40
|
$884c64d19340d345$var$flexAlignValue
|
|
41
41
|
],
|
|
42
42
|
alignContent: [
|
|
43
|
-
|
|
43
|
+
'alignContent',
|
|
44
44
|
$884c64d19340d345$var$flexAlignValue
|
|
45
45
|
]
|
|
46
46
|
};
|
|
@@ -48,7 +48,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
48
48
|
let { children: children, ...otherProps } = props;
|
|
49
49
|
let breakpointProvider = (0, $bDezp$useBreakpoint)();
|
|
50
50
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
51
|
-
|
|
51
|
+
'base'
|
|
52
52
|
];
|
|
53
53
|
let { styleProps: styleProps } = (0, $bDezp$useStyleProps)(otherProps);
|
|
54
54
|
let { styleProps: flexStyle } = (0, $bDezp$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
|
|
@@ -62,7 +62,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
62
62
|
if (props.rowGap != null) style.rowGap = (0, $bDezp$responsiveDimensionValue)(props.rowGap, matchedBreakpoints);
|
|
63
63
|
return /*#__PURE__*/ (0, $bDezp$react).createElement("div", {
|
|
64
64
|
...(0, $bDezp$filterDOMProps)(otherProps),
|
|
65
|
-
className: (0, $bDezp$classNames)((0, ($parcel$interopDefault($bDezp$flexgap_cssmodulejs))),
|
|
65
|
+
className: (0, $bDezp$classNames)((0, ($parcel$interopDefault($bDezp$flexgap_cssmodulejs))), 'flex', styleProps.className),
|
|
66
66
|
style: style,
|
|
67
67
|
ref: domRef
|
|
68
68
|
}, children);
|
|
@@ -71,14 +71,14 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
71
71
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
72
72
|
* in flex containers for browser compatibility.
|
|
73
73
|
*/ function $884c64d19340d345$var$flexAlignValue(value) {
|
|
74
|
-
if (value ===
|
|
75
|
-
if (value ===
|
|
74
|
+
if (value === 'start') return 'flex-start';
|
|
75
|
+
if (value === 'end') return 'flex-end';
|
|
76
76
|
return value;
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
79
|
* Takes a boolean and translates it to flex wrap or nowrap.
|
|
80
80
|
*/ function $884c64d19340d345$var$flexWrapValue(value) {
|
|
81
|
-
if (typeof value ===
|
|
81
|
+
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
82
82
|
return value;
|
|
83
83
|
}
|
|
84
84
|
/**
|
package/dist/Grid.main.js
CHANGED
|
@@ -31,62 +31,62 @@ $parcel$export(module.exports, "Grid", () => $65aafe8662d00781$export$ef2184bd89
|
|
|
31
31
|
const $65aafe8662d00781$var$gridStyleProps = {
|
|
32
32
|
...(0, $ATZAs$reactspectrumutils.baseStyleProps),
|
|
33
33
|
autoFlow: [
|
|
34
|
-
|
|
34
|
+
'gridAutoFlow',
|
|
35
35
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
36
36
|
],
|
|
37
37
|
autoColumns: [
|
|
38
|
-
|
|
38
|
+
'gridAutoColumns',
|
|
39
39
|
$65aafe8662d00781$var$gridDimensionValue
|
|
40
40
|
],
|
|
41
41
|
autoRows: [
|
|
42
|
-
|
|
42
|
+
'gridAutoRows',
|
|
43
43
|
$65aafe8662d00781$var$gridDimensionValue
|
|
44
44
|
],
|
|
45
45
|
areas: [
|
|
46
|
-
|
|
46
|
+
'gridTemplateAreas',
|
|
47
47
|
$65aafe8662d00781$var$gridTemplateAreasValue
|
|
48
48
|
],
|
|
49
49
|
columns: [
|
|
50
|
-
|
|
50
|
+
'gridTemplateColumns',
|
|
51
51
|
$65aafe8662d00781$var$gridTemplateValue
|
|
52
52
|
],
|
|
53
53
|
rows: [
|
|
54
|
-
|
|
54
|
+
'gridTemplateRows',
|
|
55
55
|
$65aafe8662d00781$var$gridTemplateValue
|
|
56
56
|
],
|
|
57
57
|
gap: [
|
|
58
|
-
|
|
58
|
+
'gap',
|
|
59
59
|
(0, $ATZAs$reactspectrumutils.dimensionValue)
|
|
60
60
|
],
|
|
61
61
|
rowGap: [
|
|
62
|
-
|
|
62
|
+
'rowGap',
|
|
63
63
|
(0, $ATZAs$reactspectrumutils.dimensionValue)
|
|
64
64
|
],
|
|
65
65
|
columnGap: [
|
|
66
|
-
|
|
66
|
+
'columnGap',
|
|
67
67
|
(0, $ATZAs$reactspectrumutils.dimensionValue)
|
|
68
68
|
],
|
|
69
69
|
justifyItems: [
|
|
70
|
-
|
|
70
|
+
'justifyItems',
|
|
71
71
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
72
72
|
],
|
|
73
73
|
justifyContent: [
|
|
74
|
-
|
|
74
|
+
'justifyContent',
|
|
75
75
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
76
76
|
],
|
|
77
77
|
alignItems: [
|
|
78
|
-
|
|
78
|
+
'alignItems',
|
|
79
79
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
80
80
|
],
|
|
81
81
|
alignContent: [
|
|
82
|
-
|
|
82
|
+
'alignContent',
|
|
83
83
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
84
84
|
]
|
|
85
85
|
};
|
|
86
86
|
function $65aafe8662d00781$var$Grid(props, ref) {
|
|
87
87
|
let { children: children, ...otherProps } = props;
|
|
88
88
|
let { styleProps: styleProps } = (0, $ATZAs$reactspectrumutils.useStyleProps)(otherProps, $65aafe8662d00781$var$gridStyleProps);
|
|
89
|
-
styleProps.style.display =
|
|
89
|
+
styleProps.style.display = 'grid'; // inline-grid?
|
|
90
90
|
let domRef = (0, $ATZAs$reactspectrumutils.useDOMRef)(ref);
|
|
91
91
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($ATZAs$react))).createElement("div", {
|
|
92
92
|
...(0, $ATZAs$reactariautils.filterDOMProps)(otherProps),
|
|
@@ -104,14 +104,14 @@ function $65aafe8662d00781$export$2f0b47b0911ce698(dimension) {
|
|
|
104
104
|
return `fit-content(${$65aafe8662d00781$var$gridDimensionValue(dimension)})`;
|
|
105
105
|
}
|
|
106
106
|
function $65aafe8662d00781$var$gridTemplateAreasValue(value) {
|
|
107
|
-
return value.map((v)=>`"${v}"`).join(
|
|
107
|
+
return value.map((v)=>`"${v}"`).join('\n');
|
|
108
108
|
}
|
|
109
109
|
function $65aafe8662d00781$var$gridDimensionValue(value) {
|
|
110
110
|
if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
|
|
111
111
|
return (0, $ATZAs$reactspectrumutils.dimensionValue)(value);
|
|
112
112
|
}
|
|
113
113
|
function $65aafe8662d00781$var$gridTemplateValue(value) {
|
|
114
|
-
if (Array.isArray(value)) return value.map($65aafe8662d00781$var$gridDimensionValue).join(
|
|
114
|
+
if (Array.isArray(value)) return value.map($65aafe8662d00781$var$gridDimensionValue).join(' ');
|
|
115
115
|
return $65aafe8662d00781$var$gridDimensionValue(value);
|
|
116
116
|
}
|
|
117
117
|
/**
|
package/dist/Grid.mjs
CHANGED
|
@@ -18,62 +18,62 @@ import $2XVCg$react, {forwardRef as $2XVCg$forwardRef} from "react";
|
|
|
18
18
|
const $994c48bfb00b620b$var$gridStyleProps = {
|
|
19
19
|
...(0, $2XVCg$baseStyleProps),
|
|
20
20
|
autoFlow: [
|
|
21
|
-
|
|
21
|
+
'gridAutoFlow',
|
|
22
22
|
(0, $2XVCg$passthroughStyle)
|
|
23
23
|
],
|
|
24
24
|
autoColumns: [
|
|
25
|
-
|
|
25
|
+
'gridAutoColumns',
|
|
26
26
|
$994c48bfb00b620b$var$gridDimensionValue
|
|
27
27
|
],
|
|
28
28
|
autoRows: [
|
|
29
|
-
|
|
29
|
+
'gridAutoRows',
|
|
30
30
|
$994c48bfb00b620b$var$gridDimensionValue
|
|
31
31
|
],
|
|
32
32
|
areas: [
|
|
33
|
-
|
|
33
|
+
'gridTemplateAreas',
|
|
34
34
|
$994c48bfb00b620b$var$gridTemplateAreasValue
|
|
35
35
|
],
|
|
36
36
|
columns: [
|
|
37
|
-
|
|
37
|
+
'gridTemplateColumns',
|
|
38
38
|
$994c48bfb00b620b$var$gridTemplateValue
|
|
39
39
|
],
|
|
40
40
|
rows: [
|
|
41
|
-
|
|
41
|
+
'gridTemplateRows',
|
|
42
42
|
$994c48bfb00b620b$var$gridTemplateValue
|
|
43
43
|
],
|
|
44
44
|
gap: [
|
|
45
|
-
|
|
45
|
+
'gap',
|
|
46
46
|
(0, $2XVCg$dimensionValue)
|
|
47
47
|
],
|
|
48
48
|
rowGap: [
|
|
49
|
-
|
|
49
|
+
'rowGap',
|
|
50
50
|
(0, $2XVCg$dimensionValue)
|
|
51
51
|
],
|
|
52
52
|
columnGap: [
|
|
53
|
-
|
|
53
|
+
'columnGap',
|
|
54
54
|
(0, $2XVCg$dimensionValue)
|
|
55
55
|
],
|
|
56
56
|
justifyItems: [
|
|
57
|
-
|
|
57
|
+
'justifyItems',
|
|
58
58
|
(0, $2XVCg$passthroughStyle)
|
|
59
59
|
],
|
|
60
60
|
justifyContent: [
|
|
61
|
-
|
|
61
|
+
'justifyContent',
|
|
62
62
|
(0, $2XVCg$passthroughStyle)
|
|
63
63
|
],
|
|
64
64
|
alignItems: [
|
|
65
|
-
|
|
65
|
+
'alignItems',
|
|
66
66
|
(0, $2XVCg$passthroughStyle)
|
|
67
67
|
],
|
|
68
68
|
alignContent: [
|
|
69
|
-
|
|
69
|
+
'alignContent',
|
|
70
70
|
(0, $2XVCg$passthroughStyle)
|
|
71
71
|
]
|
|
72
72
|
};
|
|
73
73
|
function $994c48bfb00b620b$var$Grid(props, ref) {
|
|
74
74
|
let { children: children, ...otherProps } = props;
|
|
75
75
|
let { styleProps: styleProps } = (0, $2XVCg$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
|
|
76
|
-
styleProps.style.display =
|
|
76
|
+
styleProps.style.display = 'grid'; // inline-grid?
|
|
77
77
|
let domRef = (0, $2XVCg$useDOMRef)(ref);
|
|
78
78
|
return /*#__PURE__*/ (0, $2XVCg$react).createElement("div", {
|
|
79
79
|
...(0, $2XVCg$filterDOMProps)(otherProps),
|
|
@@ -91,14 +91,14 @@ function $994c48bfb00b620b$export$2f0b47b0911ce698(dimension) {
|
|
|
91
91
|
return `fit-content(${$994c48bfb00b620b$var$gridDimensionValue(dimension)})`;
|
|
92
92
|
}
|
|
93
93
|
function $994c48bfb00b620b$var$gridTemplateAreasValue(value) {
|
|
94
|
-
return value.map((v)=>`"${v}"`).join(
|
|
94
|
+
return value.map((v)=>`"${v}"`).join('\n');
|
|
95
95
|
}
|
|
96
96
|
function $994c48bfb00b620b$var$gridDimensionValue(value) {
|
|
97
97
|
if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
|
|
98
98
|
return (0, $2XVCg$dimensionValue)(value);
|
|
99
99
|
}
|
|
100
100
|
function $994c48bfb00b620b$var$gridTemplateValue(value) {
|
|
101
|
-
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(
|
|
101
|
+
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(' ');
|
|
102
102
|
return $994c48bfb00b620b$var$gridDimensionValue(value);
|
|
103
103
|
}
|
|
104
104
|
/**
|
package/dist/Grid.module.js
CHANGED
|
@@ -18,62 +18,62 @@ import $2XVCg$react, {forwardRef as $2XVCg$forwardRef} from "react";
|
|
|
18
18
|
const $994c48bfb00b620b$var$gridStyleProps = {
|
|
19
19
|
...(0, $2XVCg$baseStyleProps),
|
|
20
20
|
autoFlow: [
|
|
21
|
-
|
|
21
|
+
'gridAutoFlow',
|
|
22
22
|
(0, $2XVCg$passthroughStyle)
|
|
23
23
|
],
|
|
24
24
|
autoColumns: [
|
|
25
|
-
|
|
25
|
+
'gridAutoColumns',
|
|
26
26
|
$994c48bfb00b620b$var$gridDimensionValue
|
|
27
27
|
],
|
|
28
28
|
autoRows: [
|
|
29
|
-
|
|
29
|
+
'gridAutoRows',
|
|
30
30
|
$994c48bfb00b620b$var$gridDimensionValue
|
|
31
31
|
],
|
|
32
32
|
areas: [
|
|
33
|
-
|
|
33
|
+
'gridTemplateAreas',
|
|
34
34
|
$994c48bfb00b620b$var$gridTemplateAreasValue
|
|
35
35
|
],
|
|
36
36
|
columns: [
|
|
37
|
-
|
|
37
|
+
'gridTemplateColumns',
|
|
38
38
|
$994c48bfb00b620b$var$gridTemplateValue
|
|
39
39
|
],
|
|
40
40
|
rows: [
|
|
41
|
-
|
|
41
|
+
'gridTemplateRows',
|
|
42
42
|
$994c48bfb00b620b$var$gridTemplateValue
|
|
43
43
|
],
|
|
44
44
|
gap: [
|
|
45
|
-
|
|
45
|
+
'gap',
|
|
46
46
|
(0, $2XVCg$dimensionValue)
|
|
47
47
|
],
|
|
48
48
|
rowGap: [
|
|
49
|
-
|
|
49
|
+
'rowGap',
|
|
50
50
|
(0, $2XVCg$dimensionValue)
|
|
51
51
|
],
|
|
52
52
|
columnGap: [
|
|
53
|
-
|
|
53
|
+
'columnGap',
|
|
54
54
|
(0, $2XVCg$dimensionValue)
|
|
55
55
|
],
|
|
56
56
|
justifyItems: [
|
|
57
|
-
|
|
57
|
+
'justifyItems',
|
|
58
58
|
(0, $2XVCg$passthroughStyle)
|
|
59
59
|
],
|
|
60
60
|
justifyContent: [
|
|
61
|
-
|
|
61
|
+
'justifyContent',
|
|
62
62
|
(0, $2XVCg$passthroughStyle)
|
|
63
63
|
],
|
|
64
64
|
alignItems: [
|
|
65
|
-
|
|
65
|
+
'alignItems',
|
|
66
66
|
(0, $2XVCg$passthroughStyle)
|
|
67
67
|
],
|
|
68
68
|
alignContent: [
|
|
69
|
-
|
|
69
|
+
'alignContent',
|
|
70
70
|
(0, $2XVCg$passthroughStyle)
|
|
71
71
|
]
|
|
72
72
|
};
|
|
73
73
|
function $994c48bfb00b620b$var$Grid(props, ref) {
|
|
74
74
|
let { children: children, ...otherProps } = props;
|
|
75
75
|
let { styleProps: styleProps } = (0, $2XVCg$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
|
|
76
|
-
styleProps.style.display =
|
|
76
|
+
styleProps.style.display = 'grid'; // inline-grid?
|
|
77
77
|
let domRef = (0, $2XVCg$useDOMRef)(ref);
|
|
78
78
|
return /*#__PURE__*/ (0, $2XVCg$react).createElement("div", {
|
|
79
79
|
...(0, $2XVCg$filterDOMProps)(otherProps),
|
|
@@ -91,14 +91,14 @@ function $994c48bfb00b620b$export$2f0b47b0911ce698(dimension) {
|
|
|
91
91
|
return `fit-content(${$994c48bfb00b620b$var$gridDimensionValue(dimension)})`;
|
|
92
92
|
}
|
|
93
93
|
function $994c48bfb00b620b$var$gridTemplateAreasValue(value) {
|
|
94
|
-
return value.map((v)=>`"${v}"`).join(
|
|
94
|
+
return value.map((v)=>`"${v}"`).join('\n');
|
|
95
95
|
}
|
|
96
96
|
function $994c48bfb00b620b$var$gridDimensionValue(value) {
|
|
97
97
|
if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
|
|
98
98
|
return (0, $2XVCg$dimensionValue)(value);
|
|
99
99
|
}
|
|
100
100
|
function $994c48bfb00b620b$var$gridTemplateValue(value) {
|
|
101
|
-
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(
|
|
101
|
+
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(' ');
|
|
102
102
|
return $994c48bfb00b620b$var$gridDimensionValue(value);
|
|
103
103
|
}
|
|
104
104
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/layout",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.6-nightly.4629+c34886769",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
40
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
41
|
-
"@react-types/layout": "3.3.
|
|
42
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/utils": "3.0.0-nightly.2917+c34886769",
|
|
40
|
+
"@react-spectrum/utils": "3.0.0-nightly.2917+c34886769",
|
|
41
|
+
"@react-types/layout": "3.3.16-nightly.4629+c34886769",
|
|
42
|
+
"@react-types/shared": "3.0.0-nightly.2917+c34886769",
|
|
43
43
|
"@swc/helpers": "^0.5.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
46
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2917+c34886769"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
|
|
56
56
|
}
|