@chakra-ui/utils - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

CHANGELOG.md

 # Change Log
 
+## 1.8.0
+
+### Minor Changes
+
+- [`b479ff22e`](https://github.com/chakra-ui/chakra-ui/commit/b479ff22ea10c1a1393224c37c36aa6ceabc4aab)
+  [#3930](https://github.com/chakra-ui/chakra-ui/pull/3930) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - - Add types for the return
+  value of `pipe` function
+  - Update user agent assertions
+
+* [`07d15eab4`](https://github.com/chakra-ui/chakra-ui/commit/07d15eab480724f8fee1a09b7cecdf1e968d9ddd)
+  [#3850](https://github.com/chakra-ui/chakra-ui/pull/3850) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Add walkObject helper to
+  iterate over all keys including nested
+
+### Patch Changes
+
+- [`d0f50a46e`](https://github.com/chakra-ui/chakra-ui/commit/d0f50a46ea6c2bcf06d8cad8b9b3994fd934be01)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - `PanSession` class
+
+  - Add velocity data to pointer pan event
+  - Add `onSessionStart` to pan event handlers
+
 ## 1.7.0
@@ -4,0 +27,0 @@

dist/cjs/function.js

@@ -112,14 +112,12 @@ "use strict";
 
-var combineFunctions = function combineFunctions(a, b) {
-  return function (v) {
-    return b(a(v));
-  };
-};
-
 var pipe = function pipe() {
-  for (var _len6 = arguments.length, transformers = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-    transformers[_key6] = arguments[_key6];
+  for (var _len6 = arguments.length, fns = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+    fns[_key6] = arguments[_key6];
   }
 
-  return transformers.reduce(combineFunctions);
+  return function (v) {
+    return fns.reduce(function (a, b) {
+      return b(a);
+    }, v);
+  };
 };
@@ -126,0 +124,0 @@

dist/cjs/index.js

@@ -140,2 +140,10 @@ "use strict";
 });
+
+var _walkObject = require("./walk-object");
+
+Object.keys(_walkObject).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _walkObject[key]) return;
+  exports[key] = _walkObject[key];
+});
 //# sourceMappingURL=index.js.map

dist/cjs/pan-event.js

@@ -16,2 +16,4 @@ "use strict";
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -67,4 +69,9 @@
 
-      _this.history.push(info.point);
+      var _getFrameData = (0, _framesync.getFrameData)(),
+          timestamp = _getFrameData.timestamp;
 
+      _this.history.push(_extends({}, info.point, {
+        timestamp: timestamp
+      }));
+
       var _this$handlers = _this.handlers,
@@ -97,7 +104,14 @@ onStart = _this$handlers.onStart,
     _defineProperty(this, "onPointerUp", function (event, info) {
-      _this.end();
+      // notify pan session ended
+      var panInfo = getPanInfo(info, _this.history);
+      var _this$handlers2 = _this.handlers,
+          onEnd = _this$handlers2.onEnd,
+          onSessionEnd = _this$handlers2.onSessionEnd;
+      onSessionEnd == null ? void 0 : onSessionEnd(event, panInfo);
 
-      var onEnd = _this.handlers.onEnd;
+      _this.end(); // if panning never started, no need to call `onEnd`
+      // panning requires a pointermove of at least 3px
+
+
       if (!onEnd || !_this.startEvent) return;
-      var panInfo = getPanInfo(info, _this.history);
       onEnd == null ? void 0 : onEnd(event, panInfo);
@@ -123,4 +137,9 @@ });
 
-    this.history = [_info.point]; // notify pan session start
+    var _getFrameData2 = (0, _framesync.getFrameData)(),
+        _timestamp = _getFrameData2.timestamp;
 
+    this.history = [_extends({}, _info.point, {
+      timestamp: _timestamp
+    })]; // notify pan session start
+
     var onSessionStart = handlers.onSessionStart;
@@ -170,5 +189,68 @@ onSessionStart == null ? void 0 : onSessionStart(_event, getPanInfo(_info, this.history)); // attach event listeners and return a single function to remove them all
     delta: subtractPoint(info.point, lastPanPoint(history)),
-    offset: subtractPoint(info.point, startPanPoint(history))
+    offset: subtractPoint(info.point, startPanPoint(history)),
+    velocity: getVelocity(history, 0.1)
   };
 }
+
+function lastDevicePoint(history) {
+  return history[history.length - 1];
+}
+
+var toMilliseconds = function toMilliseconds(seconds) {
+  return seconds * 1000;
+};
+
+function getVelocity(history, timeDelta) {
+  if (history.length < 2) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var i = history.length - 1;
+  var timestampedPoint = null;
+  var lastPoint = lastDevicePoint(history);
+
+  while (i >= 0) {
+    timestampedPoint = history[i];
+
+    if (lastPoint.timestamp - timestampedPoint.timestamp > toMilliseconds(timeDelta)) {
+      break;
+    }
+
+    i--;
+  }
+
+  if (!timestampedPoint) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+
+  if (time === 0) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var currentVelocity = {
+    x: (lastPoint.x - timestampedPoint.x) / time,
+    y: (lastPoint.y - timestampedPoint.y) / time
+  };
+
+  if (currentVelocity.x === Infinity) {
+    currentVelocity.x = 0;
+  }
+
+  if (currentVelocity.y === Infinity) {
+    currentVelocity.y = 0;
+  }
+
+  return currentVelocity;
+}
 //# sourceMappingURL=pan-event.js.map

dist/cjs/user-agent.js

 "use strict";
 
 exports.__esModule = true;
+exports.detectDeviceType = detectDeviceType;
 exports.detectOS = detectOS;
 exports.detectBrowser = detectBrowser;
+exports.detectTouch = detectTouch;
 
 var _dom = require("./dom");
 
-function getUserAgentBrowser(ua) {
-  var android = /Android/.test(ua);
+function getUserAgentBrowser(navigator) {
+  var ua = navigator.userAgent,
+      vendor = navigator.vendor;
+  var android = /(android)/i.test(ua);
 
@@ -16,3 +20,3 @@ switch (true) {
 
-    case /Edge/.test(ua):
+    case /Edg\//.test(ua):
       return "Edge";
@@ -23,6 +27,6 @@
 
-    case /Chrome/.test(ua):
+    case /Chrome/.test(ua) && /Google Inc/.test(vendor):
       return "Chrome";
 
-    case /Firefox/.test(ua):
+    case /Firefox\/\d+\.\d+$/.test(ua):
       return "Firefox";
@@ -36,3 +40,3 @@
 
-    case /Safari\//.test(ua):
+    case /Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua):
       return "Safari";
@@ -44,7 +48,10 @@
     default:
-      return "";
+      return null;
   }
 }
 
-function getUserAgentOS(ua) {
+function getUserAgentOS(navigator) {
+  var ua = navigator.userAgent,
+      platform = navigator.platform;
+
   switch (true) {
@@ -54,9 +61,9 @@ case /Android/.test(ua):
 
-    case /iPhone|iPad|iPod/.test(ua):
+    case /iPhone|iPad|iPod/.test(platform):
       return "iOS";
 
-    case /Windows/.test(ua):
+    case /Win/.test(platform):
       return "Windows";
 
-    case /Mac OS X/.test(ua):
+    case /Mac/.test(platform):
       return "Mac";
@@ -71,17 +78,27 @@
     default:
-      return "";
+      return null;
   }
 }
 
-function detectOS(string) {
+function detectDeviceType(navigator) {
+  var ua = navigator.userAgent;
+  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua)) return "tablet";
+  if (/(mobi)/i.test(ua)) return "phone";
+  return "desktop";
+}
+
+function detectOS(os) {
   if (!_dom.isBrowser) return false;
-  var ua = window.navigator.userAgent;
-  return getUserAgentOS(ua) === string;
+  return getUserAgentOS(window.navigator) === os;
 }
 
-function detectBrowser(string) {
+function detectBrowser(browser) {
   if (!_dom.isBrowser) return false;
-  var ua = window.navigator.userAgent;
-  return getUserAgentBrowser(ua) === string;
+  return getUserAgentBrowser(window.navigator) === browser;
 }
+
+function detectTouch() {
+  if (!_dom.isBrowser) return false;
+  return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
+}
 //# sourceMappingURL=user-agent.js.map

dist/esm/function.js

@@ -84,11 +84,8 @@ /* eslint-disable no-nested-ternary */
 export var scheduleMicrotask = __TEST__ ? fn => fn() : typeof queueMicrotask === "function" ? queueMicrotask : promiseMicrotask;
-
-var combineFunctions = (a, b) => v => b(a(v));
-
 export var pipe = function pipe() {
-  for (var _len6 = arguments.length, transformers = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-    transformers[_key6] = arguments[_key6];
+  for (var _len6 = arguments.length, fns = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+    fns[_key6] = arguments[_key6];
   }
 
-  return transformers.reduce(combineFunctions);
+  return v => fns.reduce((a, b) => b(a), v);
 };
@@ -95,0 +92,0 @@

dist/esm/index.js

@@ -18,2 +18,3 @@ export * from "css-box-model";
 export * from "./user-agent";
+export * from "./walk-object";
 //# sourceMappingURL=index.js.map

dist/esm/pan-event.js

@@ -0,1 +1,3 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,3 +11,3 @@
  */
-import sync, { cancelSync } from "framesync";
+import sync, { cancelSync, getFrameData } from "framesync";
 import { isMouseEvent, extractEventInfo, addPointerEvent, isMultiTouchEvent } from "./pointer-event";
@@ -63,4 +65,9 @@ import { pipe, distance, noop } from "./function";
       if (!isPanStarted && !isDistancePastThreshold) return;
-      this.history.push(info.point);
       var {
+        timestamp
+      } = getFrameData();
+      this.history.push(_extends({}, info.point, {
+        timestamp
+      }));
+      var {
         onStart,
@@ -92,8 +99,13 @@ onMove
     _defineProperty(this, "onPointerUp", (event, info) => {
-      this.end();
+      // notify pan session ended
+      var panInfo = getPanInfo(info, this.history);
       var {
-        onEnd
+        onEnd,
+        onSessionEnd
       } = this.handlers;
+      onSessionEnd == null ? void 0 : onSessionEnd(event, panInfo);
+      this.end(); // if panning never started, no need to call `onEnd`
+      // panning requires a pointermove of at least 3px
+
       if (!onEnd || !this.startEvent) return;
-      var panInfo = getPanInfo(info, this.history);
       onEnd == null ? void 0 : onEnd(event, panInfo);
@@ -119,3 +131,8 @@ });
 
-    this.history = [_info.point]; // notify pan session start
+    var {
+      timestamp: _timestamp
+    } = getFrameData();
+    this.history = [_extends({}, _info.point, {
+      timestamp: _timestamp
+    })]; // notify pan session start
 
@@ -162,5 +179,66 @@ var {
     delta: subtractPoint(info.point, lastPanPoint(history)),
-    offset: subtractPoint(info.point, startPanPoint(history))
+    offset: subtractPoint(info.point, startPanPoint(history)),
+    velocity: getVelocity(history, 0.1)
   };
 }
+
+function lastDevicePoint(history) {
+  return history[history.length - 1];
+}
+
+var toMilliseconds = seconds => seconds * 1000;
+
+function getVelocity(history, timeDelta) {
+  if (history.length < 2) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var i = history.length - 1;
+  var timestampedPoint = null;
+  var lastPoint = lastDevicePoint(history);
+
+  while (i >= 0) {
+    timestampedPoint = history[i];
+
+    if (lastPoint.timestamp - timestampedPoint.timestamp > toMilliseconds(timeDelta)) {
+      break;
+    }
+
+    i--;
+  }
+
+  if (!timestampedPoint) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+
+  if (time === 0) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  var currentVelocity = {
+    x: (lastPoint.x - timestampedPoint.x) / time,
+    y: (lastPoint.y - timestampedPoint.y) / time
+  };
+
+  if (currentVelocity.x === Infinity) {
+    currentVelocity.x = 0;
+  }
+
+  if (currentVelocity.y === Infinity) {
+    currentVelocity.y = 0;
+  }
+
+  return currentVelocity;
+}
 //# sourceMappingURL=pan-event.js.map

dist/esm/user-agent.js

 import { isBrowser } from "./dom";
 
-function getUserAgentBrowser(ua) {
-  var android = /Android/.test(ua);
+function getUserAgentBrowser(navigator) {
+  var {
+    userAgent: ua,
+    vendor
+  } = navigator;
+  var android = /(android)/i.test(ua);
 
@@ -10,3 +14,3 @@ switch (true) {
 
-    case /Edge/.test(ua):
+    case /Edg\//.test(ua):
       return "Edge";
@@ -17,6 +21,6 @@
 
-    case /Chrome/.test(ua):
+    case /Chrome/.test(ua) && /Google Inc/.test(vendor):
       return "Chrome";
 
-    case /Firefox/.test(ua):
+    case /Firefox\/\d+\.\d+$/.test(ua):
       return "Firefox";
@@ -30,3 +34,3 @@
 
-    case /Safari\//.test(ua):
+    case /Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua):
       return "Safari";
@@ -38,7 +42,12 @@
     default:
-      return "";
+      return null;
   }
 }
 
-function getUserAgentOS(ua) {
+function getUserAgentOS(navigator) {
+  var {
+    userAgent: ua,
+    platform
+  } = navigator;
+
   switch (true) {
@@ -48,9 +57,9 @@ case /Android/.test(ua):
 
-    case /iPhone|iPad|iPod/.test(ua):
+    case /iPhone|iPad|iPod/.test(platform):
       return "iOS";
 
-    case /Windows/.test(ua):
+    case /Win/.test(platform):
       return "Windows";
 
-    case /Mac OS X/.test(ua):
+    case /Mac/.test(platform):
       return "Mac";
@@ -65,16 +74,26 @@
     default:
-      return "";
+      return null;
   }
 }
 
-export function detectOS(string) {
+export function detectDeviceType(navigator) {
+  var {
+    userAgent: ua
+  } = navigator;
+  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua)) return "tablet";
+  if (/(mobi)/i.test(ua)) return "phone";
+  return "desktop";
+}
+export function detectOS(os) {
   if (!isBrowser) return false;
-  var ua = window.navigator.userAgent;
-  return getUserAgentOS(ua) === string;
+  return getUserAgentOS(window.navigator) === os;
 }
-export function detectBrowser(string) {
+export function detectBrowser(browser) {
   if (!isBrowser) return false;
-  var ua = window.navigator.userAgent;
-  return getUserAgentBrowser(ua) === string;
+  return getUserAgentBrowser(window.navigator) === browser;
 }
+export function detectTouch() {
+  if (!isBrowser) return false;
+  return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
+}
 //# sourceMappingURL=user-agent.js.map

dist/types/function.d.ts

@@ -15,3 +15,3 @@ import { AnyFunction, FunctionArguments } from "./types";
 export declare const scheduleMicrotask: typeof queueMicrotask;
-export declare const pipe: (...transformers: Function[]) => Function;
+export declare const pipe: <R>(...fns: ((a: R) => R)[]) => (v: R) => R;
 declare type Point = {
@@ -18,0 +18,0 @@ x: number;

dist/types/index.d.ts

@@ -18,2 +18,3 @@ export * from "css-box-model";
 export * from "./user-agent";
+export * from "./walk-object";
 //# sourceMappingURL=index.d.ts.map

dist/types/pan-event.d.ts

@@ -30,4 +30,8 @@ /**
     offset: Point;
+    /**
+     * Contains `x` and `y` values for the current velocity of the pointer.
+     */
+    velocity: Point;
 }
-export declare type PanHandler = (event: AnyPointerEvent, info: PanEventInfo) => void;
+export declare type PanEventHandler = (event: AnyPointerEvent, info: PanEventInfo) => void;
 export interface PanSessionHandlers {
@@ -38,4 +42,9 @@ /**
      */
-    onSessionStart: PanHandler;
+    onSessionStart: PanEventHandler;
     /**
+     * Callback fired when the pan session is detached.
+     * This is typically called once `pointerup` event is fired.
+     */
+    onSessionEnd: PanEventHandler;
+    /**
      * Callback fired when the pan session has started.
@@ -45,7 +54,7 @@ * The pan session when the pan offset is greater than
      */
-    onStart: PanHandler;
+    onStart: PanEventHandler;
     /**
      * Callback fired while panning
      */
-    onMove: PanHandler;
+    onMove: PanEventHandler;
     /**
@@ -55,3 +64,3 @@ * Callback fired when the current pan session has end.
      */
-    onEnd: PanHandler;
+    onEnd: PanEventHandler;
 }
@@ -58,0 +67,0 @@ /**

dist/types/user-agent.d.ts

@@ -1,3 +0,11 @@
-export declare function detectOS(string: string): boolean;
-export declare function detectBrowser(string: string): boolean;
+declare function getUserAgentBrowser(navigator: Navigator): "Chrome for iOS" | "Edge" | "Silk" | "Chrome" | "Firefox" | "AOSP" | "IE" | "Safari" | "WebKit" | null;
+export declare type UserAgentBrowser = NonNullable<ReturnType<typeof getUserAgentBrowser>>;
+declare function getUserAgentOS(navigator: Navigator): "Android" | "iOS" | "Windows" | "Mac" | "Chrome OS" | "Firefox OS" | null;
+export declare type UserAgentOS = NonNullable<ReturnType<typeof getUserAgentOS>>;
+export declare function detectDeviceType(navigator: Navigator): "tablet" | "phone" | "desktop";
+export declare type UserAgentDeviceType = NonNullable<ReturnType<typeof detectDeviceType>>;
+export declare function detectOS(os: UserAgentOS): boolean;
+export declare function detectBrowser(browser: UserAgentBrowser): boolean;
+export declare function detectTouch(): boolean;
+export {};
 //# sourceMappingURL=user-agent.d.ts.map

package.json

 {
   "name": "@chakra-ui/utils",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Common utilties and types for Chakra UI",
@@ -5,0 +5,0 @@ "author": "Segun Adebayo <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

363998

increased by7.42%

Number of package files

111

increased by5.71%

Lines of code

3429

increased by7.22%

No dependency changes