@react-spectrum/layout 3.2.3 → 3.2.4-nightly.3113
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/main.js +91 -91
- package/dist/module.js +90 -90
- package/package.json +7 -7
package/dist/main.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
2
|
+
var $aBO7d$reactspectrumutils = require("@react-spectrum/utils");
|
|
3
|
+
var $aBO7d$reactariautils = require("@react-aria/utils");
|
|
4
|
+
var $aBO7d$react = require("react");
|
|
5
|
+
var $aBO7d$reactariassr = require("@react-aria/ssr");
|
|
6
6
|
|
|
7
7
|
function $parcel$exportWildcard(dest, source) {
|
|
8
8
|
Object.keys(source).forEach(function(key) {
|
|
@@ -26,180 +26,180 @@ function $parcel$interopDefault(a) {
|
|
|
26
26
|
function $parcel$export(e, n, v, s) {
|
|
27
27
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
28
28
|
}
|
|
29
|
-
var $
|
|
29
|
+
var $65aafe8662d00781$exports = {};
|
|
30
30
|
|
|
31
|
-
$parcel$export($
|
|
32
|
-
$parcel$export($
|
|
33
|
-
$parcel$export($
|
|
34
|
-
$parcel$export($
|
|
31
|
+
$parcel$export($65aafe8662d00781$exports, "repeat", () => $65aafe8662d00781$export$76d90c956114f2c2);
|
|
32
|
+
$parcel$export($65aafe8662d00781$exports, "minmax", () => $65aafe8662d00781$export$9c1b655deaca4988);
|
|
33
|
+
$parcel$export($65aafe8662d00781$exports, "fitContent", () => $65aafe8662d00781$export$2f0b47b0911ce698);
|
|
34
|
+
$parcel$export($65aafe8662d00781$exports, "Grid", () => $65aafe8662d00781$export$ef2184bd89960b14);
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
const $
|
|
39
|
-
...$
|
|
38
|
+
const $65aafe8662d00781$var$gridStyleProps = {
|
|
39
|
+
...$aBO7d$reactspectrumutils.baseStyleProps,
|
|
40
40
|
autoFlow: [
|
|
41
41
|
'gridAutoFlow',
|
|
42
|
-
$
|
|
42
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
43
43
|
],
|
|
44
44
|
autoColumns: [
|
|
45
45
|
'gridAutoColumns',
|
|
46
|
-
$
|
|
46
|
+
$65aafe8662d00781$var$gridDimensionValue
|
|
47
47
|
],
|
|
48
48
|
autoRows: [
|
|
49
49
|
'gridAutoRows',
|
|
50
|
-
$
|
|
50
|
+
$65aafe8662d00781$var$gridDimensionValue
|
|
51
51
|
],
|
|
52
52
|
areas: [
|
|
53
53
|
'gridTemplateAreas',
|
|
54
|
-
$
|
|
54
|
+
$65aafe8662d00781$var$gridTemplateAreasValue
|
|
55
55
|
],
|
|
56
56
|
columns: [
|
|
57
57
|
'gridTemplateColumns',
|
|
58
|
-
$
|
|
58
|
+
$65aafe8662d00781$var$gridTemplateValue
|
|
59
59
|
],
|
|
60
60
|
rows: [
|
|
61
61
|
'gridTemplateRows',
|
|
62
|
-
$
|
|
62
|
+
$65aafe8662d00781$var$gridTemplateValue
|
|
63
63
|
],
|
|
64
64
|
gap: [
|
|
65
65
|
'gap',
|
|
66
|
-
$
|
|
66
|
+
$aBO7d$reactspectrumutils.dimensionValue
|
|
67
67
|
],
|
|
68
68
|
rowGap: [
|
|
69
69
|
'rowGap',
|
|
70
|
-
$
|
|
70
|
+
$aBO7d$reactspectrumutils.dimensionValue
|
|
71
71
|
],
|
|
72
72
|
columnGap: [
|
|
73
73
|
'columnGap',
|
|
74
|
-
$
|
|
74
|
+
$aBO7d$reactspectrumutils.dimensionValue
|
|
75
75
|
],
|
|
76
76
|
justifyItems: [
|
|
77
77
|
'justifyItems',
|
|
78
|
-
$
|
|
78
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
79
79
|
],
|
|
80
80
|
justifyContent: [
|
|
81
81
|
'justifyContent',
|
|
82
|
-
$
|
|
82
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
83
83
|
],
|
|
84
84
|
alignItems: [
|
|
85
85
|
'alignItems',
|
|
86
|
-
$
|
|
86
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
87
87
|
],
|
|
88
88
|
alignContent: [
|
|
89
89
|
'alignContent',
|
|
90
|
-
$
|
|
90
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
91
91
|
]
|
|
92
92
|
};
|
|
93
|
-
function $
|
|
93
|
+
function $65aafe8662d00781$var$Grid(props, ref) {
|
|
94
94
|
let { children: children , ...otherProps } = props;
|
|
95
|
-
let { styleProps: styleProps } = $
|
|
95
|
+
let { styleProps: styleProps } = $aBO7d$reactspectrumutils.useStyleProps(otherProps, $65aafe8662d00781$var$gridStyleProps);
|
|
96
96
|
styleProps.style.display = 'grid'; // inline-grid?
|
|
97
|
-
let domRef = $
|
|
98
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
99
|
-
...$
|
|
97
|
+
let domRef = $aBO7d$reactspectrumutils.useDOMRef(ref);
|
|
98
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aBO7d$react)).createElement("div", {
|
|
99
|
+
...$aBO7d$reactariautils.filterDOMProps(otherProps),
|
|
100
100
|
...styleProps,
|
|
101
101
|
ref: domRef
|
|
102
102
|
}, children));
|
|
103
103
|
}
|
|
104
|
-
function $
|
|
105
|
-
return `repeat(${count}, ${$
|
|
104
|
+
function $65aafe8662d00781$export$76d90c956114f2c2(count, $65aafe8662d00781$export$76d90c956114f2c2) {
|
|
105
|
+
return `repeat(${count}, ${$65aafe8662d00781$var$gridTemplateValue($65aafe8662d00781$export$76d90c956114f2c2)})`;
|
|
106
106
|
}
|
|
107
|
-
function $
|
|
108
|
-
return `minmax(${$
|
|
107
|
+
function $65aafe8662d00781$export$9c1b655deaca4988(min, max) {
|
|
108
|
+
return `minmax(${$65aafe8662d00781$var$gridDimensionValue(min)}, ${$65aafe8662d00781$var$gridDimensionValue(max)})`;
|
|
109
109
|
}
|
|
110
|
-
function $
|
|
111
|
-
return `fit-content(${$
|
|
110
|
+
function $65aafe8662d00781$export$2f0b47b0911ce698(dimension) {
|
|
111
|
+
return `fit-content(${$65aafe8662d00781$var$gridDimensionValue(dimension)})`;
|
|
112
112
|
}
|
|
113
|
-
function $
|
|
113
|
+
function $65aafe8662d00781$var$gridTemplateAreasValue(value) {
|
|
114
114
|
return value.map((v)=>`"${v}"`
|
|
115
115
|
).join('\n');
|
|
116
116
|
}
|
|
117
|
-
function $
|
|
117
|
+
function $65aafe8662d00781$var$gridDimensionValue(value) {
|
|
118
118
|
if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
|
|
119
|
-
return $
|
|
119
|
+
return $aBO7d$reactspectrumutils.dimensionValue(value);
|
|
120
120
|
}
|
|
121
|
-
function $
|
|
122
|
-
if (Array.isArray(value)) return value.map($
|
|
123
|
-
return $
|
|
121
|
+
function $65aafe8662d00781$var$gridTemplateValue(value) {
|
|
122
|
+
if (Array.isArray(value)) return value.map($65aafe8662d00781$var$gridDimensionValue).join(' ');
|
|
123
|
+
return $65aafe8662d00781$var$gridDimensionValue(value);
|
|
124
124
|
}
|
|
125
125
|
/**
|
|
126
126
|
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
127
127
|
* ensure consistent and adaptive sizing and spacing.
|
|
128
|
-
*/ const $
|
|
128
|
+
*/ const $65aafe8662d00781$export$ef2184bd89960b14 = /*#__PURE__*/ $aBO7d$react.forwardRef($65aafe8662d00781$var$Grid);
|
|
129
129
|
|
|
130
130
|
|
|
131
|
-
var $
|
|
131
|
+
var $a2ef5497697e8437$exports = {};
|
|
132
132
|
|
|
133
|
-
$parcel$export($
|
|
133
|
+
$parcel$export($a2ef5497697e8437$exports, "Flex", () => $a2ef5497697e8437$export$f51f4c4ede09e011);
|
|
134
134
|
|
|
135
135
|
|
|
136
136
|
|
|
137
|
-
var $
|
|
137
|
+
var $12be0ef8be5abc46$exports = {};
|
|
138
138
|
|
|
139
|
-
$parcel$export($
|
|
140
|
-
$parcel$export($
|
|
141
|
-
$parcel$export($
|
|
142
|
-
var $
|
|
143
|
-
var $
|
|
144
|
-
var $
|
|
145
|
-
$
|
|
146
|
-
$
|
|
147
|
-
$
|
|
139
|
+
$parcel$export($12be0ef8be5abc46$exports, "flex-container", () => $12be0ef8be5abc46$export$69d7a39fa31a000b, (v) => $12be0ef8be5abc46$export$69d7a39fa31a000b = v);
|
|
140
|
+
$parcel$export($12be0ef8be5abc46$exports, "flex", () => $12be0ef8be5abc46$export$97691fbb80847c19, (v) => $12be0ef8be5abc46$export$97691fbb80847c19 = v);
|
|
141
|
+
$parcel$export($12be0ef8be5abc46$exports, "flex-gap", () => $12be0ef8be5abc46$export$31a9da8b58047a44, (v) => $12be0ef8be5abc46$export$31a9da8b58047a44 = v);
|
|
142
|
+
var $12be0ef8be5abc46$export$69d7a39fa31a000b;
|
|
143
|
+
var $12be0ef8be5abc46$export$97691fbb80847c19;
|
|
144
|
+
var $12be0ef8be5abc46$export$31a9da8b58047a44;
|
|
145
|
+
$12be0ef8be5abc46$export$69d7a39fa31a000b = "flex-container_e15493";
|
|
146
|
+
$12be0ef8be5abc46$export$97691fbb80847c19 = "flex_e15493";
|
|
147
|
+
$12be0ef8be5abc46$export$31a9da8b58047a44 = "flex-gap_e15493";
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
|
|
151
|
-
const $
|
|
151
|
+
const $a2ef5497697e8437$var$flexStyleProps = {
|
|
152
152
|
direction: [
|
|
153
153
|
'flexDirection',
|
|
154
|
-
$
|
|
154
|
+
$aBO7d$reactspectrumutils.passthroughStyle
|
|
155
155
|
],
|
|
156
156
|
wrap: [
|
|
157
157
|
'flexWrap',
|
|
158
|
-
$
|
|
158
|
+
$a2ef5497697e8437$var$flexWrapValue
|
|
159
159
|
],
|
|
160
160
|
justifyContent: [
|
|
161
161
|
'justifyContent',
|
|
162
|
-
$
|
|
162
|
+
$a2ef5497697e8437$var$flexAlignValue
|
|
163
163
|
],
|
|
164
164
|
alignItems: [
|
|
165
165
|
'alignItems',
|
|
166
|
-
$
|
|
166
|
+
$a2ef5497697e8437$var$flexAlignValue
|
|
167
167
|
],
|
|
168
168
|
alignContent: [
|
|
169
169
|
'alignContent',
|
|
170
|
-
$
|
|
170
|
+
$a2ef5497697e8437$var$flexAlignValue
|
|
171
171
|
]
|
|
172
172
|
};
|
|
173
|
-
function $
|
|
173
|
+
function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
174
174
|
let { children: children , ...otherProps } = props;
|
|
175
|
-
let breakpointProvider = $
|
|
175
|
+
let breakpointProvider = $aBO7d$reactspectrumutils.useBreakpoint();
|
|
176
176
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
177
177
|
'base'
|
|
178
178
|
];
|
|
179
|
-
let { styleProps: styleProps } = $
|
|
180
|
-
let { styleProps: flexStyle } = $
|
|
181
|
-
let domRef = $
|
|
182
|
-
let isSSR = $
|
|
179
|
+
let { styleProps: styleProps } = $aBO7d$reactspectrumutils.useStyleProps(otherProps);
|
|
180
|
+
let { styleProps: flexStyle } = $aBO7d$reactspectrumutils.useStyleProps(otherProps, $a2ef5497697e8437$var$flexStyleProps);
|
|
181
|
+
let domRef = $aBO7d$reactspectrumutils.useDOMRef(ref);
|
|
182
|
+
let isSSR = $aBO7d$reactariassr.useIsSSR();
|
|
183
183
|
// If a gap property is specified, and there is no native support or we're in SSR, use a shim.
|
|
184
184
|
// Two divs are required for this: the outer one contains most style properties, and the inner
|
|
185
185
|
// one is the flex container. Each item inside the flex container gets a margin around it based
|
|
186
186
|
// on the gap, and the flex container has a negative margin to counteract this. The outer container
|
|
187
187
|
// is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
|
|
188
188
|
// override the outer one.
|
|
189
|
-
if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$
|
|
189
|
+
if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$a2ef5497697e8437$var$isFlexGapSupported())) {
|
|
190
190
|
let style = {
|
|
191
191
|
...flexStyle.style,
|
|
192
|
-
'--column-gap': props.columnGap != null ? $
|
|
193
|
-
'--row-gap': props.rowGap != null ? $
|
|
194
|
-
'--gap': props.gap != null ? $
|
|
192
|
+
'--column-gap': props.columnGap != null ? $aBO7d$reactspectrumutils.responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
|
|
193
|
+
'--row-gap': props.rowGap != null ? $aBO7d$reactspectrumutils.responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
|
|
194
|
+
'--gap': props.gap != null ? $aBO7d$reactspectrumutils.responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
|
|
195
195
|
};
|
|
196
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
197
|
-
...$
|
|
196
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aBO7d$react)).createElement("div", {
|
|
197
|
+
...$aBO7d$reactariautils.filterDOMProps(otherProps),
|
|
198
198
|
...styleProps,
|
|
199
|
-
className: $
|
|
199
|
+
className: $aBO7d$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports)), 'flex-container', styleProps.className),
|
|
200
200
|
ref: domRef
|
|
201
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
202
|
-
className: $
|
|
201
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($aBO7d$react)).createElement("div", {
|
|
202
|
+
className: $aBO7d$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports)), 'flex', 'flex-gap'),
|
|
203
203
|
style: style
|
|
204
204
|
}, children)));
|
|
205
205
|
}
|
|
@@ -208,12 +208,12 @@ function $3ae3a86b899a71dc$var$Flex(props, ref) {
|
|
|
208
208
|
...styleProps.style,
|
|
209
209
|
...flexStyle.style
|
|
210
210
|
};
|
|
211
|
-
if (props.gap != null) style.gap = $
|
|
212
|
-
if (props.columnGap != null) style.columnGap = $
|
|
213
|
-
if (props.rowGap != null) style.rowGap = $
|
|
214
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
215
|
-
...$
|
|
216
|
-
className: $
|
|
211
|
+
if (props.gap != null) style.gap = $aBO7d$reactspectrumutils.responsiveDimensionValue(props.gap, matchedBreakpoints);
|
|
212
|
+
if (props.columnGap != null) style.columnGap = $aBO7d$reactspectrumutils.responsiveDimensionValue(props.columnGap, matchedBreakpoints);
|
|
213
|
+
if (props.rowGap != null) style.rowGap = $aBO7d$reactspectrumutils.responsiveDimensionValue(props.rowGap, matchedBreakpoints);
|
|
214
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($aBO7d$react)).createElement("div", {
|
|
215
|
+
...$aBO7d$reactariautils.filterDOMProps(otherProps),
|
|
216
|
+
className: $aBO7d$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports)), 'flex', styleProps.className),
|
|
217
217
|
style: style,
|
|
218
218
|
ref: domRef
|
|
219
219
|
}, children));
|
|
@@ -221,23 +221,23 @@ function $3ae3a86b899a71dc$var$Flex(props, ref) {
|
|
|
221
221
|
/**
|
|
222
222
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
223
223
|
* in flex containers for browser compatibility.
|
|
224
|
-
*/ function $
|
|
224
|
+
*/ function $a2ef5497697e8437$var$flexAlignValue(value) {
|
|
225
225
|
if (value === 'start') return 'flex-start';
|
|
226
226
|
if (value === 'end') return 'flex-end';
|
|
227
227
|
return value;
|
|
228
228
|
}
|
|
229
229
|
/**
|
|
230
230
|
* Takes a boolean and translates it to flex wrap or nowrap.
|
|
231
|
-
*/ function $
|
|
231
|
+
*/ function $a2ef5497697e8437$var$flexWrapValue(value) {
|
|
232
232
|
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
233
233
|
return value;
|
|
234
234
|
}
|
|
235
235
|
// Original licensing for the following method can be found in the
|
|
236
236
|
// NOTICE file in the root directory of this source tree.
|
|
237
237
|
// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
|
|
238
|
-
let $
|
|
239
|
-
function $
|
|
240
|
-
if ($
|
|
238
|
+
let $a2ef5497697e8437$var$_isFlexGapSupported = null;
|
|
239
|
+
function $a2ef5497697e8437$var$isFlexGapSupported() {
|
|
240
|
+
if ($a2ef5497697e8437$var$_isFlexGapSupported != null) return $a2ef5497697e8437$var$_isFlexGapSupported;
|
|
241
241
|
if (typeof document === 'undefined') return false;
|
|
242
242
|
// create flex container with row-gap set
|
|
243
243
|
var flex = document.createElement('div');
|
|
@@ -249,18 +249,18 @@ function $3ae3a86b899a71dc$var$isFlexGapSupported() {
|
|
|
249
249
|
flex.appendChild(document.createElement('div'));
|
|
250
250
|
// append to the DOM (needed to obtain scrollHeight)
|
|
251
251
|
document.body.appendChild(flex);
|
|
252
|
-
$
|
|
252
|
+
$a2ef5497697e8437$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
|
|
253
253
|
flex.parentNode.removeChild(flex);
|
|
254
|
-
return $
|
|
254
|
+
return $a2ef5497697e8437$var$_isFlexGapSupported;
|
|
255
255
|
}
|
|
256
256
|
/**
|
|
257
257
|
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
258
258
|
* property to define consistent spacing between items.
|
|
259
|
-
*/ const $
|
|
259
|
+
*/ const $a2ef5497697e8437$export$f51f4c4ede09e011 = /*#__PURE__*/ $aBO7d$react.forwardRef($a2ef5497697e8437$var$Flex);
|
|
260
260
|
|
|
261
261
|
|
|
262
|
-
$parcel$exportWildcard(module.exports, $
|
|
263
|
-
$parcel$exportWildcard(module.exports, $
|
|
262
|
+
$parcel$exportWildcard(module.exports, $65aafe8662d00781$exports);
|
|
263
|
+
$parcel$exportWildcard(module.exports, $a2ef5497697e8437$exports);
|
|
264
264
|
|
|
265
265
|
|
|
266
266
|
//# sourceMappingURL=main.js.map
|
package/dist/module.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "./main.css";
|
|
2
|
-
import {baseStyleProps as $
|
|
3
|
-
import {filterDOMProps as $
|
|
4
|
-
import $
|
|
5
|
-
import {useIsSSR as $
|
|
2
|
+
import {baseStyleProps as $9LQqs$baseStyleProps, passthroughStyle as $9LQqs$passthroughStyle, dimensionValue as $9LQqs$dimensionValue, useStyleProps as $9LQqs$useStyleProps, useDOMRef as $9LQqs$useDOMRef, useBreakpoint as $9LQqs$useBreakpoint, responsiveDimensionValue as $9LQqs$responsiveDimensionValue, classNames as $9LQqs$classNames} from "@react-spectrum/utils";
|
|
3
|
+
import {filterDOMProps as $9LQqs$filterDOMProps} from "@react-aria/utils";
|
|
4
|
+
import $9LQqs$react, {forwardRef as $9LQqs$forwardRef} from "react";
|
|
5
|
+
import {useIsSSR as $9LQqs$useIsSSR} from "@react-aria/ssr";
|
|
6
6
|
|
|
7
7
|
function $parcel$export(e, n, v, s) {
|
|
8
8
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
@@ -10,180 +10,180 @@ function $parcel$export(e, n, v, s) {
|
|
|
10
10
|
function $parcel$interopDefault(a) {
|
|
11
11
|
return a && a.__esModule ? a.default : a;
|
|
12
12
|
}
|
|
13
|
-
var $
|
|
13
|
+
var $994c48bfb00b620b$exports = {};
|
|
14
14
|
|
|
15
|
-
$parcel$export($
|
|
16
|
-
$parcel$export($
|
|
17
|
-
$parcel$export($
|
|
18
|
-
$parcel$export($
|
|
15
|
+
$parcel$export($994c48bfb00b620b$exports, "repeat", () => $994c48bfb00b620b$export$76d90c956114f2c2);
|
|
16
|
+
$parcel$export($994c48bfb00b620b$exports, "minmax", () => $994c48bfb00b620b$export$9c1b655deaca4988);
|
|
17
|
+
$parcel$export($994c48bfb00b620b$exports, "fitContent", () => $994c48bfb00b620b$export$2f0b47b0911ce698);
|
|
18
|
+
$parcel$export($994c48bfb00b620b$exports, "Grid", () => $994c48bfb00b620b$export$ef2184bd89960b14);
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
const $
|
|
23
|
-
...$
|
|
22
|
+
const $994c48bfb00b620b$var$gridStyleProps = {
|
|
23
|
+
...$9LQqs$baseStyleProps,
|
|
24
24
|
autoFlow: [
|
|
25
25
|
'gridAutoFlow',
|
|
26
|
-
$
|
|
26
|
+
$9LQqs$passthroughStyle
|
|
27
27
|
],
|
|
28
28
|
autoColumns: [
|
|
29
29
|
'gridAutoColumns',
|
|
30
|
-
$
|
|
30
|
+
$994c48bfb00b620b$var$gridDimensionValue
|
|
31
31
|
],
|
|
32
32
|
autoRows: [
|
|
33
33
|
'gridAutoRows',
|
|
34
|
-
$
|
|
34
|
+
$994c48bfb00b620b$var$gridDimensionValue
|
|
35
35
|
],
|
|
36
36
|
areas: [
|
|
37
37
|
'gridTemplateAreas',
|
|
38
|
-
$
|
|
38
|
+
$994c48bfb00b620b$var$gridTemplateAreasValue
|
|
39
39
|
],
|
|
40
40
|
columns: [
|
|
41
41
|
'gridTemplateColumns',
|
|
42
|
-
$
|
|
42
|
+
$994c48bfb00b620b$var$gridTemplateValue
|
|
43
43
|
],
|
|
44
44
|
rows: [
|
|
45
45
|
'gridTemplateRows',
|
|
46
|
-
$
|
|
46
|
+
$994c48bfb00b620b$var$gridTemplateValue
|
|
47
47
|
],
|
|
48
48
|
gap: [
|
|
49
49
|
'gap',
|
|
50
|
-
$
|
|
50
|
+
$9LQqs$dimensionValue
|
|
51
51
|
],
|
|
52
52
|
rowGap: [
|
|
53
53
|
'rowGap',
|
|
54
|
-
$
|
|
54
|
+
$9LQqs$dimensionValue
|
|
55
55
|
],
|
|
56
56
|
columnGap: [
|
|
57
57
|
'columnGap',
|
|
58
|
-
$
|
|
58
|
+
$9LQqs$dimensionValue
|
|
59
59
|
],
|
|
60
60
|
justifyItems: [
|
|
61
61
|
'justifyItems',
|
|
62
|
-
$
|
|
62
|
+
$9LQqs$passthroughStyle
|
|
63
63
|
],
|
|
64
64
|
justifyContent: [
|
|
65
65
|
'justifyContent',
|
|
66
|
-
$
|
|
66
|
+
$9LQqs$passthroughStyle
|
|
67
67
|
],
|
|
68
68
|
alignItems: [
|
|
69
69
|
'alignItems',
|
|
70
|
-
$
|
|
70
|
+
$9LQqs$passthroughStyle
|
|
71
71
|
],
|
|
72
72
|
alignContent: [
|
|
73
73
|
'alignContent',
|
|
74
|
-
$
|
|
74
|
+
$9LQqs$passthroughStyle
|
|
75
75
|
]
|
|
76
76
|
};
|
|
77
|
-
function $
|
|
77
|
+
function $994c48bfb00b620b$var$Grid(props, ref) {
|
|
78
78
|
let { children: children , ...otherProps } = props;
|
|
79
|
-
let { styleProps: styleProps } = $
|
|
79
|
+
let { styleProps: styleProps } = $9LQqs$useStyleProps(otherProps, $994c48bfb00b620b$var$gridStyleProps);
|
|
80
80
|
styleProps.style.display = 'grid'; // inline-grid?
|
|
81
|
-
let domRef = $
|
|
82
|
-
return(/*#__PURE__*/ $
|
|
83
|
-
...$
|
|
81
|
+
let domRef = $9LQqs$useDOMRef(ref);
|
|
82
|
+
return(/*#__PURE__*/ $9LQqs$react.createElement("div", {
|
|
83
|
+
...$9LQqs$filterDOMProps(otherProps),
|
|
84
84
|
...styleProps,
|
|
85
85
|
ref: domRef
|
|
86
86
|
}, children));
|
|
87
87
|
}
|
|
88
|
-
function $
|
|
89
|
-
return `repeat(${count}, ${$
|
|
88
|
+
function $994c48bfb00b620b$export$76d90c956114f2c2(count, $994c48bfb00b620b$export$76d90c956114f2c2) {
|
|
89
|
+
return `repeat(${count}, ${$994c48bfb00b620b$var$gridTemplateValue($994c48bfb00b620b$export$76d90c956114f2c2)})`;
|
|
90
90
|
}
|
|
91
|
-
function $
|
|
92
|
-
return `minmax(${$
|
|
91
|
+
function $994c48bfb00b620b$export$9c1b655deaca4988(min, max) {
|
|
92
|
+
return `minmax(${$994c48bfb00b620b$var$gridDimensionValue(min)}, ${$994c48bfb00b620b$var$gridDimensionValue(max)})`;
|
|
93
93
|
}
|
|
94
|
-
function $
|
|
95
|
-
return `fit-content(${$
|
|
94
|
+
function $994c48bfb00b620b$export$2f0b47b0911ce698(dimension) {
|
|
95
|
+
return `fit-content(${$994c48bfb00b620b$var$gridDimensionValue(dimension)})`;
|
|
96
96
|
}
|
|
97
|
-
function $
|
|
97
|
+
function $994c48bfb00b620b$var$gridTemplateAreasValue(value) {
|
|
98
98
|
return value.map((v)=>`"${v}"`
|
|
99
99
|
).join('\n');
|
|
100
100
|
}
|
|
101
|
-
function $
|
|
101
|
+
function $994c48bfb00b620b$var$gridDimensionValue(value) {
|
|
102
102
|
if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
|
|
103
|
-
return $
|
|
103
|
+
return $9LQqs$dimensionValue(value);
|
|
104
104
|
}
|
|
105
|
-
function $
|
|
106
|
-
if (Array.isArray(value)) return value.map($
|
|
107
|
-
return $
|
|
105
|
+
function $994c48bfb00b620b$var$gridTemplateValue(value) {
|
|
106
|
+
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(' ');
|
|
107
|
+
return $994c48bfb00b620b$var$gridDimensionValue(value);
|
|
108
108
|
}
|
|
109
109
|
/**
|
|
110
110
|
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
111
111
|
* ensure consistent and adaptive sizing and spacing.
|
|
112
|
-
*/ const $
|
|
112
|
+
*/ const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ $9LQqs$forwardRef($994c48bfb00b620b$var$Grid);
|
|
113
113
|
|
|
114
114
|
|
|
115
|
-
var $
|
|
115
|
+
var $884c64d19340d345$exports = {};
|
|
116
116
|
|
|
117
|
-
$parcel$export($
|
|
117
|
+
$parcel$export($884c64d19340d345$exports, "Flex", () => $884c64d19340d345$export$f51f4c4ede09e011);
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
|
121
|
-
var $
|
|
121
|
+
var $01dd1839b5376a46$exports = {};
|
|
122
122
|
|
|
123
|
-
$parcel$export($
|
|
124
|
-
$parcel$export($
|
|
125
|
-
$parcel$export($
|
|
126
|
-
var $
|
|
127
|
-
var $
|
|
128
|
-
var $
|
|
129
|
-
$
|
|
130
|
-
$
|
|
131
|
-
$
|
|
123
|
+
$parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
|
|
124
|
+
$parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
|
|
125
|
+
$parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
|
|
126
|
+
var $01dd1839b5376a46$export$69d7a39fa31a000b;
|
|
127
|
+
var $01dd1839b5376a46$export$97691fbb80847c19;
|
|
128
|
+
var $01dd1839b5376a46$export$31a9da8b58047a44;
|
|
129
|
+
$01dd1839b5376a46$export$69d7a39fa31a000b = "flex-container_e15493";
|
|
130
|
+
$01dd1839b5376a46$export$97691fbb80847c19 = "flex_e15493";
|
|
131
|
+
$01dd1839b5376a46$export$31a9da8b58047a44 = "flex-gap_e15493";
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
const $
|
|
135
|
+
const $884c64d19340d345$var$flexStyleProps = {
|
|
136
136
|
direction: [
|
|
137
137
|
'flexDirection',
|
|
138
|
-
$
|
|
138
|
+
$9LQqs$passthroughStyle
|
|
139
139
|
],
|
|
140
140
|
wrap: [
|
|
141
141
|
'flexWrap',
|
|
142
|
-
$
|
|
142
|
+
$884c64d19340d345$var$flexWrapValue
|
|
143
143
|
],
|
|
144
144
|
justifyContent: [
|
|
145
145
|
'justifyContent',
|
|
146
|
-
$
|
|
146
|
+
$884c64d19340d345$var$flexAlignValue
|
|
147
147
|
],
|
|
148
148
|
alignItems: [
|
|
149
149
|
'alignItems',
|
|
150
|
-
$
|
|
150
|
+
$884c64d19340d345$var$flexAlignValue
|
|
151
151
|
],
|
|
152
152
|
alignContent: [
|
|
153
153
|
'alignContent',
|
|
154
|
-
$
|
|
154
|
+
$884c64d19340d345$var$flexAlignValue
|
|
155
155
|
]
|
|
156
156
|
};
|
|
157
|
-
function $
|
|
157
|
+
function $884c64d19340d345$var$Flex(props, ref) {
|
|
158
158
|
let { children: children , ...otherProps } = props;
|
|
159
|
-
let breakpointProvider = $
|
|
159
|
+
let breakpointProvider = $9LQqs$useBreakpoint();
|
|
160
160
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
161
161
|
'base'
|
|
162
162
|
];
|
|
163
|
-
let { styleProps: styleProps } = $
|
|
164
|
-
let { styleProps: flexStyle } = $
|
|
165
|
-
let domRef = $
|
|
166
|
-
let isSSR = $
|
|
163
|
+
let { styleProps: styleProps } = $9LQqs$useStyleProps(otherProps);
|
|
164
|
+
let { styleProps: flexStyle } = $9LQqs$useStyleProps(otherProps, $884c64d19340d345$var$flexStyleProps);
|
|
165
|
+
let domRef = $9LQqs$useDOMRef(ref);
|
|
166
|
+
let isSSR = $9LQqs$useIsSSR();
|
|
167
167
|
// If a gap property is specified, and there is no native support or we're in SSR, use a shim.
|
|
168
168
|
// Two divs are required for this: the outer one contains most style properties, and the inner
|
|
169
169
|
// one is the flex container. Each item inside the flex container gets a margin around it based
|
|
170
170
|
// on the gap, and the flex container has a negative margin to counteract this. The outer container
|
|
171
171
|
// is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
|
|
172
172
|
// override the outer one.
|
|
173
|
-
if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$
|
|
173
|
+
if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$884c64d19340d345$var$isFlexGapSupported())) {
|
|
174
174
|
let style = {
|
|
175
175
|
...flexStyle.style,
|
|
176
|
-
'--column-gap': props.columnGap != null ? $
|
|
177
|
-
'--row-gap': props.rowGap != null ? $
|
|
178
|
-
'--gap': props.gap != null ? $
|
|
176
|
+
'--column-gap': props.columnGap != null ? $9LQqs$responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
|
|
177
|
+
'--row-gap': props.rowGap != null ? $9LQqs$responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
|
|
178
|
+
'--gap': props.gap != null ? $9LQqs$responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
|
|
179
179
|
};
|
|
180
|
-
return(/*#__PURE__*/ $
|
|
181
|
-
...$
|
|
180
|
+
return(/*#__PURE__*/ $9LQqs$react.createElement("div", {
|
|
181
|
+
...$9LQqs$filterDOMProps(otherProps),
|
|
182
182
|
...styleProps,
|
|
183
|
-
className: $
|
|
183
|
+
className: $9LQqs$classNames((/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports)), 'flex-container', styleProps.className),
|
|
184
184
|
ref: domRef
|
|
185
|
-
}, /*#__PURE__*/ $
|
|
186
|
-
className: $
|
|
185
|
+
}, /*#__PURE__*/ $9LQqs$react.createElement("div", {
|
|
186
|
+
className: $9LQqs$classNames((/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports)), 'flex', 'flex-gap'),
|
|
187
187
|
style: style
|
|
188
188
|
}, children)));
|
|
189
189
|
}
|
|
@@ -192,12 +192,12 @@ function $1b39fab7603c3bcf$var$Flex(props, ref) {
|
|
|
192
192
|
...styleProps.style,
|
|
193
193
|
...flexStyle.style
|
|
194
194
|
};
|
|
195
|
-
if (props.gap != null) style.gap = $
|
|
196
|
-
if (props.columnGap != null) style.columnGap = $
|
|
197
|
-
if (props.rowGap != null) style.rowGap = $
|
|
198
|
-
return(/*#__PURE__*/ $
|
|
199
|
-
...$
|
|
200
|
-
className: $
|
|
195
|
+
if (props.gap != null) style.gap = $9LQqs$responsiveDimensionValue(props.gap, matchedBreakpoints);
|
|
196
|
+
if (props.columnGap != null) style.columnGap = $9LQqs$responsiveDimensionValue(props.columnGap, matchedBreakpoints);
|
|
197
|
+
if (props.rowGap != null) style.rowGap = $9LQqs$responsiveDimensionValue(props.rowGap, matchedBreakpoints);
|
|
198
|
+
return(/*#__PURE__*/ $9LQqs$react.createElement("div", {
|
|
199
|
+
...$9LQqs$filterDOMProps(otherProps),
|
|
200
|
+
className: $9LQqs$classNames((/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports)), 'flex', styleProps.className),
|
|
201
201
|
style: style,
|
|
202
202
|
ref: domRef
|
|
203
203
|
}, children));
|
|
@@ -205,23 +205,23 @@ function $1b39fab7603c3bcf$var$Flex(props, ref) {
|
|
|
205
205
|
/**
|
|
206
206
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
207
207
|
* in flex containers for browser compatibility.
|
|
208
|
-
*/ function $
|
|
208
|
+
*/ function $884c64d19340d345$var$flexAlignValue(value) {
|
|
209
209
|
if (value === 'start') return 'flex-start';
|
|
210
210
|
if (value === 'end') return 'flex-end';
|
|
211
211
|
return value;
|
|
212
212
|
}
|
|
213
213
|
/**
|
|
214
214
|
* Takes a boolean and translates it to flex wrap or nowrap.
|
|
215
|
-
*/ function $
|
|
215
|
+
*/ function $884c64d19340d345$var$flexWrapValue(value) {
|
|
216
216
|
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
217
217
|
return value;
|
|
218
218
|
}
|
|
219
219
|
// Original licensing for the following method can be found in the
|
|
220
220
|
// NOTICE file in the root directory of this source tree.
|
|
221
221
|
// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
|
|
222
|
-
let $
|
|
223
|
-
function $
|
|
224
|
-
if ($
|
|
222
|
+
let $884c64d19340d345$var$_isFlexGapSupported = null;
|
|
223
|
+
function $884c64d19340d345$var$isFlexGapSupported() {
|
|
224
|
+
if ($884c64d19340d345$var$_isFlexGapSupported != null) return $884c64d19340d345$var$_isFlexGapSupported;
|
|
225
225
|
if (typeof document === 'undefined') return false;
|
|
226
226
|
// create flex container with row-gap set
|
|
227
227
|
var flex = document.createElement('div');
|
|
@@ -233,17 +233,17 @@ function $1b39fab7603c3bcf$var$isFlexGapSupported() {
|
|
|
233
233
|
flex.appendChild(document.createElement('div'));
|
|
234
234
|
// append to the DOM (needed to obtain scrollHeight)
|
|
235
235
|
document.body.appendChild(flex);
|
|
236
|
-
$
|
|
236
|
+
$884c64d19340d345$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
|
|
237
237
|
flex.parentNode.removeChild(flex);
|
|
238
|
-
return $
|
|
238
|
+
return $884c64d19340d345$var$_isFlexGapSupported;
|
|
239
239
|
}
|
|
240
240
|
/**
|
|
241
241
|
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
242
242
|
* property to define consistent spacing between items.
|
|
243
|
-
*/ const $
|
|
243
|
+
*/ const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ $9LQqs$forwardRef($884c64d19340d345$var$Flex);
|
|
244
244
|
|
|
245
245
|
|
|
246
246
|
|
|
247
247
|
|
|
248
|
-
export {$
|
|
248
|
+
export {$994c48bfb00b620b$export$76d90c956114f2c2 as repeat, $994c48bfb00b620b$export$9c1b655deaca4988 as minmax, $994c48bfb00b620b$export$2f0b47b0911ce698 as fitContent, $994c48bfb00b620b$export$ef2184bd89960b14 as Grid, $884c64d19340d345$export$f51f4c4ede09e011 as Flex};
|
|
249
249
|
//# sourceMappingURL=module.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/layout",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.4-nightly.3113+404d41859",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.6.2",
|
|
35
|
-
"@react-aria/ssr": "
|
|
36
|
-
"@react-aria/utils": "
|
|
37
|
-
"@react-spectrum/utils": "
|
|
38
|
-
"@react-types/layout": "
|
|
39
|
-
"@react-types/shared": "
|
|
35
|
+
"@react-aria/ssr": "3.1.3-nightly.3113+404d41859",
|
|
36
|
+
"@react-aria/utils": "3.0.0-nightly.1417+404d41859",
|
|
37
|
+
"@react-spectrum/utils": "3.0.0-nightly.1417+404d41859",
|
|
38
|
+
"@react-types/layout": "3.2.3-nightly.3113+404d41859",
|
|
39
|
+
"@react-types/shared": "3.0.0-nightly.1417+404d41859",
|
|
40
40
|
"clsx": "^1.1.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@adobe/spectrum-css-temp": "3.0.0-
|
|
43
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.1417+404d41859"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@react-spectrum/provider": "^3.0.0",
|