@react-spectrum/combobox - npm Package Compare versions

Comparing version 3.0.0-nightly.2482 to 3.0.0-nightly.2488

dist/main.js

@@ -96,5 +96,7 @@ var {
   classNames,
-  unwrapDOMRef,
   useFocusableRef,
-  useIsMobileDevice
+  useIsMobileDevice,
+  useResizeObserver,
+  useUnwrapDOMRef,
+  unwrapDOMRef
 } = require("@react-spectrum/utils");
@@ -543,3 +545,5 @@
   let popoverRef = useRef();
+  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
   let buttonRef = useRef();
+  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);
   let listBoxRef = useRef();
@@ -564,4 +568,4 @@ let inputRef = useRef();
     keyboardDelegate: layout,
-    buttonRef: unwrapDOMRef(buttonRef),
-    popoverRef: unwrapDOMRef(popoverRef),
+    buttonRef: unwrappedButtonRef,
+    popoverRef: unwrappedPopoverRef,
     listBoxRef,
@@ -575,4 +579,4 @@ inputRef: inputRef,
   } = useOverlayPosition({
-    targetRef: unwrapDOMRef(buttonRef),
-    overlayRef: unwrapDOMRef(popoverRef),
+    targetRef: unwrappedButtonRef,
+    overlayRef: unwrappedPopoverRef,
     scrollRef: listBoxRef,
@@ -589,7 +593,12 @@ placement: direction + " end",
   } = useProvider();
-  useLayoutEffect(() => {
-    let buttonWidth = buttonRef.current.UNSAFE_getDOMNode().offsetWidth;
+  let onResize = useCallback(() => {
+    let buttonWidth = unwrappedButtonRef.current.offsetWidth;
     let inputWidth = inputRef.current.offsetWidth;
     setMenuWidth(buttonWidth + inputWidth);
-  }, [scale, buttonRef, inputRef]);
+  }, [unwrappedButtonRef, inputRef, setMenuWidth]);
+  useResizeObserver({
+    ref: domRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [scale, onResize]);
 
@@ -596,0 +605,0 @@ let style = _babelRuntimeHelpersExtends({}, overlayProps.style, {

dist/module.js

@@ -21,3 +21,3 @@ import { useProviderProps, useProvider } from "@react-spectrum/provider";
 import { DismissButton, useOverlayPosition, useOverlayTrigger } from "@react-aria/overlays";
-import { classNames, unwrapDOMRef, useFocusableRef, useIsMobileDevice } from "@react-spectrum/utils";
+import { classNames, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef, unwrapDOMRef } from "@react-spectrum/utils";
 import _spectrumIconsUiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
@@ -456,3 +456,5 @@ import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
   let popoverRef = useRef();
+  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
   let buttonRef = useRef();
+  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);
   let listBoxRef = useRef();
@@ -477,4 +479,4 @@ let inputRef = useRef();
     keyboardDelegate: layout,
-    buttonRef: unwrapDOMRef(buttonRef),
-    popoverRef: unwrapDOMRef(popoverRef),
+    buttonRef: unwrappedButtonRef,
+    popoverRef: unwrappedPopoverRef,
     listBoxRef,
@@ -488,4 +490,4 @@ inputRef: inputRef,
   } = useOverlayPosition({
-    targetRef: unwrapDOMRef(buttonRef),
-    overlayRef: unwrapDOMRef(popoverRef),
+    targetRef: unwrappedButtonRef,
+    overlayRef: unwrappedPopoverRef,
     scrollRef: listBoxRef,
@@ -502,7 +504,12 @@ placement: direction + " end",
   } = useProvider();
-  useLayoutEffect(() => {
-    let buttonWidth = buttonRef.current.UNSAFE_getDOMNode().offsetWidth;
+  let onResize = useCallback(() => {
+    let buttonWidth = unwrappedButtonRef.current.offsetWidth;
     let inputWidth = inputRef.current.offsetWidth;
     setMenuWidth(buttonWidth + inputWidth);
-  }, [scale, buttonRef, inputRef]);
+  }, [unwrappedButtonRef, inputRef, setMenuWidth]);
+  useResizeObserver({
+    ref: domRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [scale, onResize]);
 
@@ -509,0 +516,0 @@ let style = _babelRuntimeHelpersEsmExtends({}, overlayProps.style, {

package.json

 {
   "name": "@react-spectrum/combobox",
-  "version": "3.0.0-nightly.2482+703966e4",
+  "version": "3.0.0-nightly.2488+cf64e99e",
   "description": "Spectrum UI components in React",
@@ -35,28 +35,28 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/button": "3.0.0-nightly.804+703966e4",
-    "@react-aria/combobox": "3.0.0-nightly.2482+703966e4",
-    "@react-aria/dialog": "3.0.0-nightly.804+703966e4",
-    "@react-aria/focus": "3.0.0-nightly.804+703966e4",
-    "@react-aria/i18n": "3.0.0-nightly.804+703966e4",
-    "@react-aria/interactions": "3.0.0-nightly.804+703966e4",
-    "@react-aria/label": "3.0.0-nightly.804+703966e4",
-    "@react-aria/overlays": "3.0.0-nightly.804+703966e4",
-    "@react-aria/utils": "3.0.0-nightly.804+703966e4",
-    "@react-spectrum/button": "3.0.0-nightly.804+703966e4",
-    "@react-spectrum/label": "3.3.1-nightly.2482+703966e4",
-    "@react-spectrum/listbox": "3.4.1-nightly.2482+703966e4",
-    "@react-spectrum/overlays": "3.0.0-nightly.804+703966e4",
-    "@react-spectrum/textfield": "3.0.0-nightly.804+703966e4",
-    "@react-spectrum/utils": "3.0.0-nightly.804+703966e4",
-    "@react-stately/collections": "3.0.0-nightly.804+703966e4",
-    "@react-stately/combobox": "3.0.0-nightly.2482+703966e4",
-    "@react-types/button": "3.3.1-nightly.2482+703966e4",
-    "@react-types/combobox": "3.0.0-nightly.2482+703966e4",
-    "@react-types/overlays": "3.4.1-nightly.2482+703966e4",
-    "@react-types/shared": "3.0.0-nightly.804+703966e4",
-    "@react-types/textfield": "3.0.0-nightly.804+703966e4",
-    "@spectrum-icons/ui": "3.0.0-nightly.804+703966e4"
+    "@react-aria/button": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/combobox": "3.0.0-nightly.2488+cf64e99e",
+    "@react-aria/dialog": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/focus": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/i18n": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/interactions": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/label": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/overlays": "3.0.0-nightly.810+cf64e99e",
+    "@react-aria/utils": "3.0.0-nightly.810+cf64e99e",
+    "@react-spectrum/button": "3.0.0-nightly.810+cf64e99e",
+    "@react-spectrum/label": "3.3.1-nightly.2488+cf64e99e",
+    "@react-spectrum/listbox": "3.4.1-nightly.2488+cf64e99e",
+    "@react-spectrum/overlays": "3.0.0-nightly.810+cf64e99e",
+    "@react-spectrum/textfield": "3.0.0-nightly.810+cf64e99e",
+    "@react-spectrum/utils": "3.0.0-nightly.810+cf64e99e",
+    "@react-stately/collections": "3.0.0-nightly.810+cf64e99e",
+    "@react-stately/combobox": "3.0.0-nightly.2488+cf64e99e",
+    "@react-types/button": "3.3.1-nightly.2488+cf64e99e",
+    "@react-types/combobox": "3.0.0-nightly.2488+cf64e99e",
+    "@react-types/overlays": "3.4.1-nightly.2488+cf64e99e",
+    "@react-types/shared": "3.0.0-nightly.810+cf64e99e",
+    "@react-types/textfield": "3.0.0-nightly.810+cf64e99e",
+    "@spectrum-icons/ui": "3.0.0-nightly.810+cf64e99e"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.804+703966e4"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.810+cf64e99e"
   },
@@ -70,3 +70,3 @@ "peerDependencies": {
   },
-  "gitHead": "703966e428163d83bd2d9cc6f3471a9b0b4d3973"
+  "gitHead": "cf64e99e86b274c7d34f42bedf85fabbaf8bf7be"
 }

New alerts

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

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

362822

increased by0.55%

Lines of code

2268

increased by1.61%

Dependency changes

• Updated@react-aria/button@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/combobox@3.0.0-nightly.2488+cf64e99e

• Updated@react-aria/dialog@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/focus@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/i18n@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/interactions@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/label@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/overlays@3.0.0-nightly.810+cf64e99e

• Updated@react-aria/utils@3.0.0-nightly.810+cf64e99e

• Updated@react-spectrum/button@3.0.0-nightly.810+cf64e99e

• Updated@react-spectrum/label@3.3.1-nightly.2488+cf64e99e

• Updated@react-spectrum/listbox@3.4.1-nightly.2488+cf64e99e

• Updated@react-spectrum/overlays@3.0.0-nightly.810+cf64e99e

• Updated@react-spectrum/textfield@3.0.0-nightly.810+cf64e99e

• Updated@react-spectrum/utils@3.0.0-nightly.810+cf64e99e

• Updated@react-stately/collections@3.0.0-nightly.810+cf64e99e

• Updated@react-stately/combobox@3.0.0-nightly.2488+cf64e99e

• Updated@react-types/button@3.3.1-nightly.2488+cf64e99e

• Updated@react-types/combobox@3.0.0-nightly.2488+cf64e99e

• Updated@react-types/overlays@3.4.1-nightly.2488+cf64e99e

• Updated@react-types/shared@3.0.0-nightly.810+cf64e99e

• Updated@react-types/textfield@3.0.0-nightly.810+cf64e99e

• Updated@spectrum-icons/ui@3.0.0-nightly.810+cf64e99e