@react-aria/utils - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/main.js

@@ -1,2 +0,2 @@
-var _classnames = $parcel$interopDefault(require("classnames"));
+var _clsx = $parcel$interopDefault(require("clsx"));
 
@@ -131,5 +131,5 @@ var {
       } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
-        result[key] = _classnames(result.className, props.className);
+        result[key] = _clsx(result.className, props.className);
       } else if (key === 'UNSAFE_className' && typeof result.UNSAFE_className === 'string' && typeof props.UNSAFE_className === 'string') {
-        result[key] = _classnames(result.UNSAFE_className, props.UNSAFE_className);
+        result[key] = _clsx(result.UNSAFE_className, props.UNSAFE_className);
       } else if (key === 'id' && result.id && props.id) {
@@ -277,7 +277,7 @@ result.id = mergeIds(result.id, props.id); // Override others
   let onKeyDown = e => {
-    e.preventDefault();
-
     switch (e.key) {
       case 'Left':
       case 'ArrowLeft':
+        e.preventDefault();
+
         if (orientation === 'horizontal') {
@@ -295,2 +295,4 @@ if (onDecrement && !reverse) {
       case 'ArrowUp':
+        e.preventDefault();
+
         if (orientation === 'vertical') {
@@ -308,2 +310,4 @@ if (onDecrement && !reverse) {
       case 'ArrowRight':
+        e.preventDefault();
+
         if (orientation === 'horizontal') {
@@ -321,2 +325,4 @@ if (onIncrement && !reverse) {
       case 'ArrowDown':
+        e.preventDefault();
+
         if (orientation === 'vertical') {
@@ -333,2 +339,4 @@ if (onIncrement && !reverse) {
       case 'Home':
+        e.preventDefault();
+
         if (onDecrementToMin) {
@@ -341,2 +349,4 @@ onDecrementToMin();
       case 'End':
+        e.preventDefault();
+
         if (onIncrementToMax) {
@@ -349,2 +359,4 @@ onIncrementToMax();
       case 'Enter':
+        e.preventDefault();
+
         if (onCollapseToggle) {
@@ -530,2 +542,77 @@ onCollapseToggle();
 exports.filterDOMProps = filterDOMProps;
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+let $a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement = new Map(); // A list of callbacks to call once there are no transitioning elements.
+
+let $a39a8553a97349a69bcc0255658c67ab$var$transitionCallbacks = new Set();
+
+function $a39a8553a97349a69bcc0255658c67ab$var$setupGlobalEvents() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  let onTransitionStart = e => {
+    // Add the transitioning property to the list for this element.
+    let transitions = $a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.get(e.target);
+
+    if (!transitions) {
+      transitions = new Set();
+      $a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.set(e.target, transitions); // The transitioncancel event must be registered on the element itself, rather than as a global
+      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+
+      e.target.addEventListener('transitioncancel', onTransitionEnd);
+    }
+
+    transitions.add(e.propertyName);
+  };
+
+  let onTransitionEnd = e => {
+    // Remove property from list of transitioning properties.
+    let properties = $a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.get(e.target);
+
+    if (!properties) {
+      return;
+    }
+
+    properties.delete(e.propertyName); // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+
+    if (properties.size === 0) {
+      e.target.removeEventListener('transitioncancel', onTransitionEnd);
+      $a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.delete(e.target);
+    } // If no transitioning elements, call all of the queued callbacks.
+
+
+    if ($a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.size === 0) {
+      for (let cb of $a39a8553a97349a69bcc0255658c67ab$var$transitionCallbacks) {
+        cb();
+      }
+
+      $a39a8553a97349a69bcc0255658c67ab$var$transitionCallbacks.clear();
+    }
+  };
+
+  document.body.addEventListener('transitionrun', onTransitionStart);
+  document.body.addEventListener('transitionend', onTransitionEnd);
+}
+
+$a39a8553a97349a69bcc0255658c67ab$var$setupGlobalEvents();
+
+function runAfterTransition(fn) {
+  // Wait one frame to see if an animation starts, e.g. a transition on mount.
+  requestAnimationFrame(() => {
+    // If no transitions are running, call the function immediately.
+    // Otherwise, add it to a list of callbacks to run at the end of the animation.
+    if ($a39a8553a97349a69bcc0255658c67ab$var$transitionsByElement.size === 0) {
+      fn();
+    } else {
+      $a39a8553a97349a69bcc0255658c67ab$var$transitionCallbacks.add(fn);
+    }
+  });
+}
+
+exports.runAfterTransition = runAfterTransition;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import _classnames from "classnames";
+import _clsx from "clsx";
 import { useLayoutEffect, useMemo, useState, useRef, useEffect } from "react";
@@ -109,5 +109,5 @@ let $f8b5fdd96fb429d7102983f777c41307$var$map = new Map();
       } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
-        result[key] = _classnames(result.className, props.className);
+        result[key] = _clsx(result.className, props.className);
       } else if (key === 'UNSAFE_className' && typeof result.UNSAFE_className === 'string' && typeof props.UNSAFE_className === 'string') {
-        result[key] = _classnames(result.UNSAFE_className, props.UNSAFE_className);
+        result[key] = _clsx(result.UNSAFE_className, props.UNSAFE_className);
       } else if (key === 'id' && result.id && props.id) {
@@ -246,7 +246,7 @@ result.id = mergeIds(result.id, props.id); // Override others
   let onKeyDown = e => {
-    e.preventDefault();
-
     switch (e.key) {
       case 'Left':
       case 'ArrowLeft':
+        e.preventDefault();
+
         if (orientation === 'horizontal') {
@@ -264,2 +264,4 @@ if (onDecrement && !reverse) {
       case 'ArrowUp':
+        e.preventDefault();
+
         if (orientation === 'vertical') {
@@ -277,2 +279,4 @@ if (onDecrement && !reverse) {
       case 'ArrowRight':
+        e.preventDefault();
+
         if (orientation === 'horizontal') {
@@ -290,2 +294,4 @@ if (onIncrement && !reverse) {
       case 'ArrowDown':
+        e.preventDefault();
+
         if (orientation === 'vertical') {
@@ -302,2 +308,4 @@ if (onIncrement && !reverse) {
       case 'Home':
+        e.preventDefault();
+
         if (onDecrementToMin) {
@@ -310,2 +318,4 @@ onDecrementToMin();
       case 'End':
+        e.preventDefault();
+
         if (onIncrementToMax) {
@@ -318,2 +328,4 @@ onIncrementToMax();
       case 'Enter':
+        e.preventDefault();
+
         if (onCollapseToggle) {
@@ -487,2 +499,74 @@ onCollapseToggle();
 }
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+let $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement = new Map(); // A list of callbacks to call once there are no transitioning elements.
+
+let $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks = new Set();
+
+function $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$setupGlobalEvents() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  let onTransitionStart = e => {
+    // Add the transitioning property to the list for this element.
+    let transitions = $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.get(e.target);
+
+    if (!transitions) {
+      transitions = new Set();
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.set(e.target, transitions); // The transitioncancel event must be registered on the element itself, rather than as a global
+      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+
+      e.target.addEventListener('transitioncancel', onTransitionEnd);
+    }
+
+    transitions.add(e.propertyName);
+  };
+
+  let onTransitionEnd = e => {
+    // Remove property from list of transitioning properties.
+    let properties = $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.get(e.target);
+
+    if (!properties) {
+      return;
+    }
+
+    properties.delete(e.propertyName); // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+
+    if (properties.size === 0) {
+      e.target.removeEventListener('transitioncancel', onTransitionEnd);
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.delete(e.target);
+    } // If no transitioning elements, call all of the queued callbacks.
+
+
+    if ($b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.size === 0) {
+      for (let cb of $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks) {
+        cb();
+      }
+
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks.clear();
+    }
+  };
+
+  document.body.addEventListener('transitionrun', onTransitionStart);
+  document.body.addEventListener('transitionend', onTransitionEnd);
+}
+
+$b3e8d5c5f32fa26afa6df1b81f09b6b8$var$setupGlobalEvents();
+export function runAfterTransition(fn) {
+  // Wait one frame to see if an animation starts, e.g. a transition on mount.
+  requestAnimationFrame(() => {
+    // If no transitions are running, call the function immediately.
+    // Otherwise, add it to a list of callbacks to run at the end of the animation.
+    if ($b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionsByElement.size === 0) {
+      fn();
+    } else {
+      $b3e8d5c5f32fa26afa6df1b81f09b6b8$var$transitionCallbacks.add(fn);
+    }
+  });
+}
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -80,3 +80,4 @@ import { HTMLAttributes, MutableRefObject, EffectCallback } from "react";
 export function filterDOMProps(props: DOMProps & AriaLabelingProps, opts?: Options): DOMProps & AriaLabelingProps;
+export function runAfterTransition(fn: () => void): void;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/utils",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Spectrum UI components in React",
@@ -21,4 +21,4 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-types/shared": "^3.1.0",
-    "classnames": "^2.2.5"
+    "@react-types/shared": "^3.2.0",
+    "clsx": "^1.1.1"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
+  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
 }

src/index.ts

@@ -23,1 +23,2 @@ /*
 export * from './filterDOMProps';
+export * from './runAfterTransition';

src/mergeProps.ts

@@ -14,3 +14,3 @@ /*
 import {chain} from './chain';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import {mergeIds} from './useId';
@@ -50,3 +50,3 @@
       ) {
-        result[key] = classNames(result.className, props.className);
+        result[key] = clsx(result.className, props.className);
       } else if (
@@ -57,3 +57,3 @@ key === 'UNSAFE_className' &&
       ) {
-        result[key] = classNames(result.UNSAFE_className, props.UNSAFE_className);
+        result[key] = clsx(result.UNSAFE_className, props.UNSAFE_className);
       } else if (key === 'id' && result.id && props.id) {
@@ -60,0 +60,0 @@ result.id = mergeIds(result.id, props.id);

src/useDrag1D.ts

@@ -100,6 +100,6 @@ /*
   let onKeyDown = (e) => {
-    e.preventDefault();
     switch (e.key) {
       case 'Left':
       case 'ArrowLeft':
+        e.preventDefault();
         if (orientation === 'horizontal') {
@@ -115,2 +115,3 @@ if (onDecrement && !reverse) {
       case 'ArrowUp':
+        e.preventDefault();
         if (orientation === 'vertical') {
@@ -126,2 +127,3 @@ if (onDecrement && !reverse) {
       case 'ArrowRight':
+        e.preventDefault();
         if (orientation === 'horizontal') {
@@ -137,2 +139,3 @@ if (onIncrement && !reverse) {
       case 'ArrowDown':
+        e.preventDefault();
         if (orientation === 'vertical') {
@@ -147,2 +150,3 @@ if (onIncrement && !reverse) {
       case 'Home':
+        e.preventDefault();
         if (onDecrementToMin) {
@@ -153,2 +157,3 @@ onDecrementToMin();
       case 'End':
+        e.preventDefault();
         if (onIncrementToMax) {
@@ -159,2 +164,3 @@ onIncrementToMax();
       case 'Enter':
+        e.preventDefault();
         if (onCollapseToggle) {
@@ -161,0 +167,0 @@ onCollapseToggle();

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

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

Improved metrics

Total package byte prevSize

156598

increased by16.19%

Number of package files

21

increased by5%

Lines of code

1672

increased by14.21%

Dependency changes

• + Addedclsx@^1.1.1

• + Addedclsx@1.2.1(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)

• Updated@react-types/shared@^3.2.0