@react-spectrum/layout 3.6.10 → 3.6.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Flex.main.js +2 -6
- package/dist/Flex.main.js.map +1 -1
- package/dist/Flex.mjs +2 -6
- package/dist/Flex.module.js +2 -6
- package/dist/Flex.module.js.map +1 -1
- package/dist/Grid.main.js +3 -7
- package/dist/Grid.main.js.map +1 -1
- package/dist/Grid.mjs +3 -7
- package/dist/Grid.module.js +3 -7
- package/dist/Grid.module.js.map +1 -1
- package/dist/types.d.ts +5 -5
- package/dist/types.d.ts.map +1 -1
- package/package.json +8 -7
- package/src/Flex.tsx +6 -9
- package/src/Grid.tsx +6 -9
package/dist/Flex.main.js
CHANGED
|
@@ -50,7 +50,7 @@ const $a2ef5497697e8437$var$flexStyleProps = {
|
|
|
50
50
|
$a2ef5497697e8437$var$flexAlignValue
|
|
51
51
|
]
|
|
52
52
|
};
|
|
53
|
-
|
|
53
|
+
const $a2ef5497697e8437$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $1yXrx$react.forwardRef)(function Flex(props, ref) {
|
|
54
54
|
let { children: children, ...otherProps } = props;
|
|
55
55
|
let breakpointProvider = (0, $1yXrx$reactspectrumutils.useBreakpoint)();
|
|
56
56
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
@@ -72,7 +72,7 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
|
72
72
|
style: style,
|
|
73
73
|
ref: domRef
|
|
74
74
|
}, children);
|
|
75
|
-
}
|
|
75
|
+
});
|
|
76
76
|
/**
|
|
77
77
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
78
78
|
* in flex containers for browser compatibility.
|
|
@@ -87,10 +87,6 @@ function $a2ef5497697e8437$var$Flex(props, ref) {
|
|
|
87
87
|
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
88
88
|
return value;
|
|
89
89
|
}
|
|
90
|
-
/**
|
|
91
|
-
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
92
|
-
* property to define consistent spacing between items.
|
|
93
|
-
*/ const $a2ef5497697e8437$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $1yXrx$react.forwardRef)($a2ef5497697e8437$var$Flex);
|
|
94
90
|
|
|
95
91
|
|
|
96
92
|
//# sourceMappingURL=Flex.main.js.map
|
package/dist/Flex.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,MAAM,uCAAgC;IACpC,WAAW;QAAC;QAAiB,CAAA,GAAA,0CAAe;KAAE;IAC9C,MAAM;QAAC;QAAY;KAAc;IACjC,gBAAgB;QAAC;QAAkB;KAAe;IAClD,YAAY;QAAC;QAAc;KAAe;IAC1C,cAAc;QAAC;QAAgB;KAAe;AAChD;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,MAAM,uCAAgC;IACpC,WAAW;QAAC;QAAiB,CAAA,GAAA,0CAAe;KAAE;IAC9C,MAAM;QAAC;QAAY;KAAc;IACjC,gBAAgB;QAAC;QAAkB;KAAe;IAClD,YAAY;QAAC;QAAc;KAAe;IAC1C,cAAc;QAAC;QAAgB;KAAe;AAChD;AAMO,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YACF,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,qBAAqB,CAAA,GAAA,uCAAY;IACrC,IAAI,qBAAqB,CAAA,+BAAA,yCAAA,mBAAoB,kBAAkB,KAAI;QAAC;KAAO;IAC3E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,EAAC,YAAY,SAAS,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE,YAAY;IACxD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,QAAQ;QACV,GAAG,WAAW,KAAK;QACnB,GAAG,UAAU,KAAK;IACpB;IAEA,IAAI,MAAM,GAAG,IAAI,MACf,MAAM,GAAG,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,GAAG,EAAE;IAGlD,IAAI,MAAM,SAAS,IAAI,MACrB,MAAM,SAAS,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,SAAS,EAAE;IAG9D,IAAI,MAAM,MAAM,IAAI,MAClB,MAAM,MAAM,GAAG,CAAA,GAAA,kDAAuB,EAAE,MAAM,MAAM,EAAE;IAGxD,qBACE,0DAAC;QAAK,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,QAAQ,WAAW,SAAS;QAAG,OAAO;QAAO,KAAK;OAClH;AAGP;AAEA;;;CAGC,GACD,SAAS,qCAAe,KAAK;IAC3B,IAAI,UAAU,SACZ,OAAO;IAGT,IAAI,UAAU,OACZ,OAAO;IAGT,OAAO;AACT;AAEA;;CAEC,GACD,SAAS,oCAAc,KAAK;IAC1B,IAAI,OAAO,UAAU,WACnB,OAAO,QAAQ,SAAS;IAG1B,OAAO;AACT","sources":["packages/@react-spectrum/layout/src/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nexport const Flex = forwardRef(function 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"],"names":[],"version":3,"file":"Flex.main.js.map"}
|
package/dist/Flex.mjs
CHANGED
|
@@ -44,7 +44,7 @@ const $884c64d19340d345$var$flexStyleProps = {
|
|
|
44
44
|
$884c64d19340d345$var$flexAlignValue
|
|
45
45
|
]
|
|
46
46
|
};
|
|
47
|
-
|
|
47
|
+
const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $bDezp$forwardRef)(function Flex(props, ref) {
|
|
48
48
|
let { children: children, ...otherProps } = props;
|
|
49
49
|
let breakpointProvider = (0, $bDezp$useBreakpoint)();
|
|
50
50
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
@@ -66,7 +66,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
66
66
|
style: style,
|
|
67
67
|
ref: domRef
|
|
68
68
|
}, children);
|
|
69
|
-
}
|
|
69
|
+
});
|
|
70
70
|
/**
|
|
71
71
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
72
72
|
* in flex containers for browser compatibility.
|
|
@@ -81,10 +81,6 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
81
81
|
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
82
82
|
return value;
|
|
83
83
|
}
|
|
84
|
-
/**
|
|
85
|
-
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
86
|
-
* property to define consistent spacing between items.
|
|
87
|
-
*/ const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $bDezp$forwardRef)($884c64d19340d345$var$Flex);
|
|
88
84
|
|
|
89
85
|
|
|
90
86
|
export {$884c64d19340d345$export$f51f4c4ede09e011 as Flex};
|
package/dist/Flex.module.js
CHANGED
|
@@ -44,7 +44,7 @@ const $884c64d19340d345$var$flexStyleProps = {
|
|
|
44
44
|
$884c64d19340d345$var$flexAlignValue
|
|
45
45
|
]
|
|
46
46
|
};
|
|
47
|
-
|
|
47
|
+
const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $bDezp$forwardRef)(function Flex(props, ref) {
|
|
48
48
|
let { children: children, ...otherProps } = props;
|
|
49
49
|
let breakpointProvider = (0, $bDezp$useBreakpoint)();
|
|
50
50
|
let matchedBreakpoints = (breakpointProvider === null || breakpointProvider === void 0 ? void 0 : breakpointProvider.matchedBreakpoints) || [
|
|
@@ -66,7 +66,7 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
66
66
|
style: style,
|
|
67
67
|
ref: domRef
|
|
68
68
|
}, children);
|
|
69
|
-
}
|
|
69
|
+
});
|
|
70
70
|
/**
|
|
71
71
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
72
72
|
* in flex containers for browser compatibility.
|
|
@@ -81,10 +81,6 @@ function $884c64d19340d345$var$Flex(props, ref) {
|
|
|
81
81
|
if (typeof value === 'boolean') return value ? 'wrap' : 'nowrap';
|
|
82
82
|
return value;
|
|
83
83
|
}
|
|
84
|
-
/**
|
|
85
|
-
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
86
|
-
* property to define consistent spacing between items.
|
|
87
|
-
*/ const $884c64d19340d345$export$f51f4c4ede09e011 = /*#__PURE__*/ (0, $bDezp$forwardRef)($884c64d19340d345$var$Flex);
|
|
88
84
|
|
|
89
85
|
|
|
90
86
|
export {$884c64d19340d345$export$f51f4c4ede09e011 as Flex};
|
package/dist/Flex.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,MAAM,uCAAgC;IACpC,WAAW;QAAC;QAAiB,CAAA,GAAA,uBAAe;KAAE;IAC9C,MAAM;QAAC;QAAY;KAAc;IACjC,gBAAgB;QAAC;QAAkB;KAAe;IAClD,YAAY;QAAC;QAAc;KAAe;IAC1C,cAAc;QAAC;QAAgB;KAAe;AAChD;
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,MAAM,uCAAgC;IACpC,WAAW;QAAC;QAAiB,CAAA,GAAA,uBAAe;KAAE;IAC9C,MAAM;QAAC;QAAY;KAAc;IACjC,gBAAgB;QAAC;QAAkB;KAAe;IAClD,YAAY;QAAC;QAAc;KAAe;IAC1C,cAAc;QAAC;QAAgB;KAAe;AAChD;AAMO,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YACF,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,qBAAqB,CAAA,GAAA,oBAAY;IACrC,IAAI,qBAAqB,CAAA,+BAAA,yCAAA,mBAAoB,kBAAkB,KAAI;QAAC;KAAO;IAC3E,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,EAAC,YAAY,SAAS,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,YAAY;IACxD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,QAAQ;QACV,GAAG,WAAW,KAAK;QACnB,GAAG,UAAU,KAAK;IACpB;IAEA,IAAI,MAAM,GAAG,IAAI,MACf,MAAM,GAAG,GAAG,CAAA,GAAA,+BAAuB,EAAE,MAAM,GAAG,EAAE;IAGlD,IAAI,MAAM,SAAS,IAAI,MACrB,MAAM,SAAS,GAAG,CAAA,GAAA,+BAAuB,EAAE,MAAM,SAAS,EAAE;IAG9D,IAAI,MAAM,MAAM,IAAI,MAClB,MAAM,MAAM,GAAG,CAAA,GAAA,+BAAuB,EAAE,MAAM,MAAM,EAAE;IAGxD,qBACE,gCAAC;QAAK,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,oDAAK,GAAG,QAAQ,WAAW,SAAS;QAAG,OAAO;QAAO,KAAK;OAClH;AAGP;AAEA;;;CAGC,GACD,SAAS,qCAAe,KAAK;IAC3B,IAAI,UAAU,SACZ,OAAO;IAGT,IAAI,UAAU,OACZ,OAAO;IAGT,OAAO;AACT;AAEA;;CAEC,GACD,SAAS,oCAAc,KAAK;IAC1B,IAAI,OAAO,UAAU,WACnB,OAAO,QAAQ,SAAS;IAG1B,OAAO;AACT","sources":["packages/@react-spectrum/layout/src/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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\n/**\n * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap\n * property to define consistent spacing between items.\n */\nexport const Flex = forwardRef(function 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"],"names":[],"version":3,"file":"Flex.module.js.map"}
|
package/dist/Grid.main.js
CHANGED
|
@@ -11,10 +11,10 @@ function $parcel$export(e, n, v, s) {
|
|
|
11
11
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
$parcel$export(module.exports, "Grid", () => $65aafe8662d00781$export$ef2184bd89960b14);
|
|
14
15
|
$parcel$export(module.exports, "repeat", () => $65aafe8662d00781$export$76d90c956114f2c2);
|
|
15
16
|
$parcel$export(module.exports, "minmax", () => $65aafe8662d00781$export$9c1b655deaca4988);
|
|
16
17
|
$parcel$export(module.exports, "fitContent", () => $65aafe8662d00781$export$2f0b47b0911ce698);
|
|
17
|
-
$parcel$export(module.exports, "Grid", () => $65aafe8662d00781$export$ef2184bd89960b14);
|
|
18
18
|
/*
|
|
19
19
|
* Copyright 2020 Adobe. All rights reserved.
|
|
20
20
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -83,7 +83,7 @@ const $65aafe8662d00781$var$gridStyleProps = {
|
|
|
83
83
|
(0, $ATZAs$reactspectrumutils.passthroughStyle)
|
|
84
84
|
]
|
|
85
85
|
};
|
|
86
|
-
|
|
86
|
+
const $65aafe8662d00781$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $ATZAs$react.forwardRef)(function Grid(props, ref) {
|
|
87
87
|
let { children: children, ...otherProps } = props;
|
|
88
88
|
let { styleProps: styleProps } = (0, $ATZAs$reactspectrumutils.useStyleProps)(otherProps, $65aafe8662d00781$var$gridStyleProps);
|
|
89
89
|
if (styleProps.style) styleProps.style.display = 'grid'; // inline-grid?
|
|
@@ -93,7 +93,7 @@ function $65aafe8662d00781$var$Grid(props, ref) {
|
|
|
93
93
|
...styleProps,
|
|
94
94
|
ref: domRef
|
|
95
95
|
}, children);
|
|
96
|
-
}
|
|
96
|
+
});
|
|
97
97
|
function $65aafe8662d00781$export$76d90c956114f2c2(count, repeat) {
|
|
98
98
|
return `repeat(${count}, ${$65aafe8662d00781$var$gridTemplateValue(repeat)})`;
|
|
99
99
|
}
|
|
@@ -114,10 +114,6 @@ function $65aafe8662d00781$var$gridTemplateValue(value) {
|
|
|
114
114
|
if (Array.isArray(value)) return value.map($65aafe8662d00781$var$gridDimensionValue).join(' ');
|
|
115
115
|
return $65aafe8662d00781$var$gridDimensionValue(value);
|
|
116
116
|
}
|
|
117
|
-
/**
|
|
118
|
-
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
119
|
-
* ensure consistent and adaptive sizing and spacing.
|
|
120
|
-
*/ const $65aafe8662d00781$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $ATZAs$react.forwardRef)($65aafe8662d00781$var$Grid);
|
|
121
117
|
|
|
122
118
|
|
|
123
119
|
//# sourceMappingURL=Grid.main.js.map
|
package/dist/Grid.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAeD,MAAM,uCAAgC;IACpC,GAAG,CAAA,GAAA,wCAAa,CAAC;IACjB,UAAU;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;IAC5C,aAAa;QAAC;QAAmB;KAAmB;IACpD,UAAU;QAAC;QAAgB;KAAmB;IAC9C,OAAO;QAAC;QAAqB;KAAuB;IACpD,SAAS;QAAC;QAAuB;KAAkB;IACnD,MAAM;QAAC;QAAoB;KAAkB;IAC7C,KAAK;QAAC;QAAO,CAAA,GAAA,wCAAa;KAAE;IAC5B,QAAQ;QAAC;QAAU,CAAA,GAAA,wCAAa;KAAE;IAClC,WAAW;QAAC;QAAa,CAAA,GAAA,wCAAa;KAAE;IACxC,cAAc;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;IAChD,gBAAgB;QAAC;QAAkB,CAAA,GAAA,0CAAe;KAAE;IACpD,YAAY;QAAC;QAAc,CAAA,GAAA,0CAAe;KAAE;IAC5C,cAAc;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;AAClD;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAeD,MAAM,uCAAgC;IACpC,GAAG,CAAA,GAAA,wCAAa,CAAC;IACjB,UAAU;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;IAC5C,aAAa;QAAC;QAAmB;KAAmB;IACpD,UAAU;QAAC;QAAgB;KAAmB;IAC9C,OAAO;QAAC;QAAqB;KAAuB;IACpD,SAAS;QAAC;QAAuB;KAAkB;IACnD,MAAM;QAAC;QAAoB;KAAkB;IAC7C,KAAK;QAAC;QAAO,CAAA,GAAA,wCAAa;KAAE;IAC5B,QAAQ;QAAC;QAAU,CAAA,GAAA,wCAAa;KAAE;IAClC,WAAW;QAAC;QAAa,CAAA,GAAA,wCAAa;KAAE;IACxC,cAAc;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;IAChD,gBAAgB;QAAC;QAAkB,CAAA,GAAA,0CAAe;KAAE;IACpD,YAAY;QAAC;QAAc,CAAA,GAAA,0CAAe;KAAE;IAC5C,cAAc;QAAC;QAAgB,CAAA,GAAA,0CAAe;KAAE;AAClD;AAMO,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YACF,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE,YAAY;IAC7C,IAAI,WAAW,KAAK,EAClB,WAAW,KAAK,CAAC,OAAO,GAAG,QAAQ,eAAe;IAEpD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC;QAAK,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAAG,GAAG,UAAU;QAAE,KAAK;OACvD;AAGP;AAQO,SAAS,0CAAO,KAAwC,EAAE,MAAyC;IACxG,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,wCAAkB,QAAQ,CAAC,CAAC;AACzD;AAQO,SAAS,0CAAO,GAAmB,EAAE,GAAmB;IAC7D,OAAO,CAAC,OAAO,EAAE,yCAAmB,KAAK,EAAE,EAAE,yCAAmB,KAAK,CAAC,CAAC;AACzE;AAOO,SAAS,0CAAW,SAAyB;IAClD,OAAO,CAAC,YAAY,EAAE,yCAAmB,WAAW,CAAC,CAAC;AACxD;AAEA,SAAS,6CAAuB,KAAK;IACnC,OAAO,MAAM,GAAG,CAAC,CAAA,IAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;AACvC;AAEA,SAAS,yCAAmB,KAAK;IAC/B,IAAI,kEAAkE,IAAI,CAAC,QACzE,OAAO;IAGT,OAAO,CAAA,GAAA,wCAAa,EAAE;AACxB;AAEA,SAAS,wCAAkB,KAAK;IAC9B,IAAI,MAAM,OAAO,CAAC,QAChB,OAAO,MAAM,GAAG,CAAC,0CAAoB,IAAI,CAAC;IAG5C,OAAO,yCAAmB;AAC5B","sources":["packages/@react-spectrum/layout/src/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nexport const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n if (styleProps.style) {\n styleProps.style.display = 'grid'; // inline-grid?\n }\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"],"names":[],"version":3,"file":"Grid.main.js.map"}
|
package/dist/Grid.mjs
CHANGED
|
@@ -70,7 +70,7 @@ const $994c48bfb00b620b$var$gridStyleProps = {
|
|
|
70
70
|
(0, $2XVCg$passthroughStyle)
|
|
71
71
|
]
|
|
72
72
|
};
|
|
73
|
-
|
|
73
|
+
const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $2XVCg$forwardRef)(function Grid(props, ref) {
|
|
74
74
|
let { children: children, ...otherProps } = props;
|
|
75
75
|
let { styleProps: styleProps } = (0, $2XVCg$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
|
|
76
76
|
if (styleProps.style) styleProps.style.display = 'grid'; // inline-grid?
|
|
@@ -80,7 +80,7 @@ function $994c48bfb00b620b$var$Grid(props, ref) {
|
|
|
80
80
|
...styleProps,
|
|
81
81
|
ref: domRef
|
|
82
82
|
}, children);
|
|
83
|
-
}
|
|
83
|
+
});
|
|
84
84
|
function $994c48bfb00b620b$export$76d90c956114f2c2(count, repeat) {
|
|
85
85
|
return `repeat(${count}, ${$994c48bfb00b620b$var$gridTemplateValue(repeat)})`;
|
|
86
86
|
}
|
|
@@ -101,11 +101,7 @@ function $994c48bfb00b620b$var$gridTemplateValue(value) {
|
|
|
101
101
|
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(' ');
|
|
102
102
|
return $994c48bfb00b620b$var$gridDimensionValue(value);
|
|
103
103
|
}
|
|
104
|
-
/**
|
|
105
|
-
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
106
|
-
* ensure consistent and adaptive sizing and spacing.
|
|
107
|
-
*/ const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $2XVCg$forwardRef)($994c48bfb00b620b$var$Grid);
|
|
108
104
|
|
|
109
105
|
|
|
110
|
-
export {$994c48bfb00b620b$export$
|
|
106
|
+
export {$994c48bfb00b620b$export$ef2184bd89960b14 as Grid, $994c48bfb00b620b$export$76d90c956114f2c2 as repeat, $994c48bfb00b620b$export$9c1b655deaca4988 as minmax, $994c48bfb00b620b$export$2f0b47b0911ce698 as fitContent};
|
|
111
107
|
//# sourceMappingURL=Grid.module.js.map
|
package/dist/Grid.module.js
CHANGED
|
@@ -70,7 +70,7 @@ const $994c48bfb00b620b$var$gridStyleProps = {
|
|
|
70
70
|
(0, $2XVCg$passthroughStyle)
|
|
71
71
|
]
|
|
72
72
|
};
|
|
73
|
-
|
|
73
|
+
const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $2XVCg$forwardRef)(function Grid(props, ref) {
|
|
74
74
|
let { children: children, ...otherProps } = props;
|
|
75
75
|
let { styleProps: styleProps } = (0, $2XVCg$useStyleProps)(otherProps, $994c48bfb00b620b$var$gridStyleProps);
|
|
76
76
|
if (styleProps.style) styleProps.style.display = 'grid'; // inline-grid?
|
|
@@ -80,7 +80,7 @@ function $994c48bfb00b620b$var$Grid(props, ref) {
|
|
|
80
80
|
...styleProps,
|
|
81
81
|
ref: domRef
|
|
82
82
|
}, children);
|
|
83
|
-
}
|
|
83
|
+
});
|
|
84
84
|
function $994c48bfb00b620b$export$76d90c956114f2c2(count, repeat) {
|
|
85
85
|
return `repeat(${count}, ${$994c48bfb00b620b$var$gridTemplateValue(repeat)})`;
|
|
86
86
|
}
|
|
@@ -101,11 +101,7 @@ function $994c48bfb00b620b$var$gridTemplateValue(value) {
|
|
|
101
101
|
if (Array.isArray(value)) return value.map($994c48bfb00b620b$var$gridDimensionValue).join(' ');
|
|
102
102
|
return $994c48bfb00b620b$var$gridDimensionValue(value);
|
|
103
103
|
}
|
|
104
|
-
/**
|
|
105
|
-
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
106
|
-
* ensure consistent and adaptive sizing and spacing.
|
|
107
|
-
*/ const $994c48bfb00b620b$export$ef2184bd89960b14 = /*#__PURE__*/ (0, $2XVCg$forwardRef)($994c48bfb00b620b$var$Grid);
|
|
108
104
|
|
|
109
105
|
|
|
110
|
-
export {$994c48bfb00b620b$export$
|
|
106
|
+
export {$994c48bfb00b620b$export$ef2184bd89960b14 as Grid, $994c48bfb00b620b$export$76d90c956114f2c2 as repeat, $994c48bfb00b620b$export$9c1b655deaca4988 as minmax, $994c48bfb00b620b$export$2f0b47b0911ce698 as fitContent};
|
|
111
107
|
//# sourceMappingURL=Grid.module.js.map
|
package/dist/Grid.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAeD,MAAM,uCAAgC;IACpC,GAAG,CAAA,GAAA,qBAAa,CAAC;IACjB,UAAU;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAC5C,aAAa;QAAC;QAAmB;KAAmB;IACpD,UAAU;QAAC;QAAgB;KAAmB;IAC9C,OAAO;QAAC;QAAqB;KAAuB;IACpD,SAAS;QAAC;QAAuB;KAAkB;IACnD,MAAM;QAAC;QAAoB;KAAkB;IAC7C,KAAK;QAAC;QAAO,CAAA,GAAA,qBAAa;KAAE;IAC5B,QAAQ;QAAC;QAAU,CAAA,GAAA,qBAAa;KAAE;IAClC,WAAW;QAAC;QAAa,CAAA,GAAA,qBAAa;KAAE;IACxC,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAChD,gBAAgB;QAAC;QAAkB,CAAA,GAAA,uBAAe;KAAE;IACpD,YAAY;QAAC;QAAc,CAAA,GAAA,uBAAe;KAAE;IAC5C,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;AAClD;
|
|
1
|
+
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAeD,MAAM,uCAAgC;IACpC,GAAG,CAAA,GAAA,qBAAa,CAAC;IACjB,UAAU;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAC5C,aAAa;QAAC;QAAmB;KAAmB;IACpD,UAAU;QAAC;QAAgB;KAAmB;IAC9C,OAAO;QAAC;QAAqB;KAAuB;IACpD,SAAS;QAAC;QAAuB;KAAkB;IACnD,MAAM;QAAC;QAAoB;KAAkB;IAC7C,KAAK;QAAC;QAAO,CAAA,GAAA,qBAAa;KAAE;IAC5B,QAAQ;QAAC;QAAU,CAAA,GAAA,qBAAa;KAAE;IAClC,WAAW;QAAC;QAAa,CAAA,GAAA,qBAAa;KAAE;IACxC,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;IAChD,gBAAgB;QAAC;QAAkB,CAAA,GAAA,uBAAe;KAAE;IACpD,YAAY;QAAC;QAAc,CAAA,GAAA,uBAAe;KAAE;IAC5C,cAAc;QAAC;QAAgB,CAAA,GAAA,uBAAe;KAAE;AAClD;AAMO,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YACF,QAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,YAAY;IAC7C,IAAI,WAAW,KAAK,EAClB,WAAW,KAAK,CAAC,OAAO,GAAG,QAAQ,eAAe;IAEpD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC;QAAK,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAAG,GAAG,UAAU;QAAE,KAAK;OACvD;AAGP;AAQO,SAAS,0CAAO,KAAwC,EAAE,MAAyC;IACxG,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,wCAAkB,QAAQ,CAAC,CAAC;AACzD;AAQO,SAAS,0CAAO,GAAmB,EAAE,GAAmB;IAC7D,OAAO,CAAC,OAAO,EAAE,yCAAmB,KAAK,EAAE,EAAE,yCAAmB,KAAK,CAAC,CAAC;AACzE;AAOO,SAAS,0CAAW,SAAyB;IAClD,OAAO,CAAC,YAAY,EAAE,yCAAmB,WAAW,CAAC,CAAC;AACxD;AAEA,SAAS,6CAAuB,KAAK;IACnC,OAAO,MAAM,GAAG,CAAC,CAAA,IAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;AACvC;AAEA,SAAS,yCAAmB,KAAK;IAC/B,IAAI,kEAAkE,IAAI,CAAC,QACzE,OAAO;IAGT,OAAO,CAAA,GAAA,qBAAa,EAAE;AACxB;AAEA,SAAS,wCAAkB,KAAK;IAC9B,IAAI,MAAM,OAAO,CAAC,QAChB,OAAO,MAAM,GAAG,CAAC,0CAAoB,IAAI,CAAC;IAG5C,OAAO,yCAAmB;AAC5B","sources":["packages/@react-spectrum/layout/src/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseStyleProps,\n dimensionValue,\n passthroughStyle,\n StyleHandlers,\n useDOMRef,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {DimensionValue, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GridProps} from '@react-types/layout';\nimport React, {forwardRef} from 'react';\n\nconst gridStyleProps: StyleHandlers = {\n ...baseStyleProps,\n autoFlow: ['gridAutoFlow', passthroughStyle],\n autoColumns: ['gridAutoColumns', gridDimensionValue],\n autoRows: ['gridAutoRows', gridDimensionValue],\n areas: ['gridTemplateAreas', gridTemplateAreasValue],\n columns: ['gridTemplateColumns', gridTemplateValue],\n rows: ['gridTemplateRows', gridTemplateValue],\n gap: ['gap', dimensionValue],\n rowGap: ['rowGap', dimensionValue],\n columnGap: ['columnGap', dimensionValue],\n justifyItems: ['justifyItems', passthroughStyle],\n justifyContent: ['justifyContent', passthroughStyle],\n alignItems: ['alignItems', passthroughStyle],\n alignContent: ['alignContent', passthroughStyle]\n};\n\n/**\n * A layout container using CSS grid. Supports Spectrum dimensions as values to\n * ensure consistent and adaptive sizing and spacing.\n */\nexport const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n ...otherProps\n } = props;\n let {styleProps} = useStyleProps(otherProps, gridStyleProps);\n if (styleProps.style) {\n styleProps.style.display = 'grid'; // inline-grid?\n }\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"],"names":[],"version":3,"file":"Grid.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { DimensionValue, DOMRefValue } from "@react-types/shared";
|
|
2
2
|
import { GridProps, FlexProps } from "@react-types/layout";
|
|
3
3
|
import React from "react";
|
|
4
|
+
/**
|
|
5
|
+
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
6
|
+
* ensure consistent and adaptive sizing and spacing.
|
|
7
|
+
*/
|
|
8
|
+
export const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
4
9
|
/**
|
|
5
10
|
* Can be used to make a repeating fragment of the columns or rows list.
|
|
6
11
|
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
|
|
@@ -21,11 +26,6 @@ export function minmax(min: DimensionValue, max: DimensionValue): string;
|
|
|
21
26
|
* @param dimension - The size to clamp.
|
|
22
27
|
*/
|
|
23
28
|
export function fitContent(dimension: DimensionValue): string;
|
|
24
|
-
/**
|
|
25
|
-
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
26
|
-
* ensure consistent and adaptive sizing and spacing.
|
|
27
|
-
*/
|
|
28
|
-
export const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
29
29
|
/**
|
|
30
30
|
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
31
31
|
* property to define consistent spacing between items.
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;AA0CA;;;GAGG;AACH,OAAO,MAAM,mGAgBX,CAAC;AAEH;;;;;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;AChED;;;GAGG;AACH,OAAO,MAAM,mGAiCX,CAAC;AChDH,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/layout",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.11",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/utils": "^3.
|
|
40
|
-
"@react-spectrum/utils": "^3.12.
|
|
41
|
-
"@react-types/layout": "^3.3.
|
|
42
|
-
"@react-types/shared": "^3.
|
|
39
|
+
"@react-aria/utils": "^3.27.0",
|
|
40
|
+
"@react-spectrum/utils": "^3.12.1",
|
|
41
|
+
"@react-types/layout": "^3.3.20",
|
|
42
|
+
"@react-types/shared": "^3.27.0",
|
|
43
43
|
"@swc/helpers": "^0.5.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
@@ -47,10 +47,11 @@
|
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@react-spectrum/provider": "^3.0.0",
|
|
50
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
|
50
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
|
51
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
|
51
52
|
},
|
|
52
53
|
"publishConfig": {
|
|
53
54
|
"access": "public"
|
|
54
55
|
},
|
|
55
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
56
57
|
}
|
package/src/Flex.tsx
CHANGED
|
@@ -25,7 +25,11 @@ const flexStyleProps: StyleHandlers = {
|
|
|
25
25
|
alignContent: ['alignContent', flexAlignValue]
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
/**
|
|
29
|
+
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
30
|
+
* property to define consistent spacing between items.
|
|
31
|
+
*/
|
|
32
|
+
export const Flex = forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
|
|
29
33
|
let {
|
|
30
34
|
children,
|
|
31
35
|
...otherProps
|
|
@@ -58,7 +62,7 @@ function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
|
|
|
58
62
|
{children}
|
|
59
63
|
</div>
|
|
60
64
|
);
|
|
61
|
-
}
|
|
65
|
+
});
|
|
62
66
|
|
|
63
67
|
/**
|
|
64
68
|
* Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
|
|
@@ -86,10 +90,3 @@ function flexWrapValue(value) {
|
|
|
86
90
|
|
|
87
91
|
return value;
|
|
88
92
|
}
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
|
|
92
|
-
* property to define consistent spacing between items.
|
|
93
|
-
*/
|
|
94
|
-
const _Flex = forwardRef(Flex);
|
|
95
|
-
export {_Flex as Flex};
|
package/src/Grid.tsx
CHANGED
|
@@ -40,7 +40,11 @@ const gridStyleProps: StyleHandlers = {
|
|
|
40
40
|
alignContent: ['alignContent', passthroughStyle]
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
/**
|
|
44
|
+
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
45
|
+
* ensure consistent and adaptive sizing and spacing.
|
|
46
|
+
*/
|
|
47
|
+
export const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
|
|
44
48
|
let {
|
|
45
49
|
children,
|
|
46
50
|
...otherProps
|
|
@@ -56,7 +60,7 @@ function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
|
|
|
56
60
|
{children}
|
|
57
61
|
</div>
|
|
58
62
|
);
|
|
59
|
-
}
|
|
63
|
+
});
|
|
60
64
|
|
|
61
65
|
/**
|
|
62
66
|
* Can be used to make a repeating fragment of the columns or rows list.
|
|
@@ -106,10 +110,3 @@ function gridTemplateValue(value) {
|
|
|
106
110
|
|
|
107
111
|
return gridDimensionValue(value);
|
|
108
112
|
}
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* A layout container using CSS grid. Supports Spectrum dimensions as values to
|
|
112
|
-
* ensure consistent and adaptive sizing and spacing.
|
|
113
|
-
*/
|
|
114
|
-
const _Grid = forwardRef(Grid);
|
|
115
|
-
export {_Grid as Grid};
|