@react-spectrum/layout 3.5.7-nightly.4220 → 3.5.7

package/dist/import.mjs

@@ -2,6 +2,7 @@ import "./main.css";
 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";
 import {filterDOMProps as $9LQqs$filterDOMProps} from "@react-aria/utils";
 import $9LQqs$react, {forwardRef as $9LQqs$forwardRef} from "react";
+import {useIsSSR as $9LQqs$useIsSSR} from "@react-aria/ssr";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -151,6 +152,7 @@ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
 $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
 
 
+
 const $884c64d19340d345$var$flexStyleProps = {
     direction: [
         "flexDirection",
@@ -182,6 +184,31 @@ function $884c64d19340d345$var$Flex(props, ref) {
     let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
     let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
     let domRef = (0, $9LQqs$useDOMRef)(ref);
+    let isSSR = (0, $9LQqs$useIsSSR)();
+    // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
+    // Two divs are required for this: the outer one contains most style properties, and the inner
+    // one is the flex container. Each item inside the flex container gets a margin around it based
+    // on the gap, and the flex container has a negative margin to counteract this. The outer container
+    // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
+    // override the outer one.
+    if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$884c64d19340d345$var$isFlexGapSupported())) {
+        let style = {
+            ...flexStyle.style,
+            "--column-gap": props.columnGap != null ? (0, $9LQqs$responsiveDimensionValue)(props.columnGap, matchedBreakpoints) : undefined,
+            "--row-gap": props.rowGap != null ? (0, $9LQqs$responsiveDimensionValue)(props.rowGap, matchedBreakpoints) : undefined,
+            "--gap": props.gap != null ? (0, $9LQqs$responsiveDimensionValue)(props.gap, matchedBreakpoints) : undefined
+        };
+        return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
+            ...(0, $9LQqs$filterDOMProps)(otherProps),
+            ...styleProps,
+            className: (0, $9LQqs$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports))), "flex-container", styleProps.className),
+            ref: domRef
+        }, /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
+            className: (0, $9LQqs$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports))), "flex", "flex-gap"),
+            style: style
+        }, children));
+    }
+    // If no gaps, or native support exists, then we only need to render a single div.
     let style = {
         ...styleProps.style,
         ...flexStyle.style
@@ -210,6 +237,27 @@ function $884c64d19340d345$var$Flex(props, ref) {
     if (typeof value === "boolean") return value ? "wrap" : "nowrap";
     return value;
 }
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
+let $884c64d19340d345$var$_isFlexGapSupported = null;
+function $884c64d19340d345$var$isFlexGapSupported() {
+    if ($884c64d19340d345$var$_isFlexGapSupported != null) return $884c64d19340d345$var$_isFlexGapSupported;
+    if (typeof document === "undefined") return false;
+    // create flex container with row-gap set
+    var flex = document.createElement("div");
+    flex.style.display = "flex";
+    flex.style.flexDirection = "column";
+    flex.style.rowGap = "1px";
+    // create two, elements inside it
+    flex.appendChild(document.createElement("div"));
+    flex.appendChild(document.createElement("div"));
+    // append to the DOM (needed to obtain scrollHeight)
+    document.body.appendChild(flex);
+    $884c64d19340d345$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+    flex.parentNode.removeChild(flex);
+    return $884c64d19340d345$var$_isFlexGapSupported;
+}
 /**
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.

package/dist/main.js

@@ -2,6 +2,7 @@ require("./main.css");
 var $aBO7d$reactspectrumutils = require("@react-spectrum/utils");
 var $aBO7d$reactariautils = require("@react-aria/utils");
 var $aBO7d$react = require("react");
+var $aBO7d$reactariassr = require("@react-aria/ssr");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -157,6 +158,7 @@ $12be0ef8be5abc46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
 $12be0ef8be5abc46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
 
 
+
 const $a2ef5497697e8437$var$flexStyleProps = {
     direction: [
         "flexDirection",
@@ -188,6 +190,31 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
     let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps);
     let { styleProps: flexStyle } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $a2ef5497697e8437$var$flexStyleProps);
     let domRef = (0, $aBO7d$reactspectrumutils.useDOMRef)(ref);
+    let isSSR = (0, $aBO7d$reactariassr.useIsSSR)();
+    // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
+    // Two divs are required for this: the outer one contains most style properties, and the inner
+    // one is the flex container. Each item inside the flex container gets a margin around it based
+    // on the gap, and the flex container has a negative margin to counteract this. The outer container
+    // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
+    // override the outer one.
+    if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$a2ef5497697e8437$var$isFlexGapSupported())) {
+        let style = {
+            ...flexStyle.style,
+            "--column-gap": props.columnGap != null ? (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.columnGap, matchedBreakpoints) : undefined,
+            "--row-gap": props.rowGap != null ? (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.rowGap, matchedBreakpoints) : undefined,
+            "--gap": props.gap != null ? (0, $aBO7d$reactspectrumutils.responsiveDimensionValue)(props.gap, matchedBreakpoints) : undefined
+        };
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($aBO7d$react))).createElement("div", {
+            ...(0, $aBO7d$reactariautils.filterDOMProps)(otherProps),
+            ...styleProps,
+            className: (0, $aBO7d$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports))), "flex-container", styleProps.className),
+            ref: domRef
+        }, /*#__PURE__*/ (0, ($parcel$interopDefault($aBO7d$react))).createElement("div", {
+            className: (0, $aBO7d$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($12be0ef8be5abc46$exports))), "flex", "flex-gap"),
+            style: style
+        }, children));
+    }
+    // If no gaps, or native support exists, then we only need to render a single div.
     let style = {
         ...styleProps.style,
         ...flexStyle.style
@@ -216,6 +243,27 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
     if (typeof value === "boolean") return value ? "wrap" : "nowrap";
     return value;
 }
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
+let $a2ef5497697e8437$var$_isFlexGapSupported = null;
+function $a2ef5497697e8437$var$isFlexGapSupported() {
+    if ($a2ef5497697e8437$var$_isFlexGapSupported != null) return $a2ef5497697e8437$var$_isFlexGapSupported;
+    if (typeof document === "undefined") return false;
+    // create flex container with row-gap set
+    var flex = document.createElement("div");
+    flex.style.display = "flex";
+    flex.style.flexDirection = "column";
+    flex.style.rowGap = "1px";
+    // create two, elements inside it
+    flex.appendChild(document.createElement("div"));
+    flex.appendChild(document.createElement("div"));
+    // append to the DOM (needed to obtain scrollHeight)
+    document.body.appendChild(flex);
+    $a2ef5497697e8437$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+    flex.parentNode.removeChild(flex);
+    return $a2ef5497697e8437$var$_isFlexGapSupported;
+}
 /**
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.

package/dist/main.js.map

@@ -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"}
+{"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';\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

@@ -2,6 +2,7 @@ import "./main.css";
 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";
 import {filterDOMProps as $9LQqs$filterDOMProps} from "@react-aria/utils";
 import $9LQqs$react, {forwardRef as $9LQqs$forwardRef} from "react";
+import {useIsSSR as $9LQqs$useIsSSR} from "@react-aria/ssr";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -151,6 +152,7 @@ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
 $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
 
 
+
 const $884c64d19340d345$var$flexStyleProps = {
     direction: [
         "flexDirection",
@@ -182,6 +184,31 @@ function $884c64d19340d345$var$Flex(props, ref) {
     let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
     let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
     let domRef = (0, $9LQqs$useDOMRef)(ref);
+    let isSSR = (0, $9LQqs$useIsSSR)();
+    // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
+    // Two divs are required for this: the outer one contains most style properties, and the inner
+    // one is the flex container. Each item inside the flex container gets a margin around it based
+    // on the gap, and the flex container has a negative margin to counteract this. The outer container
+    // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
+    // override the outer one.
+    if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !$884c64d19340d345$var$isFlexGapSupported())) {
+        let style = {
+            ...flexStyle.style,
+            "--column-gap": props.columnGap != null ? (0, $9LQqs$responsiveDimensionValue)(props.columnGap, matchedBreakpoints) : undefined,
+            "--row-gap": props.rowGap != null ? (0, $9LQqs$responsiveDimensionValue)(props.rowGap, matchedBreakpoints) : undefined,
+            "--gap": props.gap != null ? (0, $9LQqs$responsiveDimensionValue)(props.gap, matchedBreakpoints) : undefined
+        };
+        return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
+            ...(0, $9LQqs$filterDOMProps)(otherProps),
+            ...styleProps,
+            className: (0, $9LQqs$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports))), "flex-container", styleProps.className),
+            ref: domRef
+        }, /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
+            className: (0, $9LQqs$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($01dd1839b5376a46$exports))), "flex", "flex-gap"),
+            style: style
+        }, children));
+    }
+    // If no gaps, or native support exists, then we only need to render a single div.
     let style = {
         ...styleProps.style,
         ...flexStyle.style
@@ -210,6 +237,27 @@ function $884c64d19340d345$var$Flex(props, ref) {
     if (typeof value === "boolean") return value ? "wrap" : "nowrap";
     return value;
 }
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
+let $884c64d19340d345$var$_isFlexGapSupported = null;
+function $884c64d19340d345$var$isFlexGapSupported() {
+    if ($884c64d19340d345$var$_isFlexGapSupported != null) return $884c64d19340d345$var$_isFlexGapSupported;
+    if (typeof document === "undefined") return false;
+    // create flex container with row-gap set
+    var flex = document.createElement("div");
+    flex.style.display = "flex";
+    flex.style.flexDirection = "column";
+    flex.style.rowGap = "1px";
+    // create two, elements inside it
+    flex.appendChild(document.createElement("div"));
+    flex.appendChild(document.createElement("div"));
+    // append to the DOM (needed to obtain scrollHeight)
+    document.body.appendChild(flex);
+    $884c64d19340d345$var$_isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+    flex.parentNode.removeChild(flex);
+    return $884c64d19340d345$var$_isFlexGapSupported;
+}
 /**
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.

package/dist/module.js.map

@@ -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":"module.js.map"}
+{"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';\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/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AA0DA;;;;;GAKG;AACH,uBAAuB,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,EAAE,QAAQ,cAAc,GAAG,cAAc,EAAE,GAAG,MAAM,CAElH;AAED;;;;;GAKG;AACH,uBAAuB,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,GAAG,MAAM,CAEvE;AAED;;;;GAIG;AACH,2BAA2B,SAAS,EAAE,cAAc,GAAG,MAAM,CAE5D;AAsBD;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;ACtB/B;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;AC7E/B,YAAY,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {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":"types.d.ts.map"}
+{"mappings":";;;AA0DA;;;;;GAKG;AACH,uBAAuB,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,EAAE,QAAQ,cAAc,GAAG,cAAc,EAAE,GAAG,MAAM,CAElH;AAED;;;;;GAKG;AACH,uBAAuB,GAAG,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,GAAG,MAAM,CAEvE;AAED;;;;GAIG;AACH,2BAA2B,SAAS,EAAE,cAAc,GAAG,MAAM,CAE5D;AAsBD;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;ACqC/B;;;GAGG;AACH,OAAA,MAAM,iIAAwB,CAAC;ACxI/B,YAAY,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {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":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/layout",
-  "version": "3.5.7-nightly.4220+979044880",
+  "version": "3.5.7",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,16 +36,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/ssr": "3.8.1-nightly.4220+979044880",
-    "@react-aria/utils": "3.0.0-nightly.2509+979044880",
-    "@react-spectrum/utils": "3.0.0-nightly.2509+979044880",
-    "@react-types/layout": "3.3.12-nightly.4220+979044880",
-    "@react-types/shared": "3.0.0-nightly.2509+979044880",
+    "@react-aria/ssr": "^3.8.0",
+    "@react-aria/utils": "^3.21.1",
+    "@react-spectrum/utils": "^3.11.1",
+    "@react-types/layout": "^3.3.11",
+    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2509+979044880"
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9790448803156f5f1412819164b7750bcf6b48fe"
+  "gitHead": "3ecf62dcceea437cb12df1851636dd491bb6591c"
 }

package/src/Flex.tsx

@@ -16,6 +16,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {FlexProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
 import styles from './flex-gap.css';
+import {useIsSSR} from '@react-aria/ssr';
 
 const flexStyleProps: StyleHandlers = {
   direction: ['flexDirection', passthroughStyle],
@@ -35,7 +36,32 @@ function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(otherProps);
   let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);
   let domRef = useDOMRef(ref);
+  let isSSR = useIsSSR();
 
+  // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
+  // Two divs are required for this: the outer one contains most style properties, and the inner
+  // one is the flex container. Each item inside the flex container gets a margin around it based
+  // on the gap, and the flex container has a negative margin to counteract this. The outer container
+  // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
+  // override the outer one.
+  if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {
+    let style = {
+      ...flexStyle.style,
+      '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
+      '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
+      '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
+    };
+
+    return (
+      <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>
+        <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  // If no gaps, or native support exists, then we only need to render a single div.
   let style = {
     ...styleProps.style,
     ...flexStyle.style
@@ -87,6 +113,39 @@ function flexWrapValue(value) {
   return value;
 }
 
+
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
+
+let _isFlexGapSupported = null;
+function isFlexGapSupported() {
+  if (_isFlexGapSupported != null) {
+    return _isFlexGapSupported;
+  }
+
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  // create flex container with row-gap set
+  var flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px';
+
+  // create two, elements inside it
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div'));
+
+  // append to the DOM (needed to obtain scrollHeight)
+  document.body.appendChild(flex);
+  _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+  flex.parentNode.removeChild(flex);
+
+  return _isFlexGapSupported;
+}
+
 /**
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.