@react-spectrum/layout - npm Package Compare versions

Comparing version 3.1.5-nightly.2722 to 3.1.5-nightly.2724

dist/main.js

@@ -23,3 +23,5 @@ var {
   useStyleProps,
-  classNames
+  classNames,
+  responsiveDimensionValue,
+  useBreakpoint
 } = require("@react-spectrum/utils");
@@ -61,3 +63,5 @@
     styleProps
-  } = useStyleProps(otherProps, $f784fbb881b5b101cd7607722a86$var$gridStyleProps);
+  } = useStyleProps(otherProps, {
+    handlers: $f784fbb881b5b101cd7607722a86$var$gridStyleProps
+  });
   styleProps.style.display = 'grid'; // inline-grid?
@@ -159,2 +163,4 @@
 
+  let breakpointProvider = useBreakpoint();
+  let matchedBreakpoints = (breakpointProvider == null ? void 0 : breakpointProvider.matchedBreakpoints) || ['base'];
   let {
@@ -165,3 +171,5 @@ styleProps
     styleProps: flexStyle
-  } = useStyleProps(otherProps, $e9098d18abf2a118bc3bc95f0d402bb5$var$flexStyleProps);
+  } = useStyleProps(otherProps, {
+    handlers: $e9098d18abf2a118bc3bc95f0d402bb5$var$flexStyleProps
+  });
   let domRef = useDOMRef(ref);
@@ -177,5 +185,5 @@ let isSSR = useIsSSR(); // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
     let style = _babelRuntimeHelpersExtends({}, flexStyle.style, {
-      '--column-gap': props.columnGap != null ? dimensionValue(props.columnGap) : undefined,
-      '--row-gap': props.rowGap != null ? dimensionValue(props.rowGap) : undefined,
-      '--gap': props.gap != null ? dimensionValue(props.gap) : undefined
+      '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
+      '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
+      '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
     });
@@ -196,11 +204,11 @@
   if (props.gap != null) {
-    style.gap = dimensionValue(props.gap);
+    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
   }
 
   if (props.columnGap != null) {
-    style.columnGap = dimensionValue(props.columnGap);
+    style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);
   }
 
   if (props.rowGap != null) {
-    style.rowGap = dimensionValue(props.rowGap);
+    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
   }
@@ -207,0 +215,0 @@

dist/module.js

 import { useIsSSR } from "@react-aria/ssr";
 import _react, { forwardRef } from "react";
 import { filterDOMProps } from "@react-aria/utils";
-import { baseStyleProps, dimensionValue, passthroughStyle, useDOMRef, useStyleProps, classNames } from "@react-spectrum/utils";
+import { baseStyleProps, dimensionValue, passthroughStyle, useDOMRef, useStyleProps, classNames, responsiveDimensionValue, useBreakpoint } from "@react-spectrum/utils";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
@@ -37,3 +37,5 @@ import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
     styleProps
-  } = useStyleProps(otherProps, $b23dc17afddee903803cb9d0132e8399$var$gridStyleProps);
+  } = useStyleProps(otherProps, {
+    handlers: $b23dc17afddee903803cb9d0132e8399$var$gridStyleProps
+  });
   styleProps.style.display = 'grid'; // inline-grid?
@@ -126,2 +128,4 @@
 
+  let breakpointProvider = useBreakpoint();
+  let matchedBreakpoints = (breakpointProvider == null ? void 0 : breakpointProvider.matchedBreakpoints) || ['base'];
   let {
@@ -132,3 +136,5 @@ styleProps
     styleProps: flexStyle
-  } = useStyleProps(otherProps, $f9fee2c1db386bde8f28b36a814d1eb2$var$flexStyleProps);
+  } = useStyleProps(otherProps, {
+    handlers: $f9fee2c1db386bde8f28b36a814d1eb2$var$flexStyleProps
+  });
   let domRef = useDOMRef(ref);
@@ -144,5 +150,5 @@ let isSSR = useIsSSR(); // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
     let style = _babelRuntimeHelpersEsmExtends({}, flexStyle.style, {
-      '--column-gap': props.columnGap != null ? dimensionValue(props.columnGap) : undefined,
-      '--row-gap': props.rowGap != null ? dimensionValue(props.rowGap) : undefined,
-      '--gap': props.gap != null ? dimensionValue(props.gap) : undefined
+      '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
+      '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
+      '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
     });
@@ -163,11 +169,11 @@
   if (props.gap != null) {
-    style.gap = dimensionValue(props.gap);
+    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
   }
 
   if (props.columnGap != null) {
-    style.columnGap = dimensionValue(props.columnGap);
+    style.columnGap = responsiveDimensionValue(props.columnGap, matchedBreakpoints);
   }
 
   if (props.rowGap != null) {
-    style.rowGap = dimensionValue(props.rowGap);
+    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
   }
@@ -174,0 +180,0 @@

package.json

 {
   "name": "@react-spectrum/layout",
-  "version": "3.1.5-nightly.2722+82d5242b1",
+  "version": "3.1.5-nightly.2724+47319ffbe",
   "description": "Spectrum UI components in React",
@@ -35,11 +35,11 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/ssr": "3.0.3-nightly.2722+82d5242b1",
-    "@react-aria/utils": "3.0.0-nightly.1037+82d5242b1",
-    "@react-spectrum/utils": "3.0.0-nightly.1037+82d5242b1",
-    "@react-types/layout": "3.1.2-nightly.2722+82d5242b1",
-    "@react-types/shared": "3.0.0-nightly.1037+82d5242b1",
+    "@react-aria/ssr": "3.0.3-nightly.2724+47319ffbe",
+    "@react-aria/utils": "3.0.0-nightly.1039+47319ffbe",
+    "@react-spectrum/utils": "3.0.0-nightly.1039+47319ffbe",
+    "@react-types/layout": "3.1.2-nightly.2724+47319ffbe",
+    "@react-types/shared": "3.0.0-nightly.1039+47319ffbe",
     "clsx": "^1.1.1"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1037+82d5242b1"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.1039+47319ffbe"
   },
@@ -53,3 +53,3 @@ "peerDependencies": {
   },
-  "gitHead": "82d5242b191656663597887171d8d1f52c8bf9b7"
+  "gitHead": "47319ffbe7c4681f75bdb56dc639f767eb324b4b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88152

increased by3.13%

Lines of code

748

increased by2.19%

Dependency changes

• Updated@react-aria/ssr@3.0.3-nightly.2724+47319ffbe

• Updated@react-aria/utils@3.0.0-nightly.1039+47319ffbe

• Updated@react-spectrum/utils@3.0.0-nightly.1039+47319ffbe

• Updated@react-types/layout@3.1.2-nightly.2724+47319ffbe

• Updated@react-types/shared@3.0.0-nightly.1039+47319ffbe