@react-aria/utils - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

dist/main.js

@@ -31,3 +31,7 @@ var _classnames = $parcel$interopDefault(require("classnames"));
 }
+/**
+ * Merges two ids.
+ */
 
+
 exports.useId = useId;
@@ -56,3 +60,8 @@
 }
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ */
 
+
 exports.mergeIds = mergeIds;
@@ -85,2 +94,6 @@
  */
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
 function chain() {
@@ -105,32 +118,37 @@ for (var _len = arguments.length, callbacks = new Array(_len), _key = 0; _key < _len; _key++) {
  * classNames are combined, and ids are deduplicated. For all other props,
- * the second props object overrides the first.
- * @param a - the first set of props to merge.
- * @param b - the second set of props to merge.
+ * the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
  */
-function mergeProps(a, b) {
-  let res = {};
+function mergeProps() {
+  let result = {};
 
-  for (let key in a) {
-    // Chain events
-    if (/^on[A-Z]/.test(key) && typeof a[key] === 'function' && typeof b[key] === 'function') {
-      res[key] = chain(a[key], b[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
-    } else if (key === 'className' && typeof a.className === 'string' && typeof b.className === 'string') {
-      res[key] = _classnames(a.className, b.className);
-    } else if (key === 'UNSAFE_className' && typeof a.UNSAFE_className === 'string' && typeof b.UNSAFE_className === 'string') {
-      res[key] = _classnames(a.UNSAFE_className, b.UNSAFE_className);
-    } else if (key === 'id' && a.id && b.id) {
-      res.id = mergeIds(a.id, b.id); // Override others
-    } else {
-      res[key] = b[key] !== undefined ? b[key] : a[key];
-    }
-  } // Add props from b that are not in a
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
 
+  for (let props of args) {
+    for (let key in result) {
+      // Chain events
+      if (/^on[A-Z]/.test(key) && typeof result[key] === 'function' && typeof props[key] === 'function') {
+        result[key] = chain(result[key], props[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
+        result[key] = _classnames(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);
+      } else if (key === 'id' && result.id && props.id) {
+        result.id = mergeIds(result.id, props.id); // Override others
+      } else {
+        result[key] = props[key] !== undefined ? props[key] : result[key];
+      }
+    } // Add props from b that are not in a
 
-  for (let key in b) {
-    if (a[key] === undefined) {
-      res[key] = b[key];
+
+    for (let key in props) {
+      if (result[key] === undefined) {
+        result[key] = props[key];
+      }
     }
   }
 
-  return res;
+  return result;
 }
@@ -397,3 +415,2 @@
 
-// This is a polyfill for element.focus({preventScroll: true});
 // Currently necessary for Safari and old Edge:
@@ -400,0 +417,0 @@ // https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option

dist/module.js

@@ -19,2 +19,6 @@ import _classnames from "classnames";
 }
+/**
+ * Merges two ids.
+ */
+
 export function mergeIds(a, b) {
@@ -41,2 +45,7 @@ if (a === b) {
 }
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ */
+
 export function useSlotId() {
@@ -65,2 +74,6 @@ let [id, setId] = useState(useId());
  */
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
 export function chain() {
@@ -83,32 +96,37 @@ for (var _len = arguments.length, callbacks = new Array(_len), _key = 0; _key < _len; _key++) {
  * classNames are combined, and ids are deduplicated. For all other props,
- * the second props object overrides the first.
- * @param a - the first set of props to merge.
- * @param b - the second set of props to merge.
+ * the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
  */
-export function mergeProps(a, b) {
-  let res = {};
+export function mergeProps() {
+  let result = {};
 
-  for (let key in a) {
-    // Chain events
-    if (/^on[A-Z]/.test(key) && typeof a[key] === 'function' && typeof b[key] === 'function') {
-      res[key] = chain(a[key], b[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
-    } else if (key === 'className' && typeof a.className === 'string' && typeof b.className === 'string') {
-      res[key] = _classnames(a.className, b.className);
-    } else if (key === 'UNSAFE_className' && typeof a.UNSAFE_className === 'string' && typeof b.UNSAFE_className === 'string') {
-      res[key] = _classnames(a.UNSAFE_className, b.UNSAFE_className);
-    } else if (key === 'id' && a.id && b.id) {
-      res.id = mergeIds(a.id, b.id); // Override others
-    } else {
-      res[key] = b[key] !== undefined ? b[key] : a[key];
-    }
-  } // Add props from b that are not in a
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
 
+  for (let props of args) {
+    for (let key in result) {
+      // Chain events
+      if (/^on[A-Z]/.test(key) && typeof result[key] === 'function' && typeof props[key] === 'function') {
+        result[key] = chain(result[key], props[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
+        result[key] = _classnames(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);
+      } else if (key === 'id' && result.id && props.id) {
+        result.id = mergeIds(result.id, props.id); // Override others
+      } else {
+        result[key] = props[key] !== undefined ? props[key] : result[key];
+      }
+    } // Add props from b that are not in a
 
-  for (let key in b) {
-    if (a[key] === undefined) {
-      res[key] = b[key];
+
+    for (let key in props) {
+      if (result[key] === undefined) {
+        result[key] = props[key];
+      }
     }
   }
 
-  return res;
+  return result;
 }
@@ -358,3 +376,2 @@ export function clamp(value, min, max) {
 }
-// This is a polyfill for element.focus({preventScroll: true});
 // Currently necessary for Safari and old Edge:
@@ -361,0 +378,0 @@ // https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option

dist/types.d.ts

@@ -8,4 +8,14 @@ import { HTMLAttributes, MutableRefObject, EffectCallback } from "react";
 export function useId(defaultId?: string): string;
+/**
+ * Merges two ids.
+ */
 export function mergeIds(a: string, b: string): string;
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ */
 export function useSlotId(): string;
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
 export function chain(...callbacks: any[]): (...args: any[]) => void;
@@ -15,10 +25,18 @@ interface Props {
 }
+type TupleTypes<T> = {
+    [P in keyof T]: T[P];
+} extends {
+    [key: number]: infer V;
+} ? V : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated. For all other props,
- * the second props object overrides the first.
- * @param a - the first set of props to merge.
- * @param b - the second set of props to merge.
+ * the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
  */
-export function mergeProps<T extends Props, U extends Props>(a: T, b: U): T & U;
+export function mergeProps<T extends Props[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
+/**
+ * Takes a value and forces it to the closest min/max.
+ */
 export function clamp(value: number, min?: number, max?: number): number;
@@ -49,3 +67,9 @@ export function getOffset(element: any, reverse: any, orientation?: string): any;
 interface Options {
+    /**
+     * If labelling associated aria properties should be included in the filter.
+     */
     labelable?: boolean;
+    /**
+     * A Set of other property names that should be included in the filter.
+     */
     propNames?: Set<string>;
@@ -52,0 +76,0 @@ }

package.json

 {
   "name": "@react-aria/utils",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Spectrum UI components in React",
@@ -21,3 +21,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-types/shared": "^3.0.2",
+    "@react-types/shared": "^3.1.0",
     "classnames": "^2.2.5"
@@ -31,3 +31,3 @@ },
   },
-  "gitHead": "05003506f02a0ec173f3448f1801cbdf12b47bc7"
+  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
 }

src/chain.ts

@@ -13,2 +13,5 @@ /*
 
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
 export function chain(...callbacks: any[]): (...args: any[]) => void {
@@ -15,0 +18,0 @@ return (...args: any[]) => {

src/filterDOMProps.ts

@@ -28,3 +28,9 @@ /*
 interface Options {
+  /**
+   * If labelling associated aria properties should be included in the filter.
+   */
   labelable?: boolean,
+  /**
+   * A Set of other property names that should be included in the filter.
+   */
   propNames?: Set<string>
@@ -31,0 +37,0 @@ }

src/mergeProps.ts

@@ -21,40 +21,54 @@ /*
 
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? V : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
+
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated. For all other props,
- * the second props object overrides the first.
- * @param a - the first set of props to merge.
- * @param b - the second set of props to merge.
+ * the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
  */
-export function mergeProps<T extends Props, U extends Props>(a: T, b: U): T & U {
-  let res: Props = {};
-  for (let key in a) {
-    // Chain events
-    if (/^on[A-Z]/.test(key) && typeof a[key] === 'function' && typeof b[key] === 'function') {
-      res[key] = chain(a[key], b[key]);
+export function mergeProps<T extends Props[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
+  let result: Props = {};
+  for (let props of args) {
+    for (let key in result) {
+      // Chain events
+      if (
+        /^on[A-Z]/.test(key) &&
+        typeof result[key] === 'function' &&
+        typeof props[key] === 'function'
+      ) {
+        result[key] = chain(result[key], props[key]);
 
-    // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
-    } else if (key === 'className' && typeof a.className === 'string' && typeof b.className === 'string') {
-      res[key] = classNames(a.className, b.className);
-
-    } else if (key === 'UNSAFE_className' && typeof a.UNSAFE_className === 'string' && typeof b.UNSAFE_className === 'string') {
-      res[key] = classNames(a.UNSAFE_className, b.UNSAFE_className);
-
-    } else if (key === 'id' && a.id && b.id) {
-      res.id = mergeIds(a.id, b.id);
-
-    // Override others
-    } else {
-      res[key] = b[key] !== undefined ? b[key] : a[key];
+        // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (
+        key === 'className' &&
+        typeof result.className === 'string' &&
+        typeof props.className === 'string'
+      ) {
+        result[key] = classNames(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);
+      } else if (key === 'id' && result.id && props.id) {
+        result.id = mergeIds(result.id, props.id);
+        // Override others
+      } else {
+        result[key] = props[key] !== undefined ? props[key] : result[key];
+      }
     }
-  }
 
-  // Add props from b that are not in a
-  for (let key in b) {
-    if (a[key] === undefined) {
-      res[key] = b[key];
+    // Add props from b that are not in a
+    for (let key in props) {
+      if (result[key] === undefined) {
+        result[key] = props[key];
+      }
     }
   }
 
-  return res as T & U;
+  return result as UnionToIntersection<TupleTypes<T>>;
 }

src/number.ts

@@ -13,4 +13,7 @@ /*
 
+/**
+ * Takes a value and forces it to the closest min/max.
+ */
 export function clamp(value: number, min: number = -Infinity, max: number = Infinity): number {
   return Math.min(Math.max(value, min), max);
 }

src/useId.ts

@@ -33,2 +33,5 @@ /*
 
+/**
+ * Merges two ids.
+ */
 export function mergeIds(a: string, b: string): string {
@@ -54,2 +57,6 @@ if (a === b) {
 
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ */
 export function useSlotId(): string {
@@ -56,0 +63,0 @@ let [id, setId] = useState(useId());

No alert changes

Improved metrics

Total package byte prevSize

134782

4.43%

Lines of code

1464

6.16%

Dependency changes

• Updated

  @react-types/shared@^3.1.0