@react-spectrum/layout 3.6.4-nightly.4552 → 3.6.4-nightly.4558

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.
@@ -0,0 +1 @@
1
+ {"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAeD,MAAM,uCAAgC;IACpC,GAAG,CAAA,GAAA,qBAAa,CAAC;IACjB,UAAU;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAC5C,aAAa;QAAC;QAAmB;KAAmB;IACpD,UAAU;QAAC;QAAgB;KAAmB;IAC9C,OAAO;QAAC;QAAqB;KAAuB;IACpD,SAAS;QAAC;QAAuB;KAAkB;IACnD,MAAM;QAAC;QAAoB;KAAkB;IAC7C,KAAK;QAAC;QAAO,CAAA,GAAA,qBAAa;KAAE;IAC5B,QAAQ;QAAC;QAAU,CAAA,GAAA,qBAAa;KAAE;IAClC,WAAW;QAAC;QAAa,CAAA,GAAA,qBAAa;KAAE;IACxC,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAChD,gBAAgB;QAAC;QAAkB,CAAA,GAAA,uBAAe;KAAE;IACpD,YAAY;QAAC;QAAc,CAAA,GAAA,uBAAe;KAAE;IAC5C,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;AAClD;AAEA,SAAS,2BAAK,KAAgB,EAAE,GAA2B;IACzD,IAAI,YACF,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,YAAY;IAC7C,WAAW,KAAK,CAAC,OAAO,GAAG,QAAQ,eAAe;IAClD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAK,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAAG,GAAG,UAAU;QAAE,KAAK;OACvD;AAGP;AAQO,SAAS,0CAAO,KAAwC,EAAE,MAAyC;IACxG,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,wCAAkB,QAAQ,CAAC,CAAC;AACzD;AAQO,SAAS,0CAAO,GAAmB,EAAE,GAAmB;IAC7D,OAAO,CAAC,OAAO,EAAE,yCAAmB,KAAK,EAAE,EAAE,yCAAmB,KAAK,CAAC,CAAC;AACzE;AAOO,SAAS,0CAAW,SAAyB;IAClD,OAAO,CAAC,YAAY,EAAE,yCAAmB,WAAW,CAAC,CAAC;AACxD;AAEA,SAAS,6CAAuB,KAAK;IACnC,OAAO,MAAM,GAAG,CAAC,CAAA,IAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;AACvC;AAEA,SAAS,yCAAmB,KAAK;IAC/B,IAAI,kEAAkE,IAAI,CAAC,QACzE,OAAO;IAGT,OAAO,CAAA,GAAA,qBAAa,EAAE;AACxB;AAEA,SAAS,wCAAkB,KAAK;IAC9B,IAAI,MAAM,OAAO,CAAC,QAChB,OAAO,MAAM,GAAG,CAAC,0CAAoB,IAAI,CAAC;IAG5C,OAAO,yCAAmB;AAC5B;AAEA;;;CAGC,GACD,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/layout/src/Grid.tsx"],"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\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"],"names":[],"version":3,"file":"Grid.module.js.map"}
@@ -14,4 +14,4 @@
14
14
  .NW91UW_flex-container .NW91UW_flex-gap > * {
15
15
  margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);
16
16
  }
17
- /*# sourceMappingURL=main.css.map */
17
+ /*# sourceMappingURL=flex-gap.27391a03.css.map */
@@ -1 +1 @@
1
- {"mappings":"AAYA;;;;AASA;;;;;;;;;AAmBA","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"}
1
+ {"mappings":"AAYA;;;;AASA;;;;;;;;;AAmBA","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":"flex-gap.27391a03.css.map"}
@@ -0,0 +1,17 @@
1
+
2
+ function $parcel$export(e, n, v, s) {
3
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
4
+ }
5
+
6
+ $parcel$export(module.exports, "flex", () => $12be0ef8be5abc46$export$97691fbb80847c19, (v) => $12be0ef8be5abc46$export$97691fbb80847c19 = v);
7
+ $parcel$export(module.exports, "flex-container", () => $12be0ef8be5abc46$export$69d7a39fa31a000b, (v) => $12be0ef8be5abc46$export$69d7a39fa31a000b = v);
8
+ $parcel$export(module.exports, "flex-gap", () => $12be0ef8be5abc46$export$31a9da8b58047a44, (v) => $12be0ef8be5abc46$export$31a9da8b58047a44 = v);
9
+ var $12be0ef8be5abc46$export$97691fbb80847c19;
10
+ var $12be0ef8be5abc46$export$69d7a39fa31a000b;
11
+ var $12be0ef8be5abc46$export$31a9da8b58047a44;
12
+ $12be0ef8be5abc46$export$97691fbb80847c19 = `NW91UW_flex`;
13
+ $12be0ef8be5abc46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
14
+ $12be0ef8be5abc46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
15
+
16
+
17
+ //# sourceMappingURL=flex-gap_css.main.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AAFA,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA6B,CAAC,eAAe,CAAC","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":"flex-gap_css.main.js.map"}
@@ -0,0 +1,19 @@
1
+
2
+ function $parcel$export(e, n, v, s) {
3
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
4
+ }
5
+ var $01dd1839b5376a46$exports = {};
6
+
7
+ $parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
8
+ $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
9
+ $parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
10
+ var $01dd1839b5376a46$export$97691fbb80847c19;
11
+ var $01dd1839b5376a46$export$69d7a39fa31a000b;
12
+ var $01dd1839b5376a46$export$31a9da8b58047a44;
13
+ $01dd1839b5376a46$export$97691fbb80847c19 = `NW91UW_flex`;
14
+ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
15
+ $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
16
+
17
+
18
+ export {$01dd1839b5376a46$exports as default};
19
+ //# sourceMappingURL=flex-gap_css.mjs.map
@@ -0,0 +1,19 @@
1
+
2
+ function $parcel$export(e, n, v, s) {
3
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
4
+ }
5
+ var $01dd1839b5376a46$exports = {};
6
+
7
+ $parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
8
+ $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
9
+ $parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
10
+ var $01dd1839b5376a46$export$97691fbb80847c19;
11
+ var $01dd1839b5376a46$export$69d7a39fa31a000b;
12
+ var $01dd1839b5376a46$export$31a9da8b58047a44;
13
+ $01dd1839b5376a46$export$97691fbb80847c19 = `NW91UW_flex`;
14
+ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
15
+ $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
16
+
17
+
18
+ export {$01dd1839b5376a46$exports as default};
19
+ //# sourceMappingURL=flex-gap_css.module.js.map
@@ -0,0 +1 @@
1
+ {"mappings":";;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AAFA,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA6B,CAAC,eAAe,CAAC","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":"flex-gap_css.module.js.map"}
package/dist/import.mjs CHANGED
@@ -1,16 +1,6 @@
1
- import "./module.css";
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";
1
+ import {fitContent as $994c48bfb00b620b$export$2f0b47b0911ce698, Grid as $994c48bfb00b620b$export$ef2184bd89960b14, minmax as $994c48bfb00b620b$export$9c1b655deaca4988, repeat as $994c48bfb00b620b$export$76d90c956114f2c2} from "./Grid.mjs";
2
+ import {Flex as $884c64d19340d345$export$f51f4c4ede09e011} from "./Flex.mjs";
5
3
 
6
-
7
- function $parcel$interopDefault(a) {
8
- return a && a.__esModule ? a.default : a;
9
- }
10
-
11
- function $parcel$export(e, n, v, s) {
12
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
13
- }
14
4
  /*
15
5
  * Copyright 2020 Adobe. All rights reserved.
16
6
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -22,200 +12,6 @@ function $parcel$export(e, n, v, s) {
22
12
  * OF ANY KIND, either express or implied. See the License for the specific language
23
13
  * governing permissions and limitations under the License.
24
14
  */ /// <reference types="css-module-types" />
25
- /*
26
- * Copyright 2020 Adobe. All rights reserved.
27
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
28
- * you may not use this file except in compliance with the License. You may obtain a copy
29
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
30
- *
31
- * Unless required by applicable law or agreed to in writing, software distributed under
32
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
33
- * OF ANY KIND, either express or implied. See the License for the specific language
34
- * governing permissions and limitations under the License.
35
- */
36
-
37
-
38
- const $994c48bfb00b620b$var$gridStyleProps = {
39
- ...(0, $9LQqs$baseStyleProps),
40
- autoFlow: [
41
- "gridAutoFlow",
42
- (0, $9LQqs$passthroughStyle)
43
- ],
44
- autoColumns: [
45
- "gridAutoColumns",
46
- $994c48bfb00b620b$var$gridDimensionValue
47
- ],
48
- autoRows: [
49
- "gridAutoRows",
50
- $994c48bfb00b620b$var$gridDimensionValue
51
- ],
52
- areas: [
53
- "gridTemplateAreas",
54
- $994c48bfb00b620b$var$gridTemplateAreasValue
55
- ],
56
- columns: [
57
- "gridTemplateColumns",
58
- $994c48bfb00b620b$var$gridTemplateValue
59
- ],
60
- rows: [
61
- "gridTemplateRows",
62
- $994c48bfb00b620b$var$gridTemplateValue
63
- ],
64
- gap: [
65
- "gap",
66
- (0, $9LQqs$dimensionValue)
67
- ],
68
- rowGap: [
69
- "rowGap",
70
- (0, $9LQqs$dimensionValue)
71
- ],
72
- columnGap: [
73
- "columnGap",
74
- (0, $9LQqs$dimensionValue)
75
- ],
76
- justifyItems: [
77
- "justifyItems",
78
- (0, $9LQqs$passthroughStyle)
79
- ],
80
- justifyContent: [
81
- "justifyContent",
82
- (0, $9LQqs$passthroughStyle)
83
- ],
84
- alignItems: [
85
- "alignItems",
86
- (0, $9LQqs$passthroughStyle)
87
- ],
88
- alignContent: [
89
- "alignContent",
90
- (0, $9LQqs$passthroughStyle)
91
- ]
92
- };
93
- function $994c48bfb00b620b$var$Grid(props, ref) {
94
- let { children: children, ...otherProps } = props;
95
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
96
- styleProps.style.display = "grid"; // inline-grid?
97
- let domRef = (0, $9LQqs$useDOMRef)(ref);
98
- return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
99
- ...(0, $9LQqs$filterDOMProps)(otherProps),
100
- ...styleProps,
101
- ref: domRef
102
- }, children);
103
- }
104
- function $994c48bfb00b620b$export$76d90c956114f2c2(count, repeat) {
105
- return `repeat(${count}, ${$994c48bfb00b620b$var$gridTemplateValue(repeat)})`;
106
- }
107
- function $994c48bfb00b620b$export$9c1b655deaca4988(min, max) {
108
- return `minmax(${$994c48bfb00b620b$var$gridDimensionValue(min)}, ${$994c48bfb00b620b$var$gridDimensionValue(max)})`;
109
- }
110
- function $994c48bfb00b620b$export$2f0b47b0911ce698(dimension) {
111
- return `fit-content(${$994c48bfb00b620b$var$gridDimensionValue(dimension)})`;
112
- }
113
- function $994c48bfb00b620b$var$gridTemplateAreasValue(value) {
114
- return value.map((v)=>`"${v}"`).join("\n");
115
- }
116
- function $994c48bfb00b620b$var$gridDimensionValue(value) {
117
- if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
118
- return (0, $9LQqs$dimensionValue)(value);
119
- }
120
- function $994c48bfb00b620b$var$gridTemplateValue(value) {
121
- if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(" ");
122
- return $994c48bfb00b620b$var$gridDimensionValue(value);
123
- }
124
- /**
125
- * A layout container using CSS grid. Supports Spectrum dimensions as values to
126
- * ensure consistent and adaptive sizing and spacing.
127
- */ const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $9LQqs$forwardRef)($994c48bfb00b620b$var$Grid);
128
-
129
-
130
- /*
131
- * Copyright 2020 Adobe. All rights reserved.
132
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
133
- * you may not use this file except in compliance with the License. You may obtain a copy
134
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
135
- *
136
- * Unless required by applicable law or agreed to in writing, software distributed under
137
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
138
- * OF ANY KIND, either express or implied. See the License for the specific language
139
- * governing permissions and limitations under the License.
140
- */
141
-
142
-
143
- var $01dd1839b5376a46$exports = {};
144
-
145
- $parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
146
- $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
147
- $parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
148
- var $01dd1839b5376a46$export$97691fbb80847c19;
149
- var $01dd1839b5376a46$export$69d7a39fa31a000b;
150
- var $01dd1839b5376a46$export$31a9da8b58047a44;
151
- $01dd1839b5376a46$export$97691fbb80847c19 = `NW91UW_flex`;
152
- $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
153
- $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
154
-
155
-
156
- const $884c64d19340d345$var$flexStyleProps = {
157
- direction: [
158
- "flexDirection",
159
- (0, $9LQqs$passthroughStyle)
160
- ],
161
- wrap: [
162
- "flexWrap",
163
- $884c64d19340d345$var$flexWrapValue
164
- ],
165
- justifyContent: [
166
- "justifyContent",
167
- $884c64d19340d345$var$flexAlignValue
168
- ],
169
- alignItems: [
170
- "alignItems",
171
- $884c64d19340d345$var$flexAlignValue
172
- ],
173
- alignContent: [
174
- "alignContent",
175
- $884c64d19340d345$var$flexAlignValue
176
- ]
177
- };
178
- function $884c64d19340d345$var$Flex(props, ref) {
179
- let { children: children, ...otherProps } = props;
180
- let breakpointProvider = (0, $9LQqs$useBreakpoint)();
181
- let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
182
- "base"
183
- ];
184
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
185
- let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
186
- let domRef = (0, $9LQqs$useDOMRef)(ref);
187
- let style = {
188
- ...styleProps.style,
189
- ...flexStyle.style
190
- };
191
- if (props.gap != null) style.gap = (0, $9LQqs$responsiveDimensionValue)(props.gap, matchedBreakpoints);
192
- if (props.columnGap != null) style.columnGap = (0, $9LQqs$responsiveDimensionValue)(props.columnGap, matchedBreakpoints);
193
- if (props.rowGap != null) style.rowGap = (0, $9LQqs$responsiveDimensionValue)(props.rowGap, matchedBreakpoints);
194
- return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
195
- ...(0, $9LQqs$filterDOMProps)(otherProps),
196
- className: (0, $9LQqs$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports))), "flex", styleProps.className),
197
- style: style,
198
- ref: domRef
199
- }, children);
200
- }
201
- /**
202
- * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
203
- * in flex containers for browser compatibility.
204
- */ function $884c64d19340d345$var$flexAlignValue(value) {
205
- if (value === "start") return "flex-start";
206
- if (value === "end") return "flex-end";
207
- return value;
208
- }
209
- /**
210
- * Takes a boolean and translates it to flex wrap or nowrap.
211
- */ function $884c64d19340d345$var$flexWrapValue(value) {
212
- if (typeof value === "boolean") return value ? "wrap" : "nowrap";
213
- return value;
214
- }
215
- /**
216
- * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
217
- * property to define consistent spacing between items.
218
- */ const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $9LQqs$forwardRef)($884c64d19340d345$var$Flex);
219
15
 
220
16
 
221
17
 
package/dist/main.js CHANGED
@@ -1,22 +1,16 @@
1
- require("./main.css");
2
- var $aBO7d$reactspectrumutils = require("@react-spectrum/utils");
3
- var $aBO7d$reactariautils = require("@react-aria/utils");
4
- var $aBO7d$react = require("react");
1
+ var $65aafe8662d00781$exports = require("./Grid.main.js");
2
+ var $a2ef5497697e8437$exports = require("./Flex.main.js");
5
3
 
6
4
 
7
5
  function $parcel$export(e, n, v, s) {
8
6
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
9
7
  }
10
8
 
11
- function $parcel$interopDefault(a) {
12
- return a && a.__esModule ? a.default : a;
13
- }
14
-
15
- $parcel$export(module.exports, "repeat", () => $65aafe8662d00781$export$76d90c956114f2c2);
16
- $parcel$export(module.exports, "minmax", () => $65aafe8662d00781$export$9c1b655deaca4988);
17
- $parcel$export(module.exports, "fitContent", () => $65aafe8662d00781$export$2f0b47b0911ce698);
18
- $parcel$export(module.exports, "Grid", () => $65aafe8662d00781$export$ef2184bd89960b14);
19
- $parcel$export(module.exports, "Flex", () => $a2ef5497697e8437$export$f51f4c4ede09e011);
9
+ $parcel$export(module.exports, "repeat", () => $65aafe8662d00781$exports.repeat);
10
+ $parcel$export(module.exports, "minmax", () => $65aafe8662d00781$exports.minmax);
11
+ $parcel$export(module.exports, "fitContent", () => $65aafe8662d00781$exports.fitContent);
12
+ $parcel$export(module.exports, "Grid", () => $65aafe8662d00781$exports.Grid);
13
+ $parcel$export(module.exports, "Flex", () => $a2ef5497697e8437$exports.Flex);
20
14
  /*
21
15
  * Copyright 2020 Adobe. All rights reserved.
22
16
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -28,200 +22,6 @@ $parcel$export(module.exports, "Flex", () => $a2ef5497697e8437$export$f51f4c4ede
28
22
  * OF ANY KIND, either express or implied. See the License for the specific language
29
23
  * governing permissions and limitations under the License.
30
24
  */ /// <reference types="css-module-types" />
31
- /*
32
- * Copyright 2020 Adobe. All rights reserved.
33
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
34
- * you may not use this file except in compliance with the License. You may obtain a copy
35
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
36
- *
37
- * Unless required by applicable law or agreed to in writing, software distributed under
38
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
39
- * OF ANY KIND, either express or implied. See the License for the specific language
40
- * governing permissions and limitations under the License.
41
- */
42
-
43
-
44
- const $65aafe8662d00781$var$gridStyleProps = {
45
- ...(0, $aBO7d$reactspectrumutils.baseStyleProps),
46
- autoFlow: [
47
- "gridAutoFlow",
48
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
49
- ],
50
- autoColumns: [
51
- "gridAutoColumns",
52
- $65aafe8662d00781$var$gridDimensionValue
53
- ],
54
- autoRows: [
55
- "gridAutoRows",
56
- $65aafe8662d00781$var$gridDimensionValue
57
- ],
58
- areas: [
59
- "gridTemplateAreas",
60
- $65aafe8662d00781$var$gridTemplateAreasValue
61
- ],
62
- columns: [
63
- "gridTemplateColumns",
64
- $65aafe8662d00781$var$gridTemplateValue
65
- ],
66
- rows: [
67
- "gridTemplateRows",
68
- $65aafe8662d00781$var$gridTemplateValue
69
- ],
70
- gap: [
71
- "gap",
72
- (0, $aBO7d$reactspectrumutils.dimensionValue)
73
- ],
74
- rowGap: [
75
- "rowGap",
76
- (0, $aBO7d$reactspectrumutils.dimensionValue)
77
- ],
78
- columnGap: [
79
- "columnGap",
80
- (0, $aBO7d$reactspectrumutils.dimensionValue)
81
- ],
82
- justifyItems: [
83
- "justifyItems",
84
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
85
- ],
86
- justifyContent: [
87
- "justifyContent",
88
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
89
- ],
90
- alignItems: [
91
- "alignItems",
92
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
93
- ],
94
- alignContent: [
95
- "alignContent",
96
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
97
- ]
98
- };
99
- function $65aafe8662d00781$var$Grid(props, ref) {
100
- let { children: children, ...otherProps } = props;
101
- let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $65aafe8662d00781$var$gridStyleProps);
102
- styleProps.style.display = "grid"; // inline-grid?
103
- let domRef = (0, $aBO7d$reactspectrumutils.useDOMRef)(ref);
104
- return /*#__PURE__*/ (0, ($parcel$interopDefault($aBO7d$react))).createElement("div", {
105
- ...(0, $aBO7d$reactariautils.filterDOMProps)(otherProps),
106
- ...styleProps,
107
- ref: domRef
108
- }, children);
109
- }
110
- function $65aafe8662d00781$export$76d90c956114f2c2(count, repeat) {
111
- return `repeat(${count}, ${$65aafe8662d00781$var$gridTemplateValue(repeat)})`;
112
- }
113
- function $65aafe8662d00781$export$9c1b655deaca4988(min, max) {
114
- return `minmax(${$65aafe8662d00781$var$gridDimensionValue(min)}, ${$65aafe8662d00781$var$gridDimensionValue(max)})`;
115
- }
116
- function $65aafe8662d00781$export$2f0b47b0911ce698(dimension) {
117
- return `fit-content(${$65aafe8662d00781$var$gridDimensionValue(dimension)})`;
118
- }
119
- function $65aafe8662d00781$var$gridTemplateAreasValue(value) {
120
- return value.map((v)=>`"${v}"`).join("\n");
121
- }
122
- function $65aafe8662d00781$var$gridDimensionValue(value) {
123
- if (/^max-content|min-content|minmax|auto|fit-content|repeat|subgrid/.test(value)) return value;
124
- return (0, $aBO7d$reactspectrumutils.dimensionValue)(value);
125
- }
126
- function $65aafe8662d00781$var$gridTemplateValue(value) {
127
- if (Array.isArray(value)) return value.map($65aafe8662d00781$var$gridDimensionValue).join(" ");
128
- return $65aafe8662d00781$var$gridDimensionValue(value);
129
- }
130
- /**
131
- * A layout container using CSS grid. Supports Spectrum dimensions as values to
132
- * ensure consistent and adaptive sizing and spacing.
133
- */ const $65aafe8662d00781$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $aBO7d$react.forwardRef)($65aafe8662d00781$var$Grid);
134
-
135
-
136
- /*
137
- * Copyright 2020 Adobe. All rights reserved.
138
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
139
- * you may not use this file except in compliance with the License. You may obtain a copy
140
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
141
- *
142
- * Unless required by applicable law or agreed to in writing, software distributed under
143
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
144
- * OF ANY KIND, either express or implied. See the License for the specific language
145
- * governing permissions and limitations under the License.
146
- */
147
-
148
-
149
- var $12be0ef8be5abc46$exports = {};
150
-
151
- $parcel$export($12be0ef8be5abc46$exports, "flex", () => $12be0ef8be5abc46$export$97691fbb80847c19, (v) => $12be0ef8be5abc46$export$97691fbb80847c19 = v);
152
- $parcel$export($12be0ef8be5abc46$exports, "flex-container", () => $12be0ef8be5abc46$export$69d7a39fa31a000b, (v) => $12be0ef8be5abc46$export$69d7a39fa31a000b = v);
153
- $parcel$export($12be0ef8be5abc46$exports, "flex-gap", () => $12be0ef8be5abc46$export$31a9da8b58047a44, (v) => $12be0ef8be5abc46$export$31a9da8b58047a44 = v);
154
- var $12be0ef8be5abc46$export$97691fbb80847c19;
155
- var $12be0ef8be5abc46$export$69d7a39fa31a000b;
156
- var $12be0ef8be5abc46$export$31a9da8b58047a44;
157
- $12be0ef8be5abc46$export$97691fbb80847c19 = `NW91UW_flex`;
158
- $12be0ef8be5abc46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
159
- $12be0ef8be5abc46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
160
-
161
-
162
- const $a2ef5497697e8437$var$flexStyleProps = {
163
- direction: [
164
- "flexDirection",
165
- (0, $aBO7d$reactspectrumutils.passthroughStyle)
166
- ],
167
- wrap: [
168
- "flexWrap",
169
- $a2ef5497697e8437$var$flexWrapValue
170
- ],
171
- justifyContent: [
172
- "justifyContent",
173
- $a2ef5497697e8437$var$flexAlignValue
174
- ],
175
- alignItems: [
176
- "alignItems",
177
- $a2ef5497697e8437$var$flexAlignValue
178
- ],
179
- alignContent: [
180
- "alignContent",
181
- $a2ef5497697e8437$var$flexAlignValue
182
- ]
183
- };
184
- function $a2ef5497697e8437$var$Flex(props, ref) {
185
- let { children: children, ...otherProps } = props;
186
- let breakpointProvider = (0, $aBO7d$reactspectrumutils.useBreakpoint)();
187
- let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
188
- "base"
189
- ];
190
- let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps);
191
- let { styleProps: flexStyle } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $a2ef5497697e8437$var$flexStyleProps);
192
- let domRef = (0, $aBO7d$reactspectrumutils.useDOMRef)(ref);
193
- let style = {
194
- ...styleProps.style,
195
- ...flexStyle.style
196
- };
197
- if (props.gap != null) style.gap = (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.gap, matchedBreakpoints);
198
- if (props.columnGap != null) style.columnGap = (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.columnGap, matchedBreakpoints);
199
- if (props.rowGap != null) style.rowGap = (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.rowGap, matchedBreakpoints);
200
- return /*#__PURE__*/ (0, ($parcel$interopDefault($aBO7d$react))).createElement("div", {
201
- ...(0, $aBO7d$reactariautils.filterDOMProps)(otherProps),
202
- className: (0, $aBO7d$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports))), "flex", styleProps.className),
203
- style: style,
204
- ref: domRef
205
- }, children);
206
- }
207
- /**
208
- * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
209
- * in flex containers for browser compatibility.
210
- */ function $a2ef5497697e8437$var$flexAlignValue(value) {
211
- if (value === "start") return "flex-start";
212
- if (value === "end") return "flex-end";
213
- return value;
214
- }
215
- /**
216
- * Takes a boolean and translates it to flex wrap or nowrap.
217
- */ function $a2ef5497697e8437$var$flexWrapValue(value) {
218
- if (typeof value === "boolean") return value ? "wrap" : "nowrap";
219
- return value;
220
- }
221
- /**
222
- * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
223
- * property to define consistent spacing between items.
224
- */ const $a2ef5497697e8437$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $aBO7d$react.forwardRef)($a2ef5497697e8437$var$Flex);
225
25
 
226
26
 
227
27
 
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 {repeat, minmax, fitContent, Grid} from './Grid';\nexport {Flex} from './Flex';\nexport type {DimensionValue} from '@react-types/shared';\nexport type {FlexProps, GridProps} from '@react-types/layout';\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';\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\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 * 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":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/layout/src/index.ts"],"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 {repeat, minmax, fitContent, Grid} from './Grid';\nexport {Flex} from './Flex';\nexport type {DimensionValue} from '@react-types/shared';\nexport type {FlexProps, GridProps} from '@react-types/layout';\n"],"names":[],"version":3,"file":"main.js.map"}