@react-spectrum/layout 3.5.6-nightly.4149 → 3.5.6-nightly.4157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/import.mjs +10 -10
  2. package/dist/main.css +1 -1
  3. package/dist/main.js +10 -10
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +10 -10
  6. package/dist/module.js.map +1 -1
  7. package/package.json +8 -8
package/dist/import.mjs CHANGED
@@ -90,8 +90,8 @@ const $994c48bfb00b620b$var$gridStyleProps = {
90
90
  ]
91
91
  };
92
92
  function $994c48bfb00b620b$var$Grid(props, ref) {
93
- let { children: children , ...otherProps } = props;
94
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
93
+ let { children: children, ...otherProps } = props;
94
+ let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
95
95
  styleProps.style.display = "grid"; // inline-grid?
96
96
  let domRef = (0, $9LQqs$useDOMRef)(ref);
97
97
  return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
@@ -141,15 +141,15 @@ function $994c48bfb00b620b$var$gridTemplateValue(value) {
141
141
 
142
142
  var $01dd1839b5376a46$exports = {};
143
143
 
144
- $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
145
144
  $parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
145
+ $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
146
146
  $parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
147
- var $01dd1839b5376a46$export$69d7a39fa31a000b;
148
147
  var $01dd1839b5376a46$export$97691fbb80847c19;
148
+ var $01dd1839b5376a46$export$69d7a39fa31a000b;
149
149
  var $01dd1839b5376a46$export$31a9da8b58047a44;
150
- $01dd1839b5376a46$export$69d7a39fa31a000b = "flex-container_e15493";
151
- $01dd1839b5376a46$export$97691fbb80847c19 = "flex_e15493";
152
- $01dd1839b5376a46$export$31a9da8b58047a44 = "flex-gap_e15493";
150
+ $01dd1839b5376a46$export$97691fbb80847c19 = `NW91UW_flex`;
151
+ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
152
+ $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
153
153
 
154
154
 
155
155
 
@@ -176,13 +176,13 @@ const $884c64d19340d345$var$flexStyleProps = {
176
176
  ]
177
177
  };
178
178
  function $884c64d19340d345$var$Flex(props, ref) {
179
- let { children: children , ...otherProps } = props;
179
+ let { children: children, ...otherProps } = props;
180
180
  let breakpointProvider = (0, $9LQqs$useBreakpoint)();
181
181
  let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
182
182
  "base"
183
183
  ];
184
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
185
- let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
184
+ let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
185
+ let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
186
186
  let domRef = (0, $9LQqs$useDOMRef)(ref);
187
187
  let isSSR = (0, $9LQqs$useIsSSR)();
188
188
  // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .flex-container_e15493,.flex_e15493{display:flex}.flex-gap_e15493{--gap:0px;--column-gap:var(--gap);--row-gap:var(--gap);margin:calc(var(--row-gap)/-2)calc(var(--column-gap)/-2);width:calc(100% + var(--column-gap) + 1px);height:calc(100% + var(--row-gap))}.flex-container_e15493 .flex-gap_e15493>*{margin:calc(var(--row-gap)/2)calc(var(--column-gap)/2)}
1
+ .NW91UW_flex-container,.NW91UW_flex{display:flex}.NW91UW_flex-gap{--gap:0px;--column-gap:var(--gap);--row-gap:var(--gap);margin:calc(var(--row-gap)/-2)calc(var(--column-gap)/-2);width:calc(100% + calc(var(--column-gap) + 1px));height:calc(100% + var(--row-gap))}.NW91UW_flex-container .NW91UW_flex-gap>*{margin:calc(var(--row-gap)/2)calc(var(--column-gap)/2)}
package/dist/main.js CHANGED
@@ -96,8 +96,8 @@ const $65aafe8662d00781$var$gridStyleProps = {
96
96
  ]
97
97
  };
98
98
  function $65aafe8662d00781$var$Grid(props, ref) {
99
- let { children: children , ...otherProps } = props;
100
- let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $65aafe8662d00781$var$gridStyleProps);
99
+ let { children: children, ...otherProps } = props;
100
+ let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $65aafe8662d00781$var$gridStyleProps);
101
101
  styleProps.style.display = "grid"; // inline-grid?
102
102
  let domRef = (0, $aBO7d$reactspectrumutils.useDOMRef)(ref);
103
103
  return /*#__PURE__*/ (0, ($parcel$interopDefault($aBO7d$react))).createElement("div", {
@@ -147,15 +147,15 @@ function $65aafe8662d00781$var$gridTemplateValue(value) {
147
147
 
148
148
  var $12be0ef8be5abc46$exports = {};
149
149
 
150
- $parcel$export($12be0ef8be5abc46$exports, "flex-container", () => $12be0ef8be5abc46$export$69d7a39fa31a000b, (v) => $12be0ef8be5abc46$export$69d7a39fa31a000b = v);
151
150
  $parcel$export($12be0ef8be5abc46$exports, "flex", () => $12be0ef8be5abc46$export$97691fbb80847c19, (v) => $12be0ef8be5abc46$export$97691fbb80847c19 = v);
151
+ $parcel$export($12be0ef8be5abc46$exports, "flex-container", () => $12be0ef8be5abc46$export$69d7a39fa31a000b, (v) => $12be0ef8be5abc46$export$69d7a39fa31a000b = v);
152
152
  $parcel$export($12be0ef8be5abc46$exports, "flex-gap", () => $12be0ef8be5abc46$export$31a9da8b58047a44, (v) => $12be0ef8be5abc46$export$31a9da8b58047a44 = v);
153
- var $12be0ef8be5abc46$export$69d7a39fa31a000b;
154
153
  var $12be0ef8be5abc46$export$97691fbb80847c19;
154
+ var $12be0ef8be5abc46$export$69d7a39fa31a000b;
155
155
  var $12be0ef8be5abc46$export$31a9da8b58047a44;
156
- $12be0ef8be5abc46$export$69d7a39fa31a000b = "flex-container_e15493";
157
- $12be0ef8be5abc46$export$97691fbb80847c19 = "flex_e15493";
158
- $12be0ef8be5abc46$export$31a9da8b58047a44 = "flex-gap_e15493";
156
+ $12be0ef8be5abc46$export$97691fbb80847c19 = `NW91UW_flex`;
157
+ $12be0ef8be5abc46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
158
+ $12be0ef8be5abc46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
159
159
 
160
160
 
161
161
 
@@ -182,13 +182,13 @@ const $a2ef5497697e8437$var$flexStyleProps = {
182
182
  ]
183
183
  };
184
184
  function $a2ef5497697e8437$var$Flex(props, ref) {
185
- let { children: children , ...otherProps } = props;
185
+ let { children: children, ...otherProps } = props;
186
186
  let breakpointProvider = (0, $aBO7d$reactspectrumutils.useBreakpoint)();
187
187
  let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
188
188
  "base"
189
189
  ];
190
- let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps);
191
- let { styleProps: flexStyle } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $a2ef5497697e8437$var$flexStyleProps);
190
+ let { styleProps: styleProps } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps);
191
+ let { styleProps: flexStyle } = (0, $aBO7d$reactspectrumutils.useStyleProps)(otherProps, $a2ef5497697e8437$var$flexStyleProps);
192
192
  let domRef = (0, $aBO7d$reactspectrumutils.useDOMRef)(ref);
193
193
  let isSSR = (0, $aBO7d$reactariassr.useIsSSR)();
194
194
  // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
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';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {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 CHANGED
@@ -90,8 +90,8 @@ const $994c48bfb00b620b$var$gridStyleProps = {
90
90
  ]
91
91
  };
92
92
  function $994c48bfb00b620b$var$Grid(props, ref) {
93
- let { children: children , ...otherProps } = props;
94
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
93
+ let { children: children, ...otherProps } = props;
94
+ let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
95
95
  styleProps.style.display = "grid"; // inline-grid?
96
96
  let domRef = (0, $9LQqs$useDOMRef)(ref);
97
97
  return /*#__PURE__*/ (0, $9LQqs$react).createElement("div", {
@@ -141,15 +141,15 @@ function $994c48bfb00b620b$var$gridTemplateValue(value) {
141
141
 
142
142
  var $01dd1839b5376a46$exports = {};
143
143
 
144
- $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
145
144
  $parcel$export($01dd1839b5376a46$exports, "flex", () => $01dd1839b5376a46$export$97691fbb80847c19, (v) => $01dd1839b5376a46$export$97691fbb80847c19 = v);
145
+ $parcel$export($01dd1839b5376a46$exports, "flex-container", () => $01dd1839b5376a46$export$69d7a39fa31a000b, (v) => $01dd1839b5376a46$export$69d7a39fa31a000b = v);
146
146
  $parcel$export($01dd1839b5376a46$exports, "flex-gap", () => $01dd1839b5376a46$export$31a9da8b58047a44, (v) => $01dd1839b5376a46$export$31a9da8b58047a44 = v);
147
- var $01dd1839b5376a46$export$69d7a39fa31a000b;
148
147
  var $01dd1839b5376a46$export$97691fbb80847c19;
148
+ var $01dd1839b5376a46$export$69d7a39fa31a000b;
149
149
  var $01dd1839b5376a46$export$31a9da8b58047a44;
150
- $01dd1839b5376a46$export$69d7a39fa31a000b = "flex-container_e15493";
151
- $01dd1839b5376a46$export$97691fbb80847c19 = "flex_e15493";
152
- $01dd1839b5376a46$export$31a9da8b58047a44 = "flex-gap_e15493";
150
+ $01dd1839b5376a46$export$97691fbb80847c19 = `NW91UW_flex`;
151
+ $01dd1839b5376a46$export$69d7a39fa31a000b = `NW91UW_flex-container`;
152
+ $01dd1839b5376a46$export$31a9da8b58047a44 = `NW91UW_flex-gap`;
153
153
 
154
154
 
155
155
 
@@ -176,13 +176,13 @@ const $884c64d19340d345$var$flexStyleProps = {
176
176
  ]
177
177
  };
178
178
  function $884c64d19340d345$var$Flex(props, ref) {
179
- let { children: children , ...otherProps } = props;
179
+ let { children: children, ...otherProps } = props;
180
180
  let breakpointProvider = (0, $9LQqs$useBreakpoint)();
181
181
  let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
182
182
  "base"
183
183
  ];
184
- let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
185
- let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
184
+ let { styleProps: styleProps } = (0, $9LQqs$useStyleProps)(otherProps);
185
+ let { styleProps: flexStyle } = (0, $9LQqs$useStyleProps)(otherProps, $884c64d19340d345$var$flexStyleProps);
186
186
  let domRef = (0, $9LQqs$useDOMRef)(ref);
187
187
  let isSSR = (0, $9LQqs$useIsSSR)();
188
188
  // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/layout/src/index.ts","packages/@react-spectrum/layout/src/Grid.tsx","packages/@react-spectrum/layout/src/Flex.tsx","packages/@react-spectrum/layout/src/flex-gap.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {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"}
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';\nimport {useIsSSR} from '@react-aria/ssr';\n\nconst flexStyleProps: StyleHandlers = {\n direction: ['flexDirection', passthroughStyle],\n wrap: ['flexWrap', flexWrapValue],\n justifyContent: ['justifyContent', flexAlignValue],\n alignItems: ['alignItems', flexAlignValue],\n alignContent: ['alignContent', flexAlignValue]\n};\n\nfunction Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let breakpointProvider = useBreakpoint();\n let matchedBreakpoints = breakpointProvider?.matchedBreakpoints || ['base'];\n let {styleProps} = useStyleProps(otherProps);\n let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);\n let domRef = useDOMRef(ref);\n let isSSR = useIsSSR();\n\n // If a gap property is specified, and there is no native support or we're in SSR, use a shim.\n // Two divs are required for this: the outer one contains most style properties, and the inner\n // one is the flex container. Each item inside the flex container gets a margin around it based\n // on the gap, and the flex container has a negative margin to counteract this. The outer container\n // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't\n // override the outer one.\n if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {\n let style = {\n ...flexStyle.style,\n '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,\n '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,\n '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined\n };\n\n return (\n <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>\n <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>\n {children}\n </div>\n </div>\n );\n }\n\n // If no gaps, or native support exists, then we only need to render a single div.\n let style = {\n ...styleProps.style,\n ...flexStyle.style\n };\n\n if (props.gap != null) {\n style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);\n }\n\n if (props.columnGap != null) {\n style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);\n }\n\n if (props.rowGap != null) {\n style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);\n }\n\n return (\n <div {...filterDOMProps(otherProps)} className={classNames(styles, 'flex', styleProps.className)} style={style} ref={domRef}>\n {children}\n </div>\n );\n}\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value) {\n if (value === 'start') {\n return 'flex-start';\n }\n\n if (value === 'end') {\n return 'flex-end';\n }\n\n return value;\n}\n\n/**\n * Takes a boolean and translates it to flex wrap or nowrap.\n */\nfunction flexWrapValue(value) {\n if (typeof value === 'boolean') {\n return value ? 'wrap' : 'nowrap';\n }\n\n return value;\n}\n\n\n// Original licensing for the following method can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js\n\nlet _isFlexGapSupported = null;\nfunction isFlexGapSupported() {\n if (_isFlexGapSupported != null) {\n return _isFlexGapSupported;\n }\n\n if (typeof document === 'undefined') {\n return false;\n }\n\n // create flex container with row-gap set\n var flex = document.createElement('div');\n flex.style.display = 'flex';\n flex.style.flexDirection = 'column';\n flex.style.rowGap = '1px';\n\n // create two, elements inside it\n flex.appendChild(document.createElement('div'));\n flex.appendChild(document.createElement('div'));\n\n // append to the DOM (needed to obtain scrollHeight)\n document.body.appendChild(flex);\n _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap\n flex.parentNode.removeChild(flex);\n\n return _isFlexGapSupported;\n}\n\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nconst _Flex = forwardRef(Flex);\nexport {_Flex as Flex};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.flex-container {\n /* this is necessary so that the inner margins don't affect anything outside */\n display: flex;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-gap {\n --gap: 0px;\n --column-gap: var(--gap);\n --row-gap: var(--gap);\n\n /* apply a negative margin to counteract the margin on each item at the edges */\n margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);\n\n /* increase the width and height to account for this margin */\n /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */\n width: calc(100% + calc(var(--column-gap) + 1px));\n height: calc(100% + var(--row-gap));\n}\n\n/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single\n * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.\n * We need to make it more specific, so we raise it by 1 class.\n */\n.flex-container .flex-gap > * {\n /* apply half of the gap to each side of every item */\n margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/layout",
3
- "version": "3.5.6-nightly.4149+a399db1e3",
3
+ "version": "3.5.6-nightly.4157+633bb4fb6",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,16 +36,16 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/ssr": "3.8.1-nightly.4149+a399db1e3",
40
- "@react-aria/utils": "3.0.0-nightly.2440+a399db1e3",
41
- "@react-spectrum/utils": "3.0.0-nightly.2440+a399db1e3",
42
- "@react-types/layout": "3.3.11-nightly.4149+a399db1e3",
43
- "@react-types/shared": "3.0.0-nightly.2440+a399db1e3",
39
+ "@react-aria/ssr": "3.8.1-nightly.4157+633bb4fb6",
40
+ "@react-aria/utils": "3.0.0-nightly.2448+633bb4fb6",
41
+ "@react-spectrum/utils": "3.0.0-nightly.2448+633bb4fb6",
42
+ "@react-types/layout": "3.3.11-nightly.4157+633bb4fb6",
43
+ "@react-types/shared": "3.0.0-nightly.2448+633bb4fb6",
44
44
  "@swc/helpers": "^0.5.0",
45
45
  "clsx": "^1.1.1"
46
46
  },
47
47
  "devDependencies": {
48
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2440+a399db1e3"
48
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.2448+633bb4fb6"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "@react-spectrum/provider": "^3.0.0",
@@ -54,5 +54,5 @@
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
- "gitHead": "a399db1e314243a023f7b5c95e319eba4496604c"
57
+ "gitHead": "633bb4fb6cc205b9911a21fb81a7a70c662ec0ce"
58
58
  }