@react-spectrum/layout 3.2.2 → 3.2.4-nightly.3120

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