@micromag/core 0.3.178 → 0.3.180

package/lib/hooks.js

@@ -10,6 +10,8 @@ var isString = require('lodash/isString');
 var dayjs = require('dayjs');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
+var react$1 = require('@use-gesture/react');
+var core$1 = require('@react-spring/core');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var forms = require('@folklore/forms');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -21,8 +23,6 @@ var isObject = require('lodash/isObject');
 var raf = require('raf');
 var contexts = require('@micromag/core/contexts');
 var cssMediaquery = require('css-mediaquery');
-var core$1 = require('@react-spring/core');
-var react$1 = require('@use-gesture/react');
 var clamp = require('lodash/clamp');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -234,6 +234,120 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
 var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
+var getValueFromSpring = function getValueFromSpring(s) {
+  var _ref = s || {},
+      _ref$value = _ref.value,
+      v = _ref$value === void 0 ? null : _ref$value;
+
+  var _ref2 = v || {},
+      p = _ref2.progress;
+
+  return p;
+};
+
+function useSpringValue(wantedProgress, immediate, params) {
+  var _useState = react.useState(wantedProgress),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = react.useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+
+  var _useSpring = core$1.useSpring(function () {
+    return _objectSpread__default["default"]({
+      progress: wantedProgress,
+      onChange: onChange,
+      immediate: immediate
+    }, params);
+  }),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+      api = _useSpring2[1];
+
+  react.useEffect(function () {
+    if (wantedProgress !== null) {
+      api.start(_objectSpread__default["default"]({
+        progress: wantedProgress,
+        immediate: immediate
+      }, params));
+    }
+  }, [wantedProgress, immediate, params, api]);
+  return immediate ? wantedProgress : progress;
+}
+
+function useDragProgress() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      wantedProgress = _ref.progress,
+      _ref$onTap = _ref.onTap,
+      onTap = _ref$onTap === void 0 ? null : _ref$onTap,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$dragDisabled = _ref.dragDisabled,
+      dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
+      _ref$computeProgress = _ref.computeProgress,
+      computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
+      _ref$onProgress = _ref.onProgress,
+      onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
+      _ref$springParams = _ref.springParams,
+      springParams = _ref$springParams === void 0 ? undefined : _ref$springParams;
+
+  var _useState = react.useState({
+    dragging: false,
+    progress: wantedProgress
+  }),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      _useState2$ = _useState2[0],
+      dragging = _useState2$.dragging,
+      progress = _useState2$.progress,
+      setDragState = _useState2[1];
+
+  var onDragContent = react.useCallback(function (gestureState) {
+    if (disabled) {
+      return;
+    }
+
+    var active = gestureState.active,
+        tap = gestureState.tap;
+
+    if (tap) {
+      if (onTap !== null) onTap(gestureState);
+      return;
+    }
+
+    if (dragDisabled) {
+      return;
+    }
+
+    var newProgress = computeProgress(gestureState);
+    setDragState({
+      dragging: active,
+      progress: newProgress
+    });
+
+    if (onProgress !== null) {
+      onProgress(newProgress, gestureState);
+    }
+  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  var bind = react$1.useDrag(onDragContent, {
+    filterTaps: true
+  });
+  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
+  react.useEffect(function () {
+    if (wantedProgress !== progress && !dragging) {
+      setDragState({
+        dragging: dragging,
+        progress: wantedProgress
+      });
+    }
+  }, [wantedProgress]);
+  return {
+    bind: bind,
+    dragging: dragging,
+    progress: springedProgress
+  };
+}
+
 var _excluded$3 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
@@ -789,25 +903,48 @@ var useLongPress = function useLongPress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$onLongPress = _ref.onLongPress,
       onLongPress = _ref$onLongPress === void 0 ? null : _ref$onLongPress,
+      _ref$onLongPressStart = _ref.onLongPressStart,
+      onLongPressStart = _ref$onLongPressStart === void 0 ? null : _ref$onLongPressStart,
+      _ref$onLongPressEnd = _ref.onLongPressEnd,
+      onLongPressEnd = _ref$onLongPressEnd === void 0 ? null : _ref$onLongPressEnd,
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? null : _ref$onClick,
       _ref$shouldPreventDef = _ref.shouldPreventDefault,
       shouldPreventDefault = _ref$shouldPreventDef === void 0 ? true : _ref$shouldPreventDef,
+      _ref$shouldStopPropag = _ref.shouldStopPropagation,
+      shouldStopPropagation = _ref$shouldStopPropag === void 0 ? false : _ref$shouldStopPropag,
+      _ref$preventClick = _ref.preventClick,
+      preventClick = _ref$preventClick === void 0 ? false : _ref$preventClick,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 350 : _ref$delay;
 
   var _useState = react.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      longPressTriggered = _useState2[0],
-      setLongPressTriggered = _useState2[1];
+      pressed = _useState2[0],
+      setPressed = _useState2[1];
+
+  var _useState3 = react.useState(false),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      triggered = _useState4[0],
+      setTriggered = _useState4[1];
 
   var timeout = react.useRef(null);
   var target = react.useRef(null);
-  var start = react.useCallback(function (event) {
+  var start = react.useCallback(function (event, props) {
+    setPressed(true);
+
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+
     if (event.target !== null) {
       target.current = event.target;
     }
 
+    if (onLongPressStart !== null) {
+      onLongPressStart(event, props);
+    }
+
     timeout.current = setTimeout(function () {
       if (shouldPreventDefault && target.current !== null) {
         target.current.addEventListener('touchend', preventDefault, {
@@ -818,16 +955,23 @@ var useLongPress = function useLongPress() {
         });
       }
 
+      setTriggered(true);
+
       if (onLongPress !== null) {
-        onLongPress(event);
+        onLongPress(event, props);
+        setPressed(false);
       }
 
-      setLongPressTriggered(true);
       timeout.current = null;
     }, delay);
-  }, [onLongPress, delay, shouldPreventDefault]);
-  var clear = react.useCallback(function (event) {
-    var shouldTriggerClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  }, [onLongPress, onLongPressStart, delay, setPressed, shouldPreventDefault]);
+  var clear = react.useCallback(function (event, props) {
+    var shouldTriggerClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    setPressed(false);
+
+    if (preventClick && triggered) {
+      return;
+    }
 
     if (timeout.current !== null) {
       clearTimeout(timeout.current);
@@ -839,28 +983,39 @@ var useLongPress = function useLongPress() {
       }, 10);
     }
 
-    if (shouldTriggerClick && !longPressTriggered && onClick !== null) {
-      onClick();
+    if (shouldTriggerClick && !triggered && onClick !== null) {
+      onClick(props);
     }
 
-    setLongPressTriggered(false);
-  }, [shouldPreventDefault, onClick, longPressTriggered]);
+    onLongPressEnd(event, props, triggered);
+    setTriggered(false);
+  }, [shouldPreventDefault, onClick, onLongPressEnd, setPressed, triggered, preventClick]);
+
+  var bind = function bind() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    return {
+      onMouseDown: function onMouseDown(e) {
+        return start(e, props);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return start(e, props);
+      },
+      onMouseUp: function onMouseUp(e) {
+        return clear(e, props);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return clear(e, props, false);
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        return clear(e, props);
+      }
+    };
+  };
+
   return {
-    onMouseDown: function onMouseDown(e) {
-      return start(e);
-    },
-    onTouchStart: function onTouchStart(e) {
-      return start(e);
-    },
-    onMouseUp: function onMouseUp(e) {
-      return clear(e);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return clear(e, false);
-    },
-    onTouchEnd: function onTouchEnd(e) {
-      return clear(e);
-    }
+    bind: bind,
+    pressed: pressed,
+    triggered: triggered
   };
 };
 
@@ -2215,6 +2370,7 @@ exports.useActivityDetector = useActivityDetector;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDimensionObserver = useDimensionObserver;
 exports.useDocumentEvent = useDocumentEvent;
+exports.useDragProgress = useDragProgress;
 exports.useForm = useForm;
 exports.useFormTransition = useFormTransition;
 exports.useFormattedDate = useFormattedDate;
@@ -2239,6 +2395,7 @@ exports.useProgressSteps = useProgressSteps;
 exports.useResizeObserver = useResizeObserver;
 exports.useScreenSizeFromElement = useScreenSizeFromElement;
 exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
+exports.useSpringValue = useSpringValue;
 exports.useSwipe = useSwipe;
 exports.useThemeParser = useThemeParser;
 exports.useTrackEvent = useTrackEvent;

package/lib/index.js

@@ -604,7 +604,7 @@ var pageMetadata = PropTypes__default["default"].shape({
   microformats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({}))
 });
 var authorElement = PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string,
+  name: textElement,
   avatar: PropTypes__default["default"].shape({
     url: PropTypes__default["default"].string
   })

package/lib/utils.js

@@ -214,6 +214,94 @@ var createUseEvent = function createUseEvent(eventsManager) {
   };
 };
 
+/* eslint-disable */
+var easings = {
+  linear: function linear(x) {
+    return x;
+  },
+  easeInQuad: function easeInQuad(x) {
+    return x * x;
+  },
+  easeOutQuad: function easeOutQuad(x) {
+    return 1 - (1 - x) * (1 - x);
+  },
+  easeInOutQuad: function easeInOutQuad(x) {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+  },
+  easeInCubic: function easeInCubic(x) {
+    return x * x * x;
+  },
+  easeOutCubic: function easeOutCubic(x) {
+    return 1 - Math.pow(1 - x, 3);
+  },
+  easeInOutCubic: function easeInOutCubic(x) {
+    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+  },
+  easeInQuart: function easeInQuart(x) {
+    return x * x * x * x;
+  },
+  easeOutQuart: function easeOutQuart(x) {
+    return 1 - Math.pow(1 - x, 4);
+  },
+  easeInOutQuart: function easeInOutQuart(x) {
+    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+  },
+  easeInQuint: function easeInQuint(x) {
+    return x * x * x * x * x;
+  },
+  easeOutQuint: function easeOutQuint(x) {
+    return 1 - Math.pow(1 - x, 5);
+  },
+  easeInOutQuint: function easeInOutQuint(x) {
+    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
+  },
+  easeInSine: function easeInSine(x) {
+    return 1 - Math.cos(x * Math.PI / 2);
+  },
+  easeOutSine: function easeOutSine(x) {
+    return Math.sin(x * Math.PI / 2);
+  },
+  easeInOutSine: function easeInOutSine(x) {
+    return -(Math.cos(Math.PI * x) - 1) / 2;
+  },
+  easeInExpo: function easeInExpo(x) {
+    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
+  },
+  easeOutExpo: function easeOutExpo(x) {
+    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+  },
+  easeInOutExpo: function easeInOutExpo(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;
+  },
+  easeInCirc: function easeInCirc(x) {
+    return 1 - Math.sqrt(1 - Math.pow(x, 2));
+  },
+  easeOutCirc: function easeOutCirc(x) {
+    return Math.sqrt(1 - Math.pow(x - 1, 2));
+  },
+  easeInOutCirc: function easeInOutCirc(x) {
+    return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
+  },
+  easeInBack: function easeInBack(x) {
+    return c3 * x * x * x - c1 * x * x;
+  },
+  easeOutBack: function easeOutBack(x) {
+    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+  },
+  easeInOutBack: function easeInOutBack(x) {
+    return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+  },
+  easeInElastic: function easeInElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
+  },
+  easeOutElastic: function easeOutElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+  },
+  easeInOutElastic: function easeInOutElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+  }
+};
+
 var getColorAsString = function getColorAsString() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var overideAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -1036,6 +1124,7 @@ exports.convertStyleToString = convertStyleToString;
 exports.copyToClipboard = copyToClipboard;
 exports.createNullableOnChange = createNullableOnChange;
 exports.createUseEvent = createUseEvent;
+exports.easings = easings;
 exports.getColorAsString = getColorAsString;
 exports.getComponentFromName = getComponentFromName;
 exports.getContrastingColor = getContrastingColor;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.178",
+    "version": "0.3.180",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "135b87c1d061bd5f0ec90b71b80815d17113e21f"
+    "gitHead": "5f49e01759f3350db673329db30ca542b9d2fa6e"
 }

package/scss/_placeholders.scss

@@ -303,5 +303,36 @@
 %focus-outline {
     &:focus-visible {
         outline: 3px solid $purple;
+        outline-offset: 4px;
+    }
+}
+
+/**
+ * Work in progress:
+ * - trying to set up sensible defaults for animating UI elements
+ */
+%transition-bump {
+    transition: transform 0.3s $ease-in-bump;
+}
+%transition-bounce {
+    transition: transform 0.3s $ease-in-bounce;
+}
+%transition-kickback {
+    transition: transform 0.5s $ease-in-kickback;
+}
+
+%hover-bump {
+    @extend %transition-kickback;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
+
+%active-bump {
+    @extend %transition-bounce;
+
+    &:active {
+        transform: scale(0.95);
     }
 }

package/scss/_theme.scss

@@ -86,3 +86,14 @@ $btn-active-bg-shade-amount: 50% !default;
 $btn-active-bg-tint-amount: 50% !default;
 $btn-active-border-shade-amount: 50% !default;
 $btn-active-border-tint-amount: 25% !default;
+
+$ease-in-bounce: cubic-bezier(.075,1.5,.35,.95);
+$ease-in-out-bounce: cubic-bezier(.9,-0.5,.1,1.5);
+$ease-in-out-soft-sine: cubic-bezier(.4,0,.6,1);
+$ease-in-out-sine: cubic-bezier(.6,0,.4,1);
+$ease-in-out-hard-sine: cubic-bezier(.9,0,.1,1);
+$ease-in-ramp: cubic-bezier(.6,0,1,.5);
+$ease-out-ramp: cubic-bezier(0,.6,.5,1);
+$ease-in-kickback: cubic-bezier(.41,1.69,.04,.67);
+$ease-in-yo: cubic-bezier(.21,2.59,0,.9);
+$ease-in-bump: cubic-bezier(.4,1.69,0,1);