@micromag/core 0.4.52 → 0.4.54

package/es/hooks.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import * as _use_gesture_react_dist_declarations_src_types from '@use-gesture/react/dist/declarations/src/types';
 import * as _react_spring_core from '@react-spring/core';
+import * as _use_gesture_react_dist_declarations_src_types from '@use-gesture/react/dist/declarations/src/types';
 
 declare function useActivityDetector({ element: providedElement, disabled, timeout: timeoutDelay }?: {
     element?: any;
@@ -29,23 +29,24 @@ declare const useDebounced: (handler: any, watchedValue: any, delay?: number) =>
 
 declare const useDocumentEvent: (event: any, callback: any, enabled?: boolean) => void;
 
-declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dragDisabled, computeProgress, onProgress, onPointerDown, onScroll, springParams, dragOptions, }?: {
-    onTap?: any;
+interface UseDragProgressProps {
+    progress: number;
+    onTap?: (gestureState: any) => void;
     disabled?: boolean;
     dragDisabled?: boolean;
-    computeProgress?: any;
-    onProgress?: any;
-    onPointerDown?: any;
-    onScroll?: any;
-    springParams?: any;
-    dragOptions?: {
-        filterTaps: boolean;
-    };
-}): {
-    transitioning: any;
+    computeProgress?: (gestureState: any) => number | null;
+    onProgress?: (progress: number, gestureState: any) => void | null;
+    onPointerDown?: (gestureState: any) => void | null;
+    onResolve?: (event: any) => void | null;
+    onScroll?: (gestureState: any) => void | null;
+    springParams?: object;
+    dragOptions?: object;
+}
+declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dragDisabled, computeProgress, onProgress, onPointerDown, onResolve, onScroll, springParams, dragOptions, }: UseDragProgressProps): {
+    transitioning: boolean;
     bind: (...args: any[]) => _use_gesture_react_dist_declarations_src_types.ReactDOMAttributes;
     dragging: boolean;
-    progress: any;
+    progress: _react_spring_core.SpringValue<number>;
     direction: number;
 };
 

package/es/hooks.js

@@ -190,9 +190,8 @@ var useDebounced = function useDebounced(handler, watchedValue) {
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 var useDocumentEvent = createUseEvent(eventsManager$1);
 
-function useDragProgress() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    wantedProgress = _ref.progress,
+function useDragProgress(_ref) {
+  var wantedProgress = _ref.progress,
     _ref$onTap = _ref.onTap,
     onTap = _ref$onTap === void 0 ? null : _ref$onTap,
     _ref$disabled = _ref.disabled,
@@ -205,6 +204,8 @@ function useDragProgress() {
     onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
     _ref$onPointerDown = _ref.onPointerDown,
     onPointerDown = _ref$onPointerDown === void 0 ? null : _ref$onPointerDown,
+    _ref$onResolve = _ref.onResolve,
+    _onResolve = _ref$onResolve === void 0 ? null : _ref$onResolve,
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? null : _ref$onScroll,
     _ref$springParams = _ref.springParams,
@@ -213,8 +214,8 @@ function useDragProgress() {
     dragOptions = _ref$dragOptions === void 0 ? {
       filterTaps: true
     } : _ref$dragOptions;
-  var refDragging = useRef(false);
-  var refProgress = useRef(wantedProgress);
+  var draggingRef = useRef(false);
+  var progressRef = useRef(wantedProgress);
   var wantedProgressRef = useRef(wantedProgress);
   if (wantedProgress !== wantedProgressRef.current) {
     wantedProgressRef.current = wantedProgress;
@@ -249,36 +250,39 @@ function useDragProgress() {
     var active = gestureState.active,
       tap = gestureState.tap;
     if (disabled) {
-      refDragging.current = false;
+      draggingRef.current = false;
       return;
     }
     if (tap) {
-      refDragging.current = false;
+      draggingRef.current = false;
       if (onTap !== null) onTap(gestureState);
       return;
     }
     if (dragDisabled) {
-      refDragging.current = false;
+      draggingRef.current = false;
       return;
     }
     var newProgress = computeProgress(gestureState);
-    refDragging.current = active;
+    draggingRef.current = active;
     setDirection(newProgress < wantedProgressRef.current ? -1 : 1);
-    refProgress.current = newProgress;
+    progressRef.current = newProgress;
     if (active !== dragging) {
       setDragging(active);
     }
     api.start(_objectSpread({
       progress: newProgress,
       immediate: active,
-      onResolve: !active ? function () {
+      onResolve: !active ? function (e) {
         setDirection(0);
-      } : function () {}
+        if (_onResolve !== null) _onResolve(e);
+      } : function (e) {
+        if (_onResolve !== null) _onResolve(e);
+      }
     }, springParams));
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress, _onResolve]);
   var bind = useGesture({
     onDrag: onDrag,
     onPointerDown: onPointerDown !== null ? onPointerDown : function () {},
@@ -287,14 +291,15 @@ function useDragProgress() {
     drag: dragOptions
   });
   useEffect(function () {
-    if (!refDragging.current && wantedProgress !== refProgress.current) {
-      setDirection(wantedProgress < refProgress.current ? -1 : 1);
-      refProgress.current = wantedProgress;
+    if (!draggingRef.current && wantedProgress !== progressRef.current) {
+      setDirection(wantedProgress < progressRef.current ? -1 : 1);
+      progressRef.current = wantedProgress;
       api.start(_objectSpread({
         progress: wantedProgress,
         immediate: disabled,
-        onResolve: function onResolve() {
+        onResolve: function onResolve(e) {
           setDirection(0);
+          if (_onResolve !== null) _onResolve(e);
         }
       }, springParams));
     }
@@ -544,7 +549,17 @@ var useObserver = function useObserver(Observer) {
   useEffect(function () {
     var nodeElement = nodeRef.current;
     var callback = function callback(newEntry) {
-      return setEntry(newEntry);
+      return setEntry(function (prev) {
+        // Avoid re-renders when ResizeObserver fires with unchanged dimensions
+        if (prev !== null && prev !== void 0 && prev.contentRect && newEntry !== null && newEntry !== void 0 && newEntry.contentRect) {
+          var p = prev.contentRect;
+          var n = newEntry.contentRect;
+          if (p.width === n.width && p.height === n.height) {
+            return prev;
+          }
+        }
+        return newEntry;
+      });
     };
     var unsubscribe = null;
     if (nodeElement !== null) {

package/es/utils.d.ts

@@ -118,6 +118,15 @@ declare const getStyleFromAlignment: (value: any, invertAxis?: boolean, defaultA
 };
 
 declare const getStyleFromBox: (value: any) => {
+    paddingTop: any;
+    paddingRight: any;
+    paddingBottom: any;
+    paddingLeft: any;
+    boxShadow: string;
+    borderStyle: any;
+    borderWidth: any;
+    borderRadius: any;
+} | {
     paddingLeft: any;
     paddingBottom: any;
     paddingRight: any;

package/es/utils.js

@@ -822,19 +822,34 @@ var getStyleFromBox = function getStyleFromBox(value) {
     paddingValueLeft = _ref$left === void 0 ? null : _ref$left,
     _ref$padding = _ref.padding,
     paddingValue = _ref$padding === void 0 ? null : _ref$padding;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
-    borderRadius: borderRadius
-  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), padding !== null || paddingValue !== null ? {
-    padding: padding || paddingValue
-  } : null), paddingTop !== null || paddingValueTop !== null ? {
-    paddingTop: paddingTop || paddingValueTop
-  } : null), paddingRight !== null || paddingValueRight != null ? {
-    paddingRight: paddingRight || paddingValueRight
-  } : null), paddingBottom !== null || paddingValueBottom !== null ? {
-    paddingBottom: paddingBottom || paddingValueBottom
-  } : null), paddingLeft !== null || paddingValueLeft !== null ? {
-    paddingLeft: paddingLeft || paddingValueLeft
+  var basePadding = padding || paddingValue;
+  var hasBasePadding = basePadding !== null;
+  var topVal = paddingTop || paddingValueTop;
+  var rightVal = paddingRight || paddingValueRight;
+  var bottomVal = paddingBottom || paddingValueBottom;
+  var leftVal = paddingLeft || paddingValueLeft;
+  var hasAnyIndividual = topVal !== null || rightVal !== null || bottomVal !== null || leftVal !== null;
+
+  // Avoid mixing shorthand `padding` with longhand `paddingTop`/etc — React warns about this
+  var paddingStyles = hasBasePadding && hasAnyIndividual ? {
+    paddingTop: topVal !== null && topVal !== void 0 ? topVal : basePadding,
+    paddingRight: rightVal !== null && rightVal !== void 0 ? rightVal : basePadding,
+    paddingBottom: bottomVal !== null && bottomVal !== void 0 ? bottomVal : basePadding,
+    paddingLeft: leftVal !== null && leftVal !== void 0 ? leftVal : basePadding
+  } : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hasBasePadding ? {
+    padding: basePadding
+  } : null), topVal !== null ? {
+    paddingTop: topVal
+  } : null), rightVal !== null ? {
+    paddingRight: rightVal
+  } : null), bottomVal !== null ? {
+    paddingBottom: bottomVal
+  } : null), leftVal !== null ? {
+    paddingLeft: leftVal
   } : null);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
+    borderRadius: borderRadius
+  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), paddingStyles);
 };
 
 var getStyleFromContainer = function getStyleFromContainer(value) {

package/lib/hooks.js

@@ -192,9 +192,8 @@ var useDebounced = function useDebounced(handler, watchedValue) {
 var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
 var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
-function useDragProgress() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    wantedProgress = _ref.progress,
+function useDragProgress(_ref) {
+  var wantedProgress = _ref.progress,
     _ref$onTap = _ref.onTap,
     onTap = _ref$onTap === void 0 ? null : _ref$onTap,
     _ref$disabled = _ref.disabled,
@@ -207,6 +206,8 @@ function useDragProgress() {
     onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
     _ref$onPointerDown = _ref.onPointerDown,
     onPointerDown = _ref$onPointerDown === void 0 ? null : _ref$onPointerDown,
+    _ref$onResolve = _ref.onResolve,
+    _onResolve = _ref$onResolve === void 0 ? null : _ref$onResolve,
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? null : _ref$onScroll,
     _ref$springParams = _ref.springParams,
@@ -215,8 +216,8 @@ function useDragProgress() {
     dragOptions = _ref$dragOptions === void 0 ? {
       filterTaps: true
     } : _ref$dragOptions;
-  var refDragging = react.useRef(false);
-  var refProgress = react.useRef(wantedProgress);
+  var draggingRef = react.useRef(false);
+  var progressRef = react.useRef(wantedProgress);
   var wantedProgressRef = react.useRef(wantedProgress);
   if (wantedProgress !== wantedProgressRef.current) {
     wantedProgressRef.current = wantedProgress;
@@ -251,36 +252,39 @@ function useDragProgress() {
     var active = gestureState.active,
       tap = gestureState.tap;
     if (disabled) {
-      refDragging.current = false;
+      draggingRef.current = false;
       return;
     }
     if (tap) {
-      refDragging.current = false;
+      draggingRef.current = false;
       if (onTap !== null) onTap(gestureState);
       return;
     }
     if (dragDisabled) {
-      refDragging.current = false;
+      draggingRef.current = false;
       return;
     }
     var newProgress = computeProgress(gestureState);
-    refDragging.current = active;
+    draggingRef.current = active;
     setDirection(newProgress < wantedProgressRef.current ? -1 : 1);
-    refProgress.current = newProgress;
+    progressRef.current = newProgress;
     if (active !== dragging) {
       setDragging(active);
     }
     api.start(_objectSpread({
       progress: newProgress,
       immediate: active,
-      onResolve: !active ? function () {
+      onResolve: !active ? function (e) {
         setDirection(0);
-      } : function () {}
+        if (_onResolve !== null) _onResolve(e);
+      } : function (e) {
+        if (_onResolve !== null) _onResolve(e);
+      }
     }, springParams));
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress, _onResolve]);
   var bind = react$1.useGesture({
     onDrag: onDrag,
     onPointerDown: onPointerDown !== null ? onPointerDown : function () {},
@@ -289,14 +293,15 @@ function useDragProgress() {
     drag: dragOptions
   });
   react.useEffect(function () {
-    if (!refDragging.current && wantedProgress !== refProgress.current) {
-      setDirection(wantedProgress < refProgress.current ? -1 : 1);
-      refProgress.current = wantedProgress;
+    if (!draggingRef.current && wantedProgress !== progressRef.current) {
+      setDirection(wantedProgress < progressRef.current ? -1 : 1);
+      progressRef.current = wantedProgress;
       api.start(_objectSpread({
         progress: wantedProgress,
         immediate: disabled,
-        onResolve: function onResolve() {
+        onResolve: function onResolve(e) {
           setDirection(0);
+          if (_onResolve !== null) _onResolve(e);
         }
       }, springParams));
     }
@@ -546,7 +551,17 @@ var useObserver = function useObserver(Observer) {
   react.useEffect(function () {
     var nodeElement = nodeRef.current;
     var callback = function callback(newEntry) {
-      return setEntry(newEntry);
+      return setEntry(function (prev) {
+        // Avoid re-renders when ResizeObserver fires with unchanged dimensions
+        if (prev !== null && prev !== void 0 && prev.contentRect && newEntry !== null && newEntry !== void 0 && newEntry.contentRect) {
+          var p = prev.contentRect;
+          var n = newEntry.contentRect;
+          if (p.width === n.width && p.height === n.height) {
+            return prev;
+          }
+        }
+        return newEntry;
+      });
     };
     var unsubscribe = null;
     if (nodeElement !== null) {

package/lib/utils.js

@@ -823,19 +823,34 @@ var getStyleFromBox = function getStyleFromBox(value) {
     paddingValueLeft = _ref$left === void 0 ? null : _ref$left,
     _ref$padding = _ref.padding,
     paddingValue = _ref$padding === void 0 ? null : _ref$padding;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
-    borderRadius: borderRadius
-  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), padding !== null || paddingValue !== null ? {
-    padding: padding || paddingValue
-  } : null), paddingTop !== null || paddingValueTop !== null ? {
-    paddingTop: paddingTop || paddingValueTop
-  } : null), paddingRight !== null || paddingValueRight != null ? {
-    paddingRight: paddingRight || paddingValueRight
-  } : null), paddingBottom !== null || paddingValueBottom !== null ? {
-    paddingBottom: paddingBottom || paddingValueBottom
-  } : null), paddingLeft !== null || paddingValueLeft !== null ? {
-    paddingLeft: paddingLeft || paddingValueLeft
+  var basePadding = padding || paddingValue;
+  var hasBasePadding = basePadding !== null;
+  var topVal = paddingTop || paddingValueTop;
+  var rightVal = paddingRight || paddingValueRight;
+  var bottomVal = paddingBottom || paddingValueBottom;
+  var leftVal = paddingLeft || paddingValueLeft;
+  var hasAnyIndividual = topVal !== null || rightVal !== null || bottomVal !== null || leftVal !== null;
+
+  // Avoid mixing shorthand `padding` with longhand `paddingTop`/etc — React warns about this
+  var paddingStyles = hasBasePadding && hasAnyIndividual ? {
+    paddingTop: topVal !== null && topVal !== void 0 ? topVal : basePadding,
+    paddingRight: rightVal !== null && rightVal !== void 0 ? rightVal : basePadding,
+    paddingBottom: bottomVal !== null && bottomVal !== void 0 ? bottomVal : basePadding,
+    paddingLeft: leftVal !== null && leftVal !== void 0 ? leftVal : basePadding
+  } : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hasBasePadding ? {
+    padding: basePadding
+  } : null), topVal !== null ? {
+    paddingTop: topVal
+  } : null), rightVal !== null ? {
+    paddingRight: rightVal
+  } : null), bottomVal !== null ? {
+    paddingBottom: bottomVal
+  } : null), leftVal !== null ? {
+    paddingLeft: leftVal
   } : null);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
+    borderRadius: borderRadius
+  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), paddingStyles);
 };
 
 var getStyleFromContainer = function getStyleFromContainer(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.52",
+    "version": "0.4.54",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7e9283049e6904a73ed2c8ac47b2e45465823656",
+    "gitHead": "b7aacdebb4a5c2179a58d21ab2aaea5bcdc43d69",
     "types": "es/index.d.ts"
 }