@react-aria/utils - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/main.js

 var _clsx = $parcel$interopDefault(require("clsx"));
 
 var {
-  useLayoutEffect,
-  useMemo,
+  useSSRSafeId
+} = require("@react-aria/ssr");
+
+var _react2 = require("react");
+
+var _react = $parcel$interopDefault(_react2);
+
+var {
   useState,
   useRef,
   useEffect
-} = require("react");
+} = _react2;
 
@@ -15,7 +21,8 @@ function $parcel$interopDefault(a) {
 
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+const useLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : () => {};
+exports.useLayoutEffect = useLayoutEffect;
 let $f09fcd7f5f367fc80aacfeac62ed2$var$map = new Map();
-let $f09fcd7f5f367fc80aacfeac62ed2$var$id = 0; // don't want to conflict with ids from v2, this will guarantee something unique
-// plus we'll know how many instances of this module are loaded on a page if there are more than one number ;)
-
-let $f09fcd7f5f367fc80aacfeac62ed2$var$randomInstanceNumber = Math.round(Math.random() * 10000000000);
 /**
@@ -28,3 +35,3 @@ * If a default is not provided, generate an id.
   let [value, setValue] = useState(defaultId);
-  let res = useMemo(() => value || "react-aria-" + $f09fcd7f5f367fc80aacfeac62ed2$var$randomInstanceNumber + "-" + ++$f09fcd7f5f367fc80aacfeac62ed2$var$id, [value]);
+  let res = useSSRSafeId(value);
   $f09fcd7f5f367fc80aacfeac62ed2$var$map.set(res, setValue);
@@ -185,7 +192,10 @@ return res;
 exports.getOffset = getOffset;
-
-// created for splitview, this should be reusable for things like sliders/dials
+// Keep track of elements that we are currently handling dragging for via useDrag1D.
+// If there's an ancestor and a descendant both using useDrag1D(), and the user starts
+// dragging the descendant, we don't want useDrag1D events to fire for the ancestor.
+const $f9e3d2838685addd749dc9b533488cd5$var$draggingElements = []; // created for splitview, this should be reusable for things like sliders/dials
 // It also handles keyboard events on the target allowing for increment/decrement by a given stepsize as well as minifying/maximizing and toggling between minified and previous size
 // It can also take a 'reverse' param to say if we should measure from the right/bottom instead of the top/left
 // It can also handle either a vertical or horizontal movement, but not both at the same time
+
 function useDrag1D(props) {
@@ -216,4 +226,11 @@ let {
   let dragging = useRef(false);
-  let prevPosition = useRef(0);
+  let prevPosition = useRef(0); // Keep track of the current handlers in a ref so that the events can access them.
 
+  let handlers = useRef({
+    onPositionChange,
+    onDrag
+  });
+  handlers.current.onDrag = onDrag;
+  handlers.current.onPositionChange = onPositionChange;
+
   let onMouseDragged = e => {
@@ -226,8 +243,8 @@ e.preventDefault();
 
-      if (onDrag) {
-        onDrag(true);
+      if (handlers.current.onDrag) {
+        handlers.current.onDrag(true);
       }
 
-      if (onPositionChange) {
-        onPositionChange(nextOffset);
+      if (handlers.current.onPositionChange) {
+        handlers.current.onPositionChange(nextOffset);
       }
@@ -248,13 +265,15 @@ }
   let onMouseUp = e => {
+    const target = e.target;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
 
-    if (onDrag) {
-      onDrag(false);
+    if (handlers.current.onDrag) {
+      handlers.current.onDrag(false);
     }
 
-    if (onPositionChange) {
-      onPositionChange(nextOffset);
+    if (handlers.current.onPositionChange) {
+      handlers.current.onPositionChange(nextOffset);
     }
 
+    $f9e3d2838685addd749dc9b533488cd5$var$draggingElements.splice($f9e3d2838685addd749dc9b533488cd5$var$draggingElements.indexOf(target), 1);
     window.removeEventListener('mouseup', onMouseUp, false);
@@ -264,3 +283,11 @@ window.removeEventListener('mousemove', onMouseDragged, false);
 
-  let onMouseDown = () => {
+  let onMouseDown = e => {
+    const target = e.currentTarget; // If we're already handling dragging on a descendant with useDrag1D, then
+    // we don't want to handle the drag motion on this target as well.
+
+    if ($f9e3d2838685addd749dc9b533488cd5$var$draggingElements.some(elt => target.contains(elt))) {
+      return;
+    }
+
+    $f9e3d2838685addd749dc9b533488cd5$var$draggingElements.push(target);
     window.addEventListener('mousemove', onMouseDragged, false);
@@ -267,0 +294,0 @@ window.addEventListener('mouseup', onMouseUp, false);

dist/module.js

 import _clsx from "clsx";
-import { useLayoutEffect, useMemo, useState, useRef, useEffect } from "react";
+import { useSSRSafeId } from "@react-aria/ssr";
+import _react, { useState, useRef, useEffect } from "react";
+// During SSR, React emits a warning when calling useLayoutEffect.
+// Since neither useLayoutEffect nor useEffect run on the server,
+// we can suppress this by replace it with a noop on the server.
+export const useLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : () => {};
 let $f8b5fdd96fb429d7102983f777c41307$var$map = new Map();
-let $f8b5fdd96fb429d7102983f777c41307$var$id = 0; // don't want to conflict with ids from v2, this will guarantee something unique
-// plus we'll know how many instances of this module are loaded on a page if there are more than one number ;)
-
-let $f8b5fdd96fb429d7102983f777c41307$var$randomInstanceNumber = Math.round(Math.random() * 10000000000);
 /**
@@ -15,3 +16,3 @@ * If a default is not provided, generate an id.
   let [value, setValue] = useState(defaultId);
-  let res = useMemo(() => value || "react-aria-" + $f8b5fdd96fb429d7102983f777c41307$var$randomInstanceNumber + "-" + ++$f8b5fdd96fb429d7102983f777c41307$var$id, [value]);
+  let res = useSSRSafeId(value);
   $f8b5fdd96fb429d7102983f777c41307$var$map.set(res, setValue);
@@ -154,6 +155,10 @@ return res;
 }
-// created for splitview, this should be reusable for things like sliders/dials
+// Keep track of elements that we are currently handling dragging for via useDrag1D.
+// If there's an ancestor and a descendant both using useDrag1D(), and the user starts
+// dragging the descendant, we don't want useDrag1D events to fire for the ancestor.
+const $be9622dfd8e876c0943b0b4e429554f3$var$draggingElements = []; // created for splitview, this should be reusable for things like sliders/dials
 // It also handles keyboard events on the target allowing for increment/decrement by a given stepsize as well as minifying/maximizing and toggling between minified and previous size
 // It can also take a 'reverse' param to say if we should measure from the right/bottom instead of the top/left
 // It can also handle either a vertical or horizontal movement, but not both at the same time
+
 export function useDrag1D(props) {
@@ -184,4 +189,11 @@ let {
   let dragging = useRef(false);
-  let prevPosition = useRef(0);
+  let prevPosition = useRef(0); // Keep track of the current handlers in a ref so that the events can access them.
 
+  let handlers = useRef({
+    onPositionChange,
+    onDrag
+  });
+  handlers.current.onDrag = onDrag;
+  handlers.current.onPositionChange = onPositionChange;
+
   let onMouseDragged = e => {
@@ -194,8 +206,8 @@ e.preventDefault();
 
-      if (onDrag) {
-        onDrag(true);
+      if (handlers.current.onDrag) {
+        handlers.current.onDrag(true);
       }
 
-      if (onPositionChange) {
-        onPositionChange(nextOffset);
+      if (handlers.current.onPositionChange) {
+        handlers.current.onPositionChange(nextOffset);
       }
@@ -216,13 +228,15 @@ }
   let onMouseUp = e => {
+    const target = e.target;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
 
-    if (onDrag) {
-      onDrag(false);
+    if (handlers.current.onDrag) {
+      handlers.current.onDrag(false);
     }
 
-    if (onPositionChange) {
-      onPositionChange(nextOffset);
+    if (handlers.current.onPositionChange) {
+      handlers.current.onPositionChange(nextOffset);
     }
 
+    $be9622dfd8e876c0943b0b4e429554f3$var$draggingElements.splice($be9622dfd8e876c0943b0b4e429554f3$var$draggingElements.indexOf(target), 1);
     window.removeEventListener('mouseup', onMouseUp, false);
@@ -232,3 +246,11 @@ window.removeEventListener('mousemove', onMouseDragged, false);
 
-  let onMouseDown = () => {
+  let onMouseDown = e => {
+    const target = e.currentTarget; // If we're already handling dragging on a descendant with useDrag1D, then
+    // we don't want to handle the drag motion on this target as well.
+
+    if ($be9622dfd8e876c0943b0b4e429554f3$var$draggingElements.some(elt => target.contains(elt))) {
+      return;
+    }
+
+    $be9622dfd8e876c0943b0b4e429554f3$var$draggingElements.push(target);
     window.addEventListener('mousemove', onMouseDragged, false);
@@ -235,0 +257,0 @@ window.addEventListener('mouseup', onMouseUp, false);

dist/types.d.ts

@@ -1,3 +0,4 @@
-import { HTMLAttributes, MutableRefObject, EffectCallback } from "react";
+import React, { HTMLAttributes, MutableRefObject, EffectCallback } from "react";
 import { Orientation, AriaLabelingProps, DOMProps } from "@react-types/shared";
+export const useLayoutEffect: typeof React.useLayoutEffect;
 /**
@@ -4,0 +5,0 @@ * If a default is not provided, generate an id.

package.json

 {
   "name": "@react-aria/utils",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Spectrum UI components in React",
@@ -21,2 +21,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
+    "@react-aria/ssr": "^3.0.0",
     "@react-types/shared": "^3.2.0",
@@ -31,3 +32,3 @@ "clsx": "^1.1.1"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
+  "gitHead": "d050016e6876b20e4d8a95ba5fb5630d78e75a60"
 }

src/index.ts

@@ -24,1 +24,2 @@ /*
 export * from './runAfterTransition';
+export * from './useLayoutEffect';

src/useDrag1D.ts

@@ -31,2 +31,7 @@ /*
 
+// Keep track of elements that we are currently handling dragging for via useDrag1D.
+// If there's an ancestor and a descendant both using useDrag1D(), and the user starts
+// dragging the descendant, we don't want useDrag1D events to fire for the ancestor.
+const draggingElements: HTMLElement[] = [];
+
 // created for splitview, this should be reusable for things like sliders/dials
@@ -40,3 +45,3 @@ // It also handles keyboard events on the target allowing for increment/decrement by a given stepsize as well as minifying/maximizing and toggling between minified and previous size
   let getPosition = (e) => orientation === 'horizontal' ? e.clientX : e.clientY;
-  let getNextOffset = (e) => {
+  let getNextOffset = (e: MouseEvent) => {
     let containerOffset = getOffset(containerRef.current, reverse, orientation);
@@ -50,3 +55,8 @@ let mouseOffset = getPosition(e);
 
-  let onMouseDragged = (e) => {
+  // Keep track of the current handlers in a ref so that the events can access them.
+  let handlers = useRef({onPositionChange, onDrag});
+  handlers.current.onDrag = onDrag;
+  handlers.current.onPositionChange = onPositionChange;
+
+  let onMouseDragged = (e: MouseEvent) => {
     e.preventDefault();
@@ -56,7 +66,7 @@ let nextOffset = getNextOffset(e);
       dragging.current = true;
-      if (onDrag) {
-        onDrag(true);
+      if (handlers.current.onDrag) {
+        handlers.current.onDrag(true);
       }
-      if (onPositionChange) {
-        onPositionChange(nextOffset);
+      if (handlers.current.onPositionChange) {
+        handlers.current.onPositionChange(nextOffset);
       }
@@ -73,11 +83,14 @@ }
 
-  let onMouseUp = (e) => {
+  let onMouseUp = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
-    if (onDrag) {
-      onDrag(false);
+    if (handlers.current.onDrag) {
+      handlers.current.onDrag(false);
     }
-    if (onPositionChange) {
-      onPositionChange(nextOffset);
+    if (handlers.current.onPositionChange) {
+      handlers.current.onPositionChange(nextOffset);
     }
+
+    draggingElements.splice(draggingElements.indexOf(target), 1);
     window.removeEventListener('mouseup', onMouseUp, false);
@@ -87,3 +100,10 @@ window.removeEventListener('mousemove', onMouseDragged, false);
 
-  let onMouseDown = () => {
+  let onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.currentTarget;
+    // If we're already handling dragging on a descendant with useDrag1D, then
+    // we don't want to handle the drag motion on this target as well.
+    if (draggingElements.some(elt => target.contains(elt))) {
+      return;
+    }
+    draggingElements.push(target);
     window.addEventListener('mousemove', onMouseDragged, false);
@@ -90,0 +110,0 @@ window.addEventListener('mouseup', onMouseUp, false);

src/useId.ts

@@ -13,11 +13,8 @@ /*
 
-import {useLayoutEffect, useMemo, useState} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+import {useSSRSafeId} from '@react-aria/ssr';
+import {useState} from 'react';
 
 let map: Map<string, (v: string) => void> = new Map();
 
-let id = 0;
-// don't want to conflict with ids from v2, this will guarantee something unique
-// plus we'll know how many instances of this module are loaded on a page if there are more than one number ;)
-let randomInstanceNumber = Math.round(Math.random() * 10000000000);
-
 /**
@@ -29,3 +26,3 @@ * If a default is not provided, generate an id.
   let [value, setValue] = useState(defaultId);
-  let res = useMemo(() => value || `react-aria-${randomInstanceNumber}-${++id}`, [value]);
+  let res = useSSRSafeId(value);
   map.set(res, setValue);
@@ -32,0 +29,0 @@ return res;

No alert changes

Improved metrics

Total package byte prevSize

166338

increased by6.22%

Number of package files

22

increased by4.76%

Lines of code

1748

increased by4.55%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@react-aria/ssr@^3.0.0

• + Added@react-aria/ssr@3.9.5(transitive)

• + Added@swc/helpers@0.5.12(transitive)

• + Addedtslib@2.6.3(transitive)