@react-spectrum/layout 3.2.2-nightly.3036 → 3.2.2-nightly.3047

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.css CHANGED
@@ -1,2 +1 @@
1
- ._flex-container_6144c,._flex_6144c{display:-ms-flexbox;display:flex}._flex-gap_6144c{--gap:0px;--column-gap:var(--gap);--row-gap:var(--gap);margin:calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);width:calc(100% + var(--column-gap) + 1px);height:calc(100% + var(--row-gap))}._flex-container_6144c ._flex-gap_6144c>*{margin:calc(var(--row-gap) / 2) calc(var(--column-gap) / 2)}
2
- /*# sourceMappingURL=main.css.map */
1
+ ._flex-container_e15493,._flex_e15493{display:-ms-flexbox;display:flex}._flex-gap_e15493{--gap:0px;--column-gap:var(--gap);--row-gap:var(--gap);height:calc(100% + var(--row-gap));margin:calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);width:calc(100% + var(--column-gap) + 1px)}._flex-container_e15493 ._flex-gap_e15493>*{margin:calc(var(--row-gap) / 2) calc(var(--column-gap) / 2)}
package/dist/main.js CHANGED
@@ -1,279 +1,266 @@
1
- var {
2
- useIsSSR
3
- } = require("@react-aria/ssr");
4
-
5
- var _react2 = require("react");
6
-
7
- var _react = $parcel$interopDefault(_react2);
8
-
9
- var {
10
- forwardRef
11
- } = _react2;
12
-
13
- var {
14
- filterDOMProps
15
- } = require("@react-aria/utils");
16
-
17
- var {
18
- baseStyleProps,
19
- dimensionValue,
20
- passthroughStyle,
21
- useDOMRef,
22
- useStyleProps,
23
- classNames,
24
- responsiveDimensionValue,
25
- useBreakpoint
26
- } = require("@react-spectrum/utils");
27
-
28
- var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
29
-
30
- var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
31
-
32
1
  require("./main.css");
2
+ var $7sZ04$reactspectrumutils = require("@react-spectrum/utils");
3
+ var $7sZ04$reactariautils = require("@react-aria/utils");
4
+ var $7sZ04$react = require("react");
5
+ var $7sZ04$reactariassr = require("@react-aria/ssr");
6
+
7
+ function $parcel$exportWildcard(dest, source) {
8
+ Object.keys(source).forEach(function(key) {
9
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
10
+ return;
11
+ }
12
+
13
+ Object.defineProperty(dest, key, {
14
+ enumerable: true,
15
+ get: function get() {
16
+ return source[key];
17
+ }
18
+ });
19
+ });
33
20
 
21
+ return dest;
22
+ }
34
23
  function $parcel$interopDefault(a) {
35
24
  return a && a.__esModule ? a.default : a;
36
25
  }
37
-
38
- const $f784fbb881b5b101cd7607722a86$var$gridStyleProps = _babelRuntimeHelpersExtends({}, baseStyleProps, {
39
- autoFlow: ['gridAutoFlow', passthroughStyle],
40
- autoColumns: ['gridAutoColumns', $f784fbb881b5b101cd7607722a86$var$gridDimensionValue],
41
- autoRows: ['gridAutoRows', $f784fbb881b5b101cd7607722a86$var$gridDimensionValue],
42
- areas: ['gridTemplateAreas', $f784fbb881b5b101cd7607722a86$var$gridTemplateAreasValue],
43
- columns: ['gridTemplateColumns', $f784fbb881b5b101cd7607722a86$var$gridTemplateValue],
44
- rows: ['gridTemplateRows', $f784fbb881b5b101cd7607722a86$var$gridTemplateValue],
45
- gap: ['gap', dimensionValue],
46
- rowGap: ['rowGap', dimensionValue],
47
- columnGap: ['columnGap', dimensionValue],
48
- justifyItems: ['justifyItems', passthroughStyle],
49
- justifyContent: ['justifyContent', passthroughStyle],
50
- alignItems: ['alignItems', passthroughStyle],
51
- alignContent: ['alignContent', passthroughStyle]
52
- });
53
-
54
- function $f784fbb881b5b101cd7607722a86$var$Grid(props, ref) {
55
- let {
56
- children
57
- } = props,
58
- otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children"]);
59
-
60
- let {
61
- styleProps
62
- } = useStyleProps(otherProps, $f784fbb881b5b101cd7607722a86$var$gridStyleProps);
63
- styleProps.style.display = 'grid'; // inline-grid?
64
-
65
- let domRef = useDOMRef(ref);
66
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, filterDOMProps(otherProps), styleProps, {
67
- ref: domRef
68
- }), children);
26
+ function $parcel$export(e, n, v, s) {
27
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
69
28
  }
70
- /**
71
- * Can be used to make a repeating fragment of the columns or rows list.
72
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
73
- * @param count - The number of times to repeat the fragment.
74
- * @param repeat - The fragment to repeat.
75
- */
76
-
77
-
78
- function repeat(count, repeat) {
79
- return "repeat(" + count + ", " + $f784fbb881b5b101cd7607722a86$var$gridTemplateValue(repeat) + ")";
29
+ var $702303612cb59c6a$exports = {};
30
+
31
+ $parcel$export($702303612cb59c6a$exports, "repeat", () => $702303612cb59c6a$export$76d90c956114f2c2);
32
+ $parcel$export($702303612cb59c6a$exports, "minmax", () => $702303612cb59c6a$export$9c1b655deaca4988);
33
+ $parcel$export($702303612cb59c6a$exports, "fitContent", () => $702303612cb59c6a$export$2f0b47b0911ce698);
34
+ $parcel$export($702303612cb59c6a$exports, "Grid", () => $702303612cb59c6a$export$ef2184bd89960b14);
35
+
36
+
37
+
38
+ const $702303612cb59c6a$var$gridStyleProps = {
39
+ ...$7sZ04$reactspectrumutils.baseStyleProps,
40
+ autoFlow: [
41
+ 'gridAutoFlow',
42
+ $7sZ04$reactspectrumutils.passthroughStyle
43
+ ],
44
+ autoColumns: [
45
+ 'gridAutoColumns',
46
+ $702303612cb59c6a$var$gridDimensionValue
47
+ ],
48
+ autoRows: [
49
+ 'gridAutoRows',
50
+ $702303612cb59c6a$var$gridDimensionValue
51
+ ],
52
+ areas: [
53
+ 'gridTemplateAreas',
54
+ $702303612cb59c6a$var$gridTemplateAreasValue
55
+ ],
56
+ columns: [
57
+ 'gridTemplateColumns',
58
+ $702303612cb59c6a$var$gridTemplateValue
59
+ ],
60
+ rows: [
61
+ 'gridTemplateRows',
62
+ $702303612cb59c6a$var$gridTemplateValue
63
+ ],
64
+ gap: [
65
+ 'gap',
66
+ $7sZ04$reactspectrumutils.dimensionValue
67
+ ],
68
+ rowGap: [
69
+ 'rowGap',
70
+ $7sZ04$reactspectrumutils.dimensionValue
71
+ ],
72
+ columnGap: [
73
+ 'columnGap',
74
+ $7sZ04$reactspectrumutils.dimensionValue
75
+ ],
76
+ justifyItems: [
77
+ 'justifyItems',
78
+ $7sZ04$reactspectrumutils.passthroughStyle
79
+ ],
80
+ justifyContent: [
81
+ 'justifyContent',
82
+ $7sZ04$reactspectrumutils.passthroughStyle
83
+ ],
84
+ alignItems: [
85
+ 'alignItems',
86
+ $7sZ04$reactspectrumutils.passthroughStyle
87
+ ],
88
+ alignContent: [
89
+ 'alignContent',
90
+ $7sZ04$reactspectrumutils.passthroughStyle
91
+ ]
92
+ };
93
+ function $702303612cb59c6a$var$Grid(props, ref) {
94
+ let { children: children , ...otherProps } = props;
95
+ let { styleProps: styleProps } = $7sZ04$reactspectrumutils.useStyleProps(otherProps, $702303612cb59c6a$var$gridStyleProps);
96
+ styleProps.style.display = 'grid'; // inline-grid?
97
+ let domRef = $7sZ04$reactspectrumutils.useDOMRef(ref);
98
+ return(/*#__PURE__*/ ($parcel$interopDefault($7sZ04$react)).createElement("div", {
99
+ ...$7sZ04$reactariautils.filterDOMProps(otherProps),
100
+ ...styleProps,
101
+ ref: domRef
102
+ }, children));
80
103
  }
81
- /**
82
- * Defines a size range greater than or equal to min and less than or equal to max.
83
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).
84
- * @param min - The minimum size.
85
- * @param max - The maximum size.
86
- */
87
-
88
-
89
- exports.repeat = repeat;
90
-
91
- function minmax(min, max) {
92
- return "minmax(" + $f784fbb881b5b101cd7607722a86$var$gridDimensionValue(min) + ", " + $f784fbb881b5b101cd7607722a86$var$gridDimensionValue(max) + ")";
104
+ function $702303612cb59c6a$export$76d90c956114f2c2(count, $702303612cb59c6a$export$76d90c956114f2c2) {
105
+ return `repeat(${count}, ${$702303612cb59c6a$var$gridTemplateValue($702303612cb59c6a$export$76d90c956114f2c2)})`;
93
106
  }
94
- /**
95
- * Clamps a given size to an available size.
96
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).
97
- * @param dimension - The size to clamp.
98
- */
99
-
100
-
101
- exports.minmax = minmax;
102
-
103
- function fitContent(dimension) {
104
- return "fit-content(" + $f784fbb881b5b101cd7607722a86$var$gridDimensionValue(dimension) + ")";
107
+ function $702303612cb59c6a$export$9c1b655deaca4988(min, max) {
108
+ return `minmax(${$702303612cb59c6a$var$gridDimensionValue(min)}, ${$702303612cb59c6a$var$gridDimensionValue(max)})`;
105
109
  }
106
-
107
- exports.fitContent = fitContent;
108
-
109
- function $f784fbb881b5b101cd7607722a86$var$gridTemplateAreasValue(value) {
110
- return value.map(v => "\"" + v + "\"").join('\n');
110
+ function $702303612cb59c6a$export$2f0b47b0911ce698(dimension) {
111
+ return `fit-content(${$702303612cb59c6a$var$gridDimensionValue(dimension)})`;
111
112
  }
112
-
113
- function $f784fbb881b5b101cd7607722a86$var$gridDimensionValue(value) {
114
- if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {
115
- return value;
116
- }
117
-
118
- return dimensionValue(value);
113
+ function $702303612cb59c6a$var$gridTemplateAreasValue(value) {
114
+ return value.map((v)=>`"${v}"`
115
+ ).join('\n');
119
116
  }
120
-
121
- function $f784fbb881b5b101cd7607722a86$var$gridTemplateValue(value) {
122
- if (Array.isArray(value)) {
123
- return value.map($f784fbb881b5b101cd7607722a86$var$gridDimensionValue).join(' ');
124
- }
125
-
126
- return $f784fbb881b5b101cd7607722a86$var$gridDimensionValue(value);
117
+ function $702303612cb59c6a$var$gridDimensionValue(value) {
118
+ if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
119
+ return $7sZ04$reactspectrumutils.dimensionValue(value);
120
+ }
121
+ function $702303612cb59c6a$var$gridTemplateValue(value) {
122
+ if (Array.isArray(value)) return value.map($702303612cb59c6a$var$gridDimensionValue).join(' ');
123
+ return $702303612cb59c6a$var$gridDimensionValue(value);
127
124
  }
128
125
  /**
129
126
  * A layout container using CSS grid. Supports Spectrum dimensions as values to
130
127
  * ensure consistent and adaptive sizing and spacing.
131
- */
132
-
133
-
134
- const Grid = /*#__PURE__*/forwardRef($f784fbb881b5b101cd7607722a86$var$Grid);
135
- exports.Grid = Grid;
136
- // ASSET: /home/circleci/react-spectrum/packages/@react-spectrum/layout/src/flex-gap.css
137
- var $fc072772828195097956358aadf4fa$exports = {};
138
- $fc072772828195097956358aadf4fa$exports = {
139
- "flex-container": "_flex-container_6144c",
140
- "-ms-flex": "_flex_6144c",
141
- "flex": "_flex_6144c",
142
- "flex-gap": "_flex-gap_6144c"
143
- };
144
- const $e9098d18abf2a118bc3bc95f0d402bb5$var$flexStyleProps = {
145
- direction: ['flexDirection', passthroughStyle],
146
- wrap: ['flexWrap', $e9098d18abf2a118bc3bc95f0d402bb5$var$flexWrapValue],
147
- justifyContent: ['justifyContent', $e9098d18abf2a118bc3bc95f0d402bb5$var$flexAlignValue],
148
- alignItems: ['alignItems', $e9098d18abf2a118bc3bc95f0d402bb5$var$flexAlignValue],
149
- alignContent: ['alignContent', $e9098d18abf2a118bc3bc95f0d402bb5$var$flexAlignValue]
128
+ */ const $702303612cb59c6a$export$ef2184bd89960b14 = /*#__PURE__*/ $7sZ04$react.forwardRef($702303612cb59c6a$var$Grid);
129
+
130
+
131
+ var $e321e5cdc9cc685b$exports = {};
132
+
133
+ $parcel$export($e321e5cdc9cc685b$exports, "Flex", () => $e321e5cdc9cc685b$export$f51f4c4ede09e011);
134
+
135
+
136
+
137
+ var $5965d0ff00ce6fc2$exports = {};
138
+
139
+ $parcel$export($5965d0ff00ce6fc2$exports, "flex-container", () => $5965d0ff00ce6fc2$export$69d7a39fa31a000b, (v) => $5965d0ff00ce6fc2$export$69d7a39fa31a000b = v);
140
+ $parcel$export($5965d0ff00ce6fc2$exports, "flex", () => $5965d0ff00ce6fc2$export$97691fbb80847c19, (v) => $5965d0ff00ce6fc2$export$97691fbb80847c19 = v);
141
+ $parcel$export($5965d0ff00ce6fc2$exports, "flex-gap", () => $5965d0ff00ce6fc2$export$31a9da8b58047a44, (v) => $5965d0ff00ce6fc2$export$31a9da8b58047a44 = v);
142
+ var $5965d0ff00ce6fc2$export$69d7a39fa31a000b;
143
+ var $5965d0ff00ce6fc2$export$97691fbb80847c19;
144
+ var $5965d0ff00ce6fc2$export$31a9da8b58047a44;
145
+ $5965d0ff00ce6fc2$export$69d7a39fa31a000b = "_flex-container_e15493";
146
+ $5965d0ff00ce6fc2$export$97691fbb80847c19 = "_flex_e15493";
147
+ $5965d0ff00ce6fc2$export$31a9da8b58047a44 = "_flex-gap_e15493";
148
+
149
+
150
+
151
+ const $e321e5cdc9cc685b$var$flexStyleProps = {
152
+ direction: [
153
+ 'flexDirection',
154
+ $7sZ04$reactspectrumutils.passthroughStyle
155
+ ],
156
+ wrap: [
157
+ 'flexWrap',
158
+ $e321e5cdc9cc685b$var$flexWrapValue
159
+ ],
160
+ justifyContent: [
161
+ 'justifyContent',
162
+ $e321e5cdc9cc685b$var$flexAlignValue
163
+ ],
164
+ alignItems: [
165
+ 'alignItems',
166
+ $e321e5cdc9cc685b$var$flexAlignValue
167
+ ],
168
+ alignContent: [
169
+ 'alignContent',
170
+ $e321e5cdc9cc685b$var$flexAlignValue
171
+ ]
150
172
  };
151
- var $fc072772828195097956358aadf4fa$$interop$default = $parcel$interopDefault($fc072772828195097956358aadf4fa$exports);
152
-
153
- function $e9098d18abf2a118bc3bc95f0d402bb5$var$Flex(props, ref) {
154
- let {
155
- children
156
- } = props,
157
- otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children"]);
158
-
159
- let breakpointProvider = useBreakpoint();
160
- let matchedBreakpoints = (breakpointProvider == null ? void 0 : breakpointProvider.matchedBreakpoints) || ['base'];
161
- let {
162
- styleProps
163
- } = useStyleProps(otherProps);
164
- let {
165
- styleProps: flexStyle
166
- } = useStyleProps(otherProps, $e9098d18abf2a118bc3bc95f0d402bb5$var$flexStyleProps);
167
- let domRef = useDOMRef(ref);
168
- let isSSR = useIsSSR(); // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
169
- // Two divs are required for this: the outer one contains most style properties, and the inner
170
- // one is the flex container. Each item inside the flex container gets a margin around it based
171
- // on the gap, and the flex container has a negative margin to counteract this. The outer container
172
- // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
173
- // override the outer one.
174
-
175
- if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$e9098d18abf2a118bc3bc95f0d402bb5$var$isFlexGapSupported())) {
176
- let style = _babelRuntimeHelpersExtends({}, flexStyle.style, {
177
- '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
178
- '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
179
- '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
180
- });
181
-
182
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, filterDOMProps(otherProps), styleProps, {
183
- className: classNames($fc072772828195097956358aadf4fa$$interop$default, 'flex-container', styleProps.className),
184
- ref: domRef
185
- }), /*#__PURE__*/_react.createElement("div", {
186
- className: classNames($fc072772828195097956358aadf4fa$$interop$default, 'flex', 'flex-gap'),
187
- style: style
173
+ function $e321e5cdc9cc685b$var$Flex(props, ref) {
174
+ let { children: children , ...otherProps } = props;
175
+ let breakpointProvider = $7sZ04$reactspectrumutils.useBreakpoint();
176
+ let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || [
177
+ 'base'
178
+ ];
179
+ let { styleProps: styleProps } = $7sZ04$reactspectrumutils.useStyleProps(otherProps);
180
+ let { styleProps: flexStyle } = $7sZ04$reactspectrumutils.useStyleProps(otherProps, $e321e5cdc9cc685b$var$flexStyleProps);
181
+ let domRef = $7sZ04$reactspectrumutils.useDOMRef(ref);
182
+ let isSSR = $7sZ04$reactariassr.useIsSSR();
183
+ // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
184
+ // Two divs are required for this: the outer one contains most style properties, and the inner
185
+ // one is the flex container. Each item inside the flex container gets a margin around it based
186
+ // on the gap, and the flex container has a negative margin to counteract this. The outer container
187
+ // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
188
+ // override the outer one.
189
+ if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$e321e5cdc9cc685b$var$isFlexGapSupported())) {
190
+ let style = {
191
+ ...flexStyle.style,
192
+ '--column-gap': props.columnGap != null ? $7sZ04$reactspectrumutils.responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
193
+ '--row-gap': props.rowGap != null ? $7sZ04$reactspectrumutils.responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
194
+ '--gap': props.gap != null ? $7sZ04$reactspectrumutils.responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
195
+ };
196
+ return(/*#__PURE__*/ ($parcel$interopDefault($7sZ04$react)).createElement("div", {
197
+ ...$7sZ04$reactariautils.filterDOMProps(otherProps),
198
+ ...styleProps,
199
+ className: $7sZ04$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($5965d0ff00ce6fc2$exports)), 'flex-container', styleProps.className),
200
+ ref: domRef
201
+ }, /*#__PURE__*/ ($parcel$interopDefault($7sZ04$react)).createElement("div", {
202
+ className: $7sZ04$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($5965d0ff00ce6fc2$exports)), 'flex', 'flex-gap'),
203
+ style: style
204
+ }, children)));
205
+ }
206
+ // If no gaps, or native support exists, then we only need to render a single div.
207
+ let style = {
208
+ ...styleProps.style,
209
+ ...flexStyle.style
210
+ };
211
+ if (props.gap != null) style.gap = $7sZ04$reactspectrumutils.responsiveDimensionValue(props.gap, matchedBreakpoints);
212
+ if (props.columnGap != null) style.columnGap = $7sZ04$reactspectrumutils.responsiveDimensionValue(props.columnGap, matchedBreakpoints);
213
+ if (props.rowGap != null) style.rowGap = $7sZ04$reactspectrumutils.responsiveDimensionValue(props.rowGap, matchedBreakpoints);
214
+ return(/*#__PURE__*/ ($parcel$interopDefault($7sZ04$react)).createElement("div", {
215
+ ...$7sZ04$reactariautils.filterDOMProps(otherProps),
216
+ className: $7sZ04$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($5965d0ff00ce6fc2$exports)), 'flex', styleProps.className),
217
+ style: style,
218
+ ref: domRef
188
219
  }, children));
189
- } // If no gaps, or native support exists, then we only need to render a single div.
190
-
191
-
192
- let style = _babelRuntimeHelpersExtends({}, styleProps.style, flexStyle.style);
193
-
194
- if (props.gap != null) {
195
- style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
196
- }
197
-
198
- if (props.columnGap != null) {
199
- style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);
200
- }
201
-
202
- if (props.rowGap != null) {
203
- style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
204
- }
205
-
206
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, filterDOMProps(otherProps), {
207
- className: classNames($fc072772828195097956358aadf4fa$$interop$default, 'flex', styleProps.className),
208
- style: style,
209
- ref: domRef
210
- }), children);
211
220
  }
212
221
  /**
213
222
  * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
214
223
  * in flex containers for browser compatibility.
215
- */
216
-
217
-
218
- function $e9098d18abf2a118bc3bc95f0d402bb5$var$flexAlignValue(value) {
219
- if (value === 'start') {
220
- return 'flex-start';
221
- }
222
-
223
- if (value === 'end') {
224
- return 'flex-end';
225
- }
226
-
227
- return value;
224
+ */ function $e321e5cdc9cc685b$var$flexAlignValue(value) {
225
+ if (value === 'start') return 'flex-start';
226
+ if (value === 'end') return 'flex-end';
227
+ return value;
228
228
  }
229
229
  /**
230
230
  * Takes a boolean and translates it to flex wrap or nowrap.
231
- */
232
-
233
-
234
- function $e9098d18abf2a118bc3bc95f0d402bb5$var$flexWrapValue(value) {
235
- if (typeof value === 'boolean') {
236
- return value ? 'wrap' : 'nowrap';
237
- }
238
-
239
- return value;
240
- } // Original licensing for the following method can be found in the
231
+ */ function $e321e5cdc9cc685b$var$flexWrapValue(value) {
232
+ if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
233
+ return value;
234
+ }
235
+ // Original licensing for the following method can be found in the
241
236
  // NOTICE file in the root directory of this source tree.
242
237
  // See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
243
-
244
-
245
- let $e9098d18abf2a118bc3bc95f0d402bb5$var$_isFlexGapSupported = null;
246
-
247
- function $e9098d18abf2a118bc3bc95f0d402bb5$var$isFlexGapSupported() {
248
- if ($e9098d18abf2a118bc3bc95f0d402bb5$var$_isFlexGapSupported != null) {
249
- return $e9098d18abf2a118bc3bc95f0d402bb5$var$_isFlexGapSupported;
250
- }
251
-
252
- if (typeof document === 'undefined') {
253
- return false;
254
- } // create flex container with row-gap set
255
-
256
-
257
- var flex = document.createElement('div');
258
- flex.style.display = 'flex';
259
- flex.style.flexDirection = 'column';
260
- flex.style.rowGap = '1px'; // create two, elements inside it
261
-
262
- flex.appendChild(document.createElement('div'));
263
- flex.appendChild(document.createElement('div')); // append to the DOM (needed to obtain scrollHeight)
264
-
265
- document.body.appendChild(flex);
266
- $e9098d18abf2a118bc3bc95f0d402bb5$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
267
-
268
- flex.parentNode.removeChild(flex);
269
- return $e9098d18abf2a118bc3bc95f0d402bb5$var$_isFlexGapSupported;
238
+ let $e321e5cdc9cc685b$var$_isFlexGapSupported = null;
239
+ function $e321e5cdc9cc685b$var$isFlexGapSupported() {
240
+ if ($e321e5cdc9cc685b$var$_isFlexGapSupported != null) return $e321e5cdc9cc685b$var$_isFlexGapSupported;
241
+ if (typeof document === 'undefined') return false;
242
+ // create flex container with row-gap set
243
+ var flex = document.createElement('div');
244
+ flex.style.display = 'flex';
245
+ flex.style.flexDirection = 'column';
246
+ flex.style.rowGap = '1px';
247
+ // create two, elements inside it
248
+ flex.appendChild(document.createElement('div'));
249
+ flex.appendChild(document.createElement('div'));
250
+ // append to the DOM (needed to obtain scrollHeight)
251
+ document.body.appendChild(flex);
252
+ $e321e5cdc9cc685b$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
253
+ flex.parentNode.removeChild(flex);
254
+ return $e321e5cdc9cc685b$var$_isFlexGapSupported;
270
255
  }
271
256
  /**
272
257
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
273
258
  * property to define consistent spacing between items.
274
- */
259
+ */ const $e321e5cdc9cc685b$export$f51f4c4ede09e011 = /*#__PURE__*/ $7sZ04$react.forwardRef($e321e5cdc9cc685b$var$Flex);
260
+
261
+
262
+ $parcel$exportWildcard(module.exports, $702303612cb59c6a$exports);
263
+ $parcel$exportWildcard(module.exports, $e321e5cdc9cc685b$exports);
275
264
 
276
265
 
277
- const Flex = /*#__PURE__*/forwardRef($e9098d18abf2a118bc3bc95f0d402bb5$var$Flex);
278
- exports.Flex = Flex;
279
266
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-spectrum/layout/src/Grid.tsx","./packages/@react-spectrum/layout/src/flex-gap.css","./packages/@react-spectrum/layout/src/Flex.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\nfunction Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n styleProps.style.display = 'grid'; // inline-grid?\n let domRef = useDOMRef(ref);\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Can be used to make a repeating fragment of the columns or rows list.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).\n * @param count - The number of times to repeat the fragment.\n * @param repeat - The fragment to repeat.\n */\nexport function repeat(count: number | 'auto-fill' | 'auto-fit', repeat: DimensionValue | DimensionValue[]): string {\n return `repeat(${count}, ${gridTemplateValue(repeat)})`;\n}\n\n/**\n * Defines a size range greater than or equal to min and less than or equal to max.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).\n * @param min - The minimum size.\n * @param max - The maximum size.\n */\nexport function minmax(min: DimensionValue, max: DimensionValue): string {\n return `minmax(${gridDimensionValue(min)}, ${gridDimensionValue(max)})`;\n}\n\n/**\n * Clamps a given size to an available size.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).\n * @param dimension - The size to clamp.\n */\nexport function fitContent(dimension: DimensionValue): string {\n return `fit-content(${gridDimensionValue(dimension)})`;\n}\n\nfunction gridTemplateAreasValue(value) {\n return value.map(v => `\"${v}\"`).join('\\n');\n}\n\nfunction gridDimensionValue(value) {\n if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {\n return value;\n }\n\n return dimensionValue(value);\n}\n\nfunction gridTemplateValue(value) {\n if (Array.isArray(value)) {\n return value.map(gridDimensionValue).join(' ');\n }\n\n return gridDimensionValue(value);\n}\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nconst _Grid = forwardRef(Grid);\nexport {_Grid as Grid};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FlexProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\nimport styles from './flex-gap.css';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n"],"names":["$parcel$interopDefault","a","__esModule","default","gridStyleProps","baseStyleProps","autoFlow","passthroughStyle","autoColumns","gridDimensionValue","autoRows","areas","gridTemplateAreasValue","columns","gridTemplateValue","rows","gap","dimensionValue","rowGap","columnGap","justifyItems","justifyContent","alignItems","alignContent","Grid","props","ref","children","otherProps","styleProps","useStyleProps","style","display","domRef","useDOMRef","filterDOMProps","repeat","count","minmax","min","max","fitContent","dimension","value","map","v","join","test","Array","isArray","_Grid","forwardRef","flexStyleProps","direction","wrap","flexWrapValue","flexAlignValue","Flex","breakpointProvider","useBreakpoint","matchedBreakpoints","flexStyle","isSSR","useIsSSR","isFlexGapSupported","responsiveDimensionValue","undefined","classNames","className","_isFlexGapSupported","document","flex","createElement","flexDirection","appendChild","body","scrollHeight","parentNode","removeChild","_Flex"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport * from './Grid';\nexport * from './Flex';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\nfunction Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n styleProps.style.display = 'grid'; // inline-grid?\n let domRef = useDOMRef(ref);\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Can be used to make a repeating fragment of the columns or rows list.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).\n * @param count - The number of times to repeat the fragment.\n * @param repeat - The fragment to repeat.\n */\nexport function repeat(count: number | 'auto-fill' | 'auto-fit', repeat: DimensionValue | DimensionValue[]): string {\n return `repeat(${count}, ${gridTemplateValue(repeat)})`;\n}\n\n/**\n * Defines a size range greater than or equal to min and less than or equal to max.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).\n * @param min - The minimum size.\n * @param max - The maximum size.\n */\nexport function minmax(min: DimensionValue, max: DimensionValue): string {\n return `minmax(${gridDimensionValue(min)}, ${gridDimensionValue(max)})`;\n}\n\n/**\n * Clamps a given size to an available size.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).\n * @param dimension - The size to clamp.\n */\nexport function fitContent(dimension: DimensionValue): string {\n return `fit-content(${gridDimensionValue(dimension)})`;\n}\n\nfunction gridTemplateAreasValue(value) {\n return value.map(v => `\"${v}\"`).join('\\n');\n}\n\nfunction gridDimensionValue(value) {\n if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {\n return value;\n }\n\n return dimensionValue(value);\n}\n\nfunction gridTemplateValue(value) {\n if (Array.isArray(value)) {\n return value.map(gridDimensionValue).join(' ');\n }\n\n return gridDimensionValue(value);\n}\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nconst _Grid = forwardRef(Grid);\nexport {_Grid as Grid};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FlexProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\nimport styles from './flex-gap.css';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,244 +1,249 @@
1
- import { useIsSSR } from "@react-aria/ssr";
2
- import _react, { forwardRef } from "react";
3
- import { filterDOMProps } from "@react-aria/utils";
4
- import { baseStyleProps, dimensionValue, passthroughStyle, useDOMRef, useStyleProps, classNames, responsiveDimensionValue, useBreakpoint } from "@react-spectrum/utils";
5
- import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
6
- import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
7
1
  import "./main.css";
2
+ import {baseStyleProps as $4QZis$baseStyleProps, passthroughStyle as $4QZis$passthroughStyle, dimensionValue as $4QZis$dimensionValue, useStyleProps as $4QZis$useStyleProps, useDOMRef as $4QZis$useDOMRef, useBreakpoint as $4QZis$useBreakpoint, responsiveDimensionValue as $4QZis$responsiveDimensionValue, classNames as $4QZis$classNames} from "@react-spectrum/utils";
3
+ import {filterDOMProps as $4QZis$filterDOMProps} from "@react-aria/utils";
4
+ import $4QZis$react, {forwardRef as $4QZis$forwardRef} from "react";
5
+ import {useIsSSR as $4QZis$useIsSSR} from "@react-aria/ssr";
8
6
 
7
+ function $parcel$export(e, n, v, s) {
8
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
9
+ }
9
10
  function $parcel$interopDefault(a) {
10
11
  return a && a.__esModule ? a.default : a;
11
12
  }
12
-
13
- const $b23dc17afddee903803cb9d0132e8399$var$gridStyleProps = _babelRuntimeHelpersEsmExtends({}, baseStyleProps, {
14
- autoFlow: ['gridAutoFlow', passthroughStyle],
15
- autoColumns: ['gridAutoColumns', $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue],
16
- autoRows: ['gridAutoRows', $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue],
17
- areas: ['gridTemplateAreas', $b23dc17afddee903803cb9d0132e8399$var$gridTemplateAreasValue],
18
- columns: ['gridTemplateColumns', $b23dc17afddee903803cb9d0132e8399$var$gridTemplateValue],
19
- rows: ['gridTemplateRows', $b23dc17afddee903803cb9d0132e8399$var$gridTemplateValue],
20
- gap: ['gap', dimensionValue],
21
- rowGap: ['rowGap', dimensionValue],
22
- columnGap: ['columnGap', dimensionValue],
23
- justifyItems: ['justifyItems', passthroughStyle],
24
- justifyContent: ['justifyContent', passthroughStyle],
25
- alignItems: ['alignItems', passthroughStyle],
26
- alignContent: ['alignContent', passthroughStyle]
27
- });
28
-
29
- function $b23dc17afddee903803cb9d0132e8399$var$Grid(props, ref) {
30
- let {
31
- children
32
- } = props,
33
- otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children"]);
34
-
35
- let {
36
- styleProps
37
- } = useStyleProps(otherProps, $b23dc17afddee903803cb9d0132e8399$var$gridStyleProps);
38
- styleProps.style.display = 'grid'; // inline-grid?
39
-
40
- let domRef = useDOMRef(ref);
41
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, filterDOMProps(otherProps), styleProps, {
42
- ref: domRef
43
- }), children);
13
+ var $698863dbed9612fa$exports = {};
14
+
15
+ $parcel$export($698863dbed9612fa$exports, "repeat", () => $698863dbed9612fa$export$76d90c956114f2c2);
16
+ $parcel$export($698863dbed9612fa$exports, "minmax", () => $698863dbed9612fa$export$9c1b655deaca4988);
17
+ $parcel$export($698863dbed9612fa$exports, "fitContent", () => $698863dbed9612fa$export$2f0b47b0911ce698);
18
+ $parcel$export($698863dbed9612fa$exports, "Grid", () => $698863dbed9612fa$export$ef2184bd89960b14);
19
+
20
+
21
+
22
+ const $698863dbed9612fa$var$gridStyleProps = {
23
+ ...$4QZis$baseStyleProps,
24
+ autoFlow: [
25
+ 'gridAutoFlow',
26
+ $4QZis$passthroughStyle
27
+ ],
28
+ autoColumns: [
29
+ 'gridAutoColumns',
30
+ $698863dbed9612fa$var$gridDimensionValue
31
+ ],
32
+ autoRows: [
33
+ 'gridAutoRows',
34
+ $698863dbed9612fa$var$gridDimensionValue
35
+ ],
36
+ areas: [
37
+ 'gridTemplateAreas',
38
+ $698863dbed9612fa$var$gridTemplateAreasValue
39
+ ],
40
+ columns: [
41
+ 'gridTemplateColumns',
42
+ $698863dbed9612fa$var$gridTemplateValue
43
+ ],
44
+ rows: [
45
+ 'gridTemplateRows',
46
+ $698863dbed9612fa$var$gridTemplateValue
47
+ ],
48
+ gap: [
49
+ 'gap',
50
+ $4QZis$dimensionValue
51
+ ],
52
+ rowGap: [
53
+ 'rowGap',
54
+ $4QZis$dimensionValue
55
+ ],
56
+ columnGap: [
57
+ 'columnGap',
58
+ $4QZis$dimensionValue
59
+ ],
60
+ justifyItems: [
61
+ 'justifyItems',
62
+ $4QZis$passthroughStyle
63
+ ],
64
+ justifyContent: [
65
+ 'justifyContent',
66
+ $4QZis$passthroughStyle
67
+ ],
68
+ alignItems: [
69
+ 'alignItems',
70
+ $4QZis$passthroughStyle
71
+ ],
72
+ alignContent: [
73
+ 'alignContent',
74
+ $4QZis$passthroughStyle
75
+ ]
76
+ };
77
+ function $698863dbed9612fa$var$Grid(props, ref) {
78
+ let { children: children , ...otherProps } = props;
79
+ let { styleProps: styleProps } = $4QZis$useStyleProps(otherProps, $698863dbed9612fa$var$gridStyleProps);
80
+ styleProps.style.display = 'grid'; // inline-grid?
81
+ let domRef = $4QZis$useDOMRef(ref);
82
+ return(/*#__PURE__*/ $4QZis$react.createElement("div", {
83
+ ...$4QZis$filterDOMProps(otherProps),
84
+ ...styleProps,
85
+ ref: domRef
86
+ }, children));
44
87
  }
45
- /**
46
- * Can be used to make a repeating fragment of the columns or rows list.
47
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
48
- * @param count - The number of times to repeat the fragment.
49
- * @param repeat - The fragment to repeat.
50
- */
51
-
52
-
53
- export function repeat(count, repeat) {
54
- return "repeat(" + count + ", " + $b23dc17afddee903803cb9d0132e8399$var$gridTemplateValue(repeat) + ")";
88
+ function $698863dbed9612fa$export$76d90c956114f2c2(count, $698863dbed9612fa$export$76d90c956114f2c2) {
89
+ return `repeat(${count}, ${$698863dbed9612fa$var$gridTemplateValue($698863dbed9612fa$export$76d90c956114f2c2)})`;
55
90
  }
56
- /**
57
- * Defines a size range greater than or equal to min and less than or equal to max.
58
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).
59
- * @param min - The minimum size.
60
- * @param max - The maximum size.
61
- */
62
-
63
- export function minmax(min, max) {
64
- return "minmax(" + $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue(min) + ", " + $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue(max) + ")";
91
+ function $698863dbed9612fa$export$9c1b655deaca4988(min, max) {
92
+ return `minmax(${$698863dbed9612fa$var$gridDimensionValue(min)}, ${$698863dbed9612fa$var$gridDimensionValue(max)})`;
65
93
  }
66
- /**
67
- * Clamps a given size to an available size.
68
- * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).
69
- * @param dimension - The size to clamp.
70
- */
71
-
72
- export function fitContent(dimension) {
73
- return "fit-content(" + $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue(dimension) + ")";
94
+ function $698863dbed9612fa$export$2f0b47b0911ce698(dimension) {
95
+ return `fit-content(${$698863dbed9612fa$var$gridDimensionValue(dimension)})`;
74
96
  }
75
-
76
- function $b23dc17afddee903803cb9d0132e8399$var$gridTemplateAreasValue(value) {
77
- return value.map(v => "\"" + v + "\"").join('\n');
97
+ function $698863dbed9612fa$var$gridTemplateAreasValue(value) {
98
+ return value.map((v)=>`"${v}"`
99
+ ).join('\n');
78
100
  }
79
-
80
- function $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue(value) {
81
- if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {
82
- return value;
83
- }
84
-
85
- return dimensionValue(value);
101
+ function $698863dbed9612fa$var$gridDimensionValue(value) {
102
+ if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
103
+ return $4QZis$dimensionValue(value);
86
104
  }
87
-
88
- function $b23dc17afddee903803cb9d0132e8399$var$gridTemplateValue(value) {
89
- if (Array.isArray(value)) {
90
- return value.map($b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue).join(' ');
91
- }
92
-
93
- return $b23dc17afddee903803cb9d0132e8399$var$gridDimensionValue(value);
105
+ function $698863dbed9612fa$var$gridTemplateValue(value) {
106
+ if (Array.isArray(value)) return value.map($698863dbed9612fa$var$gridDimensionValue).join(' ');
107
+ return $698863dbed9612fa$var$gridDimensionValue(value);
94
108
  }
95
109
  /**
96
110
  * A layout container using CSS grid. Supports Spectrum dimensions as values to
97
111
  * ensure consistent and adaptive sizing and spacing.
98
- */
99
-
100
-
101
- export const Grid = /*#__PURE__*/forwardRef($b23dc17afddee903803cb9d0132e8399$var$Grid);
102
- // ASSET: /home/circleci/react-spectrum/packages/@react-spectrum/layout/src/flex-gap.css
103
- var $ab667a8f1fb16c30562d2deb99f756$exports = {};
104
- $ab667a8f1fb16c30562d2deb99f756$exports = {
105
- "flex-container": "_flex-container_6144c",
106
- "-ms-flex": "_flex_6144c",
107
- "flex": "_flex_6144c",
108
- "flex-gap": "_flex-gap_6144c"
112
+ */ const $698863dbed9612fa$export$ef2184bd89960b14 = /*#__PURE__*/ $4QZis$forwardRef($698863dbed9612fa$var$Grid);
113
+
114
+
115
+ var $be7a0a56123cb91a$exports = {};
116
+
117
+ $parcel$export($be7a0a56123cb91a$exports, "Flex", () => $be7a0a56123cb91a$export$f51f4c4ede09e011);
118
+
119
+
120
+
121
+ var $a719c1e6c17b3619$exports = {};
122
+
123
+ $parcel$export($a719c1e6c17b3619$exports, "flex-container", () => $a719c1e6c17b3619$export$69d7a39fa31a000b, (v) => $a719c1e6c17b3619$export$69d7a39fa31a000b = v);
124
+ $parcel$export($a719c1e6c17b3619$exports, "flex", () => $a719c1e6c17b3619$export$97691fbb80847c19, (v) => $a719c1e6c17b3619$export$97691fbb80847c19 = v);
125
+ $parcel$export($a719c1e6c17b3619$exports, "flex-gap", () => $a719c1e6c17b3619$export$31a9da8b58047a44, (v) => $a719c1e6c17b3619$export$31a9da8b58047a44 = v);
126
+ var $a719c1e6c17b3619$export$69d7a39fa31a000b;
127
+ var $a719c1e6c17b3619$export$97691fbb80847c19;
128
+ var $a719c1e6c17b3619$export$31a9da8b58047a44;
129
+ $a719c1e6c17b3619$export$69d7a39fa31a000b = "_flex-container_e15493";
130
+ $a719c1e6c17b3619$export$97691fbb80847c19 = "_flex_e15493";
131
+ $a719c1e6c17b3619$export$31a9da8b58047a44 = "_flex-gap_e15493";
132
+
133
+
134
+
135
+ const $be7a0a56123cb91a$var$flexStyleProps = {
136
+ direction: [
137
+ 'flexDirection',
138
+ $4QZis$passthroughStyle
139
+ ],
140
+ wrap: [
141
+ 'flexWrap',
142
+ $be7a0a56123cb91a$var$flexWrapValue
143
+ ],
144
+ justifyContent: [
145
+ 'justifyContent',
146
+ $be7a0a56123cb91a$var$flexAlignValue
147
+ ],
148
+ alignItems: [
149
+ 'alignItems',
150
+ $be7a0a56123cb91a$var$flexAlignValue
151
+ ],
152
+ alignContent: [
153
+ 'alignContent',
154
+ $be7a0a56123cb91a$var$flexAlignValue
155
+ ]
109
156
  };
110
- const $f9fee2c1db386bde8f28b36a814d1eb2$var$flexStyleProps = {
111
- direction: ['flexDirection', passthroughStyle],
112
- wrap: ['flexWrap', $f9fee2c1db386bde8f28b36a814d1eb2$var$flexWrapValue],
113
- justifyContent: ['justifyContent', $f9fee2c1db386bde8f28b36a814d1eb2$var$flexAlignValue],
114
- alignItems: ['alignItems', $f9fee2c1db386bde8f28b36a814d1eb2$var$flexAlignValue],
115
- alignContent: ['alignContent', $f9fee2c1db386bde8f28b36a814d1eb2$var$flexAlignValue]
116
- };
117
- var $ab667a8f1fb16c30562d2deb99f756$$interop$default = $parcel$interopDefault($ab667a8f1fb16c30562d2deb99f756$exports);
118
-
119
- function $f9fee2c1db386bde8f28b36a814d1eb2$var$Flex(props, ref) {
120
- let {
121
- children
122
- } = props,
123
- otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children"]);
124
-
125
- let breakpointProvider = useBreakpoint();
126
- let matchedBreakpoints = (breakpointProvider == null ? void 0 : breakpointProvider.matchedBreakpoints) || ['base'];
127
- let {
128
- styleProps
129
- } = useStyleProps(otherProps);
130
- let {
131
- styleProps: flexStyle
132
- } = useStyleProps(otherProps, $f9fee2c1db386bde8f28b36a814d1eb2$var$flexStyleProps);
133
- let domRef = useDOMRef(ref);
134
- let isSSR = useIsSSR(); // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
135
- // Two divs are required for this: the outer one contains most style properties, and the inner
136
- // one is the flex container. Each item inside the flex container gets a margin around it based
137
- // on the gap, and the flex container has a negative margin to counteract this. The outer container
138
- // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
139
- // override the outer one.
140
-
141
- if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$f9fee2c1db386bde8f28b36a814d1eb2$var$isFlexGapSupported())) {
142
- let style = _babelRuntimeHelpersEsmExtends({}, flexStyle.style, {
143
- '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
144
- '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
145
- '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
146
- });
147
-
148
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, filterDOMProps(otherProps), styleProps, {
149
- className: classNames($ab667a8f1fb16c30562d2deb99f756$$interop$default, 'flex-container', styleProps.className),
150
- ref: domRef
151
- }), /*#__PURE__*/_react.createElement("div", {
152
- className: classNames($ab667a8f1fb16c30562d2deb99f756$$interop$default, 'flex', 'flex-gap'),
153
- style: style
157
+ function $be7a0a56123cb91a$var$Flex(props, ref) {
158
+ let { children: children , ...otherProps } = props;
159
+ let breakpointProvider = $4QZis$useBreakpoint();
160
+ let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || [
161
+ 'base'
162
+ ];
163
+ let { styleProps: styleProps } = $4QZis$useStyleProps(otherProps);
164
+ let { styleProps: flexStyle } = $4QZis$useStyleProps(otherProps, $be7a0a56123cb91a$var$flexStyleProps);
165
+ let domRef = $4QZis$useDOMRef(ref);
166
+ let isSSR = $4QZis$useIsSSR();
167
+ // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
168
+ // Two divs are required for this: the outer one contains most style properties, and the inner
169
+ // one is the flex container. Each item inside the flex container gets a margin around it based
170
+ // on the gap, and the flex container has a negative margin to counteract this. The outer container
171
+ // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
172
+ // override the outer one.
173
+ if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$be7a0a56123cb91a$var$isFlexGapSupported())) {
174
+ let style = {
175
+ ...flexStyle.style,
176
+ '--column-gap': props.columnGap != null ? $4QZis$responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
177
+ '--row-gap': props.rowGap != null ? $4QZis$responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
178
+ '--gap': props.gap != null ? $4QZis$responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
179
+ };
180
+ return(/*#__PURE__*/ $4QZis$react.createElement("div", {
181
+ ...$4QZis$filterDOMProps(otherProps),
182
+ ...styleProps,
183
+ className: $4QZis$classNames((/*@__PURE__*/$parcel$interopDefault($a719c1e6c17b3619$exports)), 'flex-container', styleProps.className),
184
+ ref: domRef
185
+ }, /*#__PURE__*/ $4QZis$react.createElement("div", {
186
+ className: $4QZis$classNames((/*@__PURE__*/$parcel$interopDefault($a719c1e6c17b3619$exports)), 'flex', 'flex-gap'),
187
+ style: style
188
+ }, children)));
189
+ }
190
+ // If no gaps, or native support exists, then we only need to render a single div.
191
+ let style = {
192
+ ...styleProps.style,
193
+ ...flexStyle.style
194
+ };
195
+ if (props.gap != null) style.gap = $4QZis$responsiveDimensionValue(props.gap, matchedBreakpoints);
196
+ if (props.columnGap != null) style.columnGap = $4QZis$responsiveDimensionValue(props.columnGap, matchedBreakpoints);
197
+ if (props.rowGap != null) style.rowGap = $4QZis$responsiveDimensionValue(props.rowGap, matchedBreakpoints);
198
+ return(/*#__PURE__*/ $4QZis$react.createElement("div", {
199
+ ...$4QZis$filterDOMProps(otherProps),
200
+ className: $4QZis$classNames((/*@__PURE__*/$parcel$interopDefault($a719c1e6c17b3619$exports)), 'flex', styleProps.className),
201
+ style: style,
202
+ ref: domRef
154
203
  }, children));
155
- } // If no gaps, or native support exists, then we only need to render a single div.
156
-
157
-
158
- let style = _babelRuntimeHelpersEsmExtends({}, styleProps.style, flexStyle.style);
159
-
160
- if (props.gap != null) {
161
- style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
162
- }
163
-
164
- if (props.columnGap != null) {
165
- style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);
166
- }
167
-
168
- if (props.rowGap != null) {
169
- style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
170
- }
171
-
172
- return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, filterDOMProps(otherProps), {
173
- className: classNames($ab667a8f1fb16c30562d2deb99f756$$interop$default, 'flex', styleProps.className),
174
- style: style,
175
- ref: domRef
176
- }), children);
177
204
  }
178
205
  /**
179
206
  * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
180
207
  * in flex containers for browser compatibility.
181
- */
182
-
183
-
184
- function $f9fee2c1db386bde8f28b36a814d1eb2$var$flexAlignValue(value) {
185
- if (value === 'start') {
186
- return 'flex-start';
187
- }
188
-
189
- if (value === 'end') {
190
- return 'flex-end';
191
- }
192
-
193
- return value;
208
+ */ function $be7a0a56123cb91a$var$flexAlignValue(value) {
209
+ if (value === 'start') return 'flex-start';
210
+ if (value === 'end') return 'flex-end';
211
+ return value;
194
212
  }
195
213
  /**
196
214
  * Takes a boolean and translates it to flex wrap or nowrap.
197
- */
198
-
199
-
200
- function $f9fee2c1db386bde8f28b36a814d1eb2$var$flexWrapValue(value) {
201
- if (typeof value === 'boolean') {
202
- return value ? 'wrap' : 'nowrap';
203
- }
204
-
205
- return value;
206
- } // Original licensing for the following method can be found in the
215
+ */ function $be7a0a56123cb91a$var$flexWrapValue(value) {
216
+ if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
217
+ return value;
218
+ }
219
+ // Original licensing for the following method can be found in the
207
220
  // NOTICE file in the root directory of this source tree.
208
221
  // See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
209
-
210
-
211
- let $f9fee2c1db386bde8f28b36a814d1eb2$var$_isFlexGapSupported = null;
212
-
213
- function $f9fee2c1db386bde8f28b36a814d1eb2$var$isFlexGapSupported() {
214
- if ($f9fee2c1db386bde8f28b36a814d1eb2$var$_isFlexGapSupported != null) {
215
- return $f9fee2c1db386bde8f28b36a814d1eb2$var$_isFlexGapSupported;
216
- }
217
-
218
- if (typeof document === 'undefined') {
219
- return false;
220
- } // create flex container with row-gap set
221
-
222
-
223
- var flex = document.createElement('div');
224
- flex.style.display = 'flex';
225
- flex.style.flexDirection = 'column';
226
- flex.style.rowGap = '1px'; // create two, elements inside it
227
-
228
- flex.appendChild(document.createElement('div'));
229
- flex.appendChild(document.createElement('div')); // append to the DOM (needed to obtain scrollHeight)
230
-
231
- document.body.appendChild(flex);
232
- $f9fee2c1db386bde8f28b36a814d1eb2$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
233
-
234
- flex.parentNode.removeChild(flex);
235
- return $f9fee2c1db386bde8f28b36a814d1eb2$var$_isFlexGapSupported;
222
+ let $be7a0a56123cb91a$var$_isFlexGapSupported = null;
223
+ function $be7a0a56123cb91a$var$isFlexGapSupported() {
224
+ if ($be7a0a56123cb91a$var$_isFlexGapSupported != null) return $be7a0a56123cb91a$var$_isFlexGapSupported;
225
+ if (typeof document === 'undefined') return false;
226
+ // create flex container with row-gap set
227
+ var flex = document.createElement('div');
228
+ flex.style.display = 'flex';
229
+ flex.style.flexDirection = 'column';
230
+ flex.style.rowGap = '1px';
231
+ // create two, elements inside it
232
+ flex.appendChild(document.createElement('div'));
233
+ flex.appendChild(document.createElement('div'));
234
+ // append to the DOM (needed to obtain scrollHeight)
235
+ document.body.appendChild(flex);
236
+ $be7a0a56123cb91a$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
237
+ flex.parentNode.removeChild(flex);
238
+ return $be7a0a56123cb91a$var$_isFlexGapSupported;
236
239
  }
237
240
  /**
238
241
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
239
242
  * property to define consistent spacing between items.
240
- */
243
+ */ const $be7a0a56123cb91a$export$f51f4c4ede09e011 = /*#__PURE__*/ $4QZis$forwardRef($be7a0a56123cb91a$var$Flex);
244
+
245
+
241
246
 
242
247
 
243
- export const Flex = /*#__PURE__*/forwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex);
248
+ export {$698863dbed9612fa$export$76d90c956114f2c2 as repeat, $698863dbed9612fa$export$9c1b655deaca4988 as minmax, $698863dbed9612fa$export$2f0b47b0911ce698 as fitContent, $698863dbed9612fa$export$ef2184bd89960b14 as Grid, $be7a0a56123cb91a$export$f51f4c4ede09e011 as Flex};
244
249
  //# sourceMappingURL=module.js.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-spectrum/layout/src/Grid.tsx","./packages/@react-spectrum/layout/src/flex-gap.css","./packages/@react-spectrum/layout/src/Flex.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\nfunction Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n styleProps.style.display = 'grid'; // inline-grid?\n let domRef = useDOMRef(ref);\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Can be used to make a repeating fragment of the columns or rows list.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).\n * @param count - The number of times to repeat the fragment.\n * @param repeat - The fragment to repeat.\n */\nexport function repeat(count: number | 'auto-fill' | 'auto-fit', repeat: DimensionValue | DimensionValue[]): string {\n return `repeat(${count}, ${gridTemplateValue(repeat)})`;\n}\n\n/**\n * Defines a size range greater than or equal to min and less than or equal to max.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).\n * @param min - The minimum size.\n * @param max - The maximum size.\n */\nexport function minmax(min: DimensionValue, max: DimensionValue): string {\n return `minmax(${gridDimensionValue(min)}, ${gridDimensionValue(max)})`;\n}\n\n/**\n * Clamps a given size to an available size.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).\n * @param dimension - The size to clamp.\n */\nexport function fitContent(dimension: DimensionValue): string {\n return `fit-content(${gridDimensionValue(dimension)})`;\n}\n\nfunction gridTemplateAreasValue(value) {\n return value.map(v => `\"${v}\"`).join('\\n');\n}\n\nfunction gridDimensionValue(value) {\n if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {\n return value;\n }\n\n return dimensionValue(value);\n}\n\nfunction gridTemplateValue(value) {\n if (Array.isArray(value)) {\n return value.map(gridDimensionValue).join(' ');\n }\n\n return gridDimensionValue(value);\n}\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nconst _Grid = forwardRef(Grid);\nexport {_Grid as Grid};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FlexProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\nimport styles from './flex-gap.css';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n"],"names":["$parcel$interopDefault","a","__esModule","default","gridStyleProps","baseStyleProps","autoFlow","passthroughStyle","autoColumns","gridDimensionValue","autoRows","areas","gridTemplateAreasValue","columns","gridTemplateValue","rows","gap","dimensionValue","rowGap","columnGap","justifyItems","justifyContent","alignItems","alignContent","Grid","props","ref","children","otherProps","styleProps","useStyleProps","style","display","domRef","useDOMRef","filterDOMProps","repeat","count","minmax","min","max","fitContent","dimension","value","map","v","join","test","Array","isArray","_Grid","forwardRef","flexStyleProps","direction","wrap","flexWrapValue","flexAlignValue","Flex","breakpointProvider","useBreakpoint","matchedBreakpoints","flexStyle","isSSR","useIsSSR","isFlexGapSupported","responsiveDimensionValue","undefined","classNames","className","_isFlexGapSupported","document","flex","createElement","flexDirection","appendChild","body","scrollHeight","parentNode","removeChild","_Flex"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport * from './Grid';\nexport * from './Flex';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\nfunction Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n styleProps.style.display = 'grid'; // inline-grid?\n let domRef = useDOMRef(ref);\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Can be used to make a repeating fragment of the columns or rows list.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).\n * @param count - The number of times to repeat the fragment.\n * @param repeat - The fragment to repeat.\n */\nexport function repeat(count: number | 'auto-fill' | 'auto-fit', repeat: DimensionValue | DimensionValue[]): string {\n return `repeat(${count}, ${gridTemplateValue(repeat)})`;\n}\n\n/**\n * Defines a size range greater than or equal to min and less than or equal to max.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).\n * @param min - The minimum size.\n * @param max - The maximum size.\n */\nexport function minmax(min: DimensionValue, max: DimensionValue): string {\n return `minmax(${gridDimensionValue(min)}, ${gridDimensionValue(max)})`;\n}\n\n/**\n * Clamps a given size to an available size.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).\n * @param dimension - The size to clamp.\n */\nexport function fitContent(dimension: DimensionValue): string {\n return `fit-content(${gridDimensionValue(dimension)})`;\n}\n\nfunction gridTemplateAreasValue(value) {\n return value.map(v => `\"${v}\"`).join('\\n');\n}\n\nfunction gridDimensionValue(value) {\n if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) {\n return value;\n }\n\n return dimensionValue(value);\n}\n\nfunction gridTemplateValue(value) {\n if (Array.isArray(value)) {\n return value.map(gridDimensionValue).join(' ');\n }\n\n return gridDimensionValue(value);\n}\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nconst _Grid = forwardRef(Grid);\nexport {_Grid as Grid};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FlexProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\nimport styles from './flex-gap.css';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"module.js.map"}
@@ -1 +1 @@
1
- {"mappings":"A;A;A;AA0DA;A;A;A;A;GAKG;AACH,uBAAuB,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,EAAE,QAAQ,cAAc,GAAG,cAAc,EAAE,GAAG,MAAM,CAElH;AAED;A;A;A;A;GAKG;AACH,uBAAuB,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,GAAG,MAAM,CAEvE;AAED;A;A;A;GAIG;AACH,2BAA2B,SAAS,EAAE,cAAc,GAAG,MAAM,CAE5D;AAsBD;A;A;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;ACqC/B;A;A;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC","sources":["./packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Grid.tsx","./packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Flex.tsx","./packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/index.ts"],"sourcesContent":[null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AA0DA;;;;;GAKG;AACH,uBAAuB,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,EAAE,QAAQ,cAAc,GAAG,cAAc,EAAE,GAAG,MAAM,CAElH;AAED;;;;;GAKG;AACH,uBAAuB,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,GAAG,MAAM,CAEvE;AAED;;;;GAIG;AACH,2BAA2B,SAAS,EAAE,cAAc,GAAG,MAAM,CAE5D;AAsBD;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;ACqC/B;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC","sources":["packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport * from './Grid';\nexport * from './Flex';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/layout",
3
- "version": "3.2.2-nightly.3036+f6ce7acdd",
3
+ "version": "3.2.2-nightly.3047+87960ad25",
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": "3.1.1-nightly.3036+f6ce7acdd",
36
- "@react-aria/utils": "3.0.0-nightly.1345+f6ce7acdd",
37
- "@react-spectrum/utils": "3.0.0-nightly.1345+f6ce7acdd",
38
- "@react-types/layout": "3.2.1-nightly.3036+f6ce7acdd",
39
- "@react-types/shared": "3.0.0-nightly.1345+f6ce7acdd",
35
+ "@react-aria/ssr": "3.1.1-nightly.3047+87960ad25",
36
+ "@react-aria/utils": "3.0.0-nightly.1356+87960ad25",
37
+ "@react-spectrum/utils": "3.0.0-nightly.1356+87960ad25",
38
+ "@react-types/layout": "3.2.1-nightly.3047+87960ad25",
39
+ "@react-types/shared": "3.0.0-nightly.1356+87960ad25",
40
40
  "clsx": "^1.1.1"
41
41
  },
42
42
  "devDependencies": {
43
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1345+f6ce7acdd"
43
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1356+87960ad25"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "@react-spectrum/provider": "^3.0.0",
@@ -49,5 +49,5 @@
49
49
  "publishConfig": {
50
50
  "access": "public"
51
51
  },
52
- "gitHead": "f6ce7acdd85c9a23a3397b0e75350e3208fdd04a"
52
+ "gitHead": "87960ad25c26bc4cd6af506bb5e7e0f06621556c"
53
53
  }
package/dist/main.css.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"AAiBA,oCACE,mBAAa,CAAb,YACF,CAEA,iBACE,SAAU,CACV,uBAAwB,CACxB,oBAAqB,CAGrB,6DAA8D,CAI9D,0CAAiD,CACjD,kCACF,CAMA,0CAEE,2DACF","sources":["./packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"main.css.map"}