@startlibs/components 1.1.4 → 1.2.0-rc.1

package/lib-yak/Flip.mjs

@@ -0,0 +1,644 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _uniqueId from 'lodash/fp/uniqueId';
+import _max from 'lodash/fp/max';
+import _identity from 'lodash/fp/identity';
+import React, { useLayoutEffect } from 'react';
+import { animationTiming, oneWayAnimation, ifUndefined, callIfFunction, _s } from '@startlibs/utils';
+import { useHiddenFill, willUseSharedCallback, useConstant } from '@startlibs/core';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const getMargins = domNode => {
+  const {
+    marginTop,
+    marginLeft,
+    marginBottom,
+    marginRight,
+    paddingTop
+  } = window.getComputedStyle(domNode);
+  return {
+    marginTop,
+    marginLeft,
+    marginBottom,
+    marginRight,
+    paddingTop
+  };
+};
+const getParentProperties = parentNode => {
+  if (!parentNode) return {};
+  const {
+    marginTop,
+    marginLeft,
+    marginBottom,
+    marginRight,
+    paddingBottom,
+    paddingTop
+  } = window.getComputedStyle(parentNode);
+  return {
+    parentStyle: {
+      marginTop,
+      marginLeft,
+      marginBottom,
+      marginRight,
+      paddingBottom,
+      paddingTop
+    },
+    parentNode
+  };
+};
+const toPosition = function (domNode) {
+  let parentRect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : domNode.offsetParent ? domNode.offsetParent.getBoundingClientRect() : {
+    top: 0,
+    left: 0
+  };
+  let {
+    allowFixed,
+    finalPosition,
+    withMargins
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!allowFixed && domNode.style.position === 'fixed' || domNode.style.display === 'none') return;
+  const {
+    left,
+    top,
+    height,
+    width
+  } = domNode.getBoundingClientRect();
+  const margins = withMargins ? getMargins(domNode) : {};
+
+  // const {offsetLeft, offsetTop} = domNode
+  return _objectSpread(_objectSpread({
+    domNode,
+    nextSibling: domNode.nextSibling,
+    top: finalPosition ? domNode.offsetTop : top - parentRect.top,
+    left: finalPosition ? domNode.offsetLeft : left - parentRect.left,
+    height,
+    width
+  }, getParentProperties(domNode.parentNode)), margins);
+};
+const sumWithPx = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args.map(parseFloat).reduce((a, b) => a + b, 0) + 'px';
+};
+const childMAp = (childs, fn) => {
+  for (var c of childs) {
+    fn(c);
+  }
+};
+const defaultAnimationMaker = animationTiming('0.25s ease-out');
+const defaultEnterAnimation = oneWayAnimation('opacity: 0;', 'opacity: 1;');
+const defaultSwitchAnimation = oneWayAnimation(`opacity: 1;`, `opacity: 0;`, `opacity: 0;`);
+const SHORT_ANIMATIONS = {
+  fadeIn: defaultEnterAnimation
+};
+const applyDefault = k => SHORT_ANIMATIONS[k] || k;
+const formatAnimation = (animationName /* array or string or fn with array or string*/, animationTimer /* string or fn */, reverse) => {
+  const animationMaker = typeof animationTimer === 'string' ? k => k + ' ' + animationTimer : animationTimer;
+  const animationNameExecuted = typeof animationName === 'function' ? animationName() : animationName;
+  const keyframes = [].concat(typeof animationNameExecuted === 'string' ? animationNameExecuted.split(',') : animationNameExecuted);
+  const applyReverse = k => reverse ? k + ' reverse' : k;
+  return keyframes.map(k => applyReverse(k.trim().indexOf(' ') < 0 ? animationMaker(k) : applyDefault(k))).join(', ');
+};
+const cloneWrapper = element => {
+  const cloned = element.cloneNode(true);
+  const tempWrapper = document.createElement('div');
+  [].slice.call(cloned.childNodes).forEach(c => tempWrapper.append(c));
+  const {
+    display,
+    width,
+    height,
+    padding,
+    borderLeftWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderTopWidth
+  } = window.getComputedStyle(element);
+  Object.assign(tempWrapper.style, {
+    display,
+    width: sumWithPx(width, '-' + borderLeftWidth, '-' + borderRightWidth),
+    height: sumWithPx(height, '-' + borderBottomWidth, '-' + borderTopWidth),
+    padding,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  });
+  return tempWrapper;
+};
+const morphingEndEvents = new Map();
+const morphTime = new Map();
+const continueSwitchCallbacks = new Map();
+const continueSwitchOnClone = oldWrapper => newWrapper => {
+  const prevOldClone = oldWrapper.querySelector('.JS-old-snap');
+  const prevNewClone = oldWrapper.querySelector('.JS-new-snap');
+  const oldClone = newWrapper.querySelector('.JS-old-snap');
+  const newClone = newWrapper.querySelector('.JS-new-snap');
+  oldClone.style.animationDelay = getDelays(prevOldClone, oldClone.style.animation);
+  newClone.style.animationDelay = getDelays(prevNewClone, newClone.style.animation);
+  morphTime.set(oldClone, morphTime.get(prevOldClone));
+  morphTime.set(newClone, morphTime.get(prevNewClone));
+  oldClone.addEventListener('animationend', oldClone.remove);
+  newClone.addEventListener('animationend', finishSwitchNew(newClone, newWrapper));
+  continueSwitchCallbacks.delete(oldWrapper);
+  continueSwitchCallbacks.set(newWrapper, continueSwitchOnClone(newWrapper));
+};
+const finishSwitchNew = (clone, wrapper) => () => {
+  clone.remove();
+  const newChildren = [].slice.call(wrapper.children);
+  childMAp(newChildren, c => {
+    if (c.dataset) {
+      // Guard against stale "0" from a prior uncompleted cycle: always restore
+      // to empty when prev is "0" since "0" is never a legitimate captured value.
+      const prev = c.dataset.prevOpacity;
+      c.style.opacity = prev && prev !== '0' ? prev : '';
+    }
+  });
+  // wrapper.style.willChange = ''
+  continueSwitchCallbacks.delete(wrapper);
+};
+const supportsEvent = "onanimationend" in HTMLElement.prototype;
+const morph = (node, animation, callback) => {
+  if (!animation) {
+    return;
+  }
+  const [cachedAnimation, cachedCallback] = morphingEndEvents.get(node) || [];
+  const oldAnimation = cachedAnimation || node.style.animation;
+  morphTime.set(node, Date.now());
+  const didNotStartPromise = Promise.race([new Promise(res => node.addEventListener('animationstart', res)), new Promise((res, rej) => setTimeout(rej, supportsEvent ? 1000 : 200))]);
+  node.style.animation = animation;
+  if (!cachedCallback) {
+    const end = _ref => {
+      let {
+        target
+      } = _ref;
+      if (target !== node) return;
+      morphTime.delete(node);
+      morphingEndEvents.delete(node);
+      node.removeEventListener('animationend', end);
+      callback && callback();
+      node.style.animation = oldAnimation;
+    };
+    didNotStartPromise.catch(() => end({
+      target: node
+    }));
+    node.addEventListener('animationend', end);
+    morphingEndEvents.set(node, [oldAnimation, end]);
+  }
+};
+const hasClientRectChanged = (oldSnap, newSnap) => !['top', 'left', 'height', 'width'].every(_ => oldSnap[_] === newSnap[_]);
+const getClientRectAnimation = function (oldSnap, newSnap) {
+  let {
+    skipTransform,
+    smallJumpFix
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (oldSnap && newSnap && hasClientRectChanged(oldSnap, newSnap)) {
+    var _oldSnap$parentStyle, _newSnap$parentStyle, _oldSnap$parentStyle2, _newSnap$parentStyle2;
+    const node = newSnap.domNode;
+    const {
+      offsetLeft,
+      offsetTop,
+      scrollHeight,
+      clientHeight,
+      scrollWidth,
+      clientWidth
+    } = node;
+    const scrollTop = node.parentNode && node.parentNode.scrollTop || 0;
+    const scrollLeft = node.parentNode && node.parentNode.scrollLeft || 0;
+    const left = oldSnap.left - offsetLeft + scrollLeft;
+    const top = oldSnap.top - offsetTop + scrollTop;
+    const deltaHeight = oldSnap.height - newSnap.height;
+    let heightFix = '';
+    let finalPadding = '';
+    if (deltaHeight > 0) {
+      const {
+        paddingBottom
+      } = window.getComputedStyle(node);
+      finalPadding = 'padding-bottom:' + paddingBottom + ';';
+      heightFix = `padding-bottom: ${sumWithPx(deltaHeight, paddingBottom) + (smallJumpFix || 0)};`;
+    }
+    const overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? `overflow: hidden;` : ``;
+    const transform = (left !== 0 || top !== 0) && !skipTransform ? `transform: translate(${left}px,${top}px);` : '';
+    const parentPaddingTopDelta = (parseInt((_oldSnap$parentStyle = oldSnap.parentStyle) === null || _oldSnap$parentStyle === void 0 ? void 0 : _oldSnap$parentStyle.paddingTop) || 0) - (parseInt((_newSnap$parentStyle = newSnap.parentStyle) === null || _newSnap$parentStyle === void 0 ? void 0 : _newSnap$parentStyle.paddingTop) || 0);
+    const parentPaddingBottomDelta = (parseInt((_oldSnap$parentStyle2 = oldSnap.parentStyle) === null || _oldSnap$parentStyle2 === void 0 ? void 0 : _oldSnap$parentStyle2.paddingBottom) || 0) - (parseInt((_newSnap$parentStyle2 = newSnap.parentStyle) === null || _newSnap$parentStyle2 === void 0 ? void 0 : _newSnap$parentStyle2.paddingBottom) || 0);
+    const oldMarginTop = (parseInt(oldSnap.marginTop) || 0) + parentPaddingTopDelta;
+    const oldMarginBottom = (parseInt(oldSnap.marginBottom) || 0) + parentPaddingBottomDelta;
+    const oldTransform = node.style.transform;
+    return [oneWayAnimation(`
+        ${transform}
+        ${heightFix}
+        ${overflowFix}
+        margin-top: ${oldMarginTop}px;
+        margin-bottom: ${oldMarginBottom}px;
+        width: ${oldSnap.width}px;
+        height: ${Math.max(0, oldSnap.height + (smallJumpFix || 0))}px;
+        `, `
+        ${finalPadding}
+        ${oldTransform ? `transform:${oldTransform};` : ''}
+        ${overflowFix}
+        margin-top:${parseInt(newSnap.marginTop) || 0}px;
+        margin-bottom:${parseInt(newSnap.marginBottom) || 0}px;
+        width: ${newSnap.width}px;
+        height: ${Math.max(0, newSnap.height + (smallJumpFix || 0))}px;
+        `)];
+  } else {
+    return [];
+  }
+};
+const getClientRectAnimationForSwitch = function (oldSnap, newSnap) {
+  let {
+    skipTransform
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (hasClientRectChanged(oldSnap, newSnap)) {
+    var _node$parentNode, _node$parentNode2;
+    const node = newSnap.domNode;
+    const {
+      offsetLeft,
+      offsetTop,
+      scrollHeight,
+      clientHeight,
+      scrollWidth,
+      clientWidth
+    } = node;
+    const scrollTop = ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.scrollTop) || 0;
+    const scrollLeft = ((_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 ? void 0 : _node$parentNode2.scrollLeft) || 0;
+
+    // get margin-bottom
+    const prevBorder = node.style.border;
+    node.style.border = '1px solid transparent';
+    const borderHeight = node.clientHeight;
+    node.style.border = prevBorder;
+
+    // get negative margin top
+    const prevPadding = newSnap.paddingTop;
+    const nonPaddingFixTop = newSnap.clonedNode.getBoundingClientRect().top;
+    let topWithPaddingFix = nonPaddingFixTop;
+    if (!parseInt(prevPadding)) {
+      node.style.paddingTop = '1px';
+      topWithPaddingFix = newSnap.clonedNode.getBoundingClientRect().top;
+      node.style.paddingTop = '';
+    }
+    const newSnapNegativeTopMarginDelta = topWithPaddingFix - nonPaddingFixTop;
+    const newSnapBottomMarginDelta = clientHeight - borderHeight;
+    const left = oldSnap.left - offsetLeft + scrollLeft;
+    const top = oldSnap.top - offsetTop + scrollTop - newSnapNegativeTopMarginDelta;
+    const deltaHeight = oldSnap.height - newSnap.height;
+    let heightFix = '';
+    let finalPadding = '';
+    if (deltaHeight > 0) {
+      const {
+        paddingBottom
+      } = window.getComputedStyle(node);
+      finalPadding = 'padding-bottom:' + paddingBottom + ';';
+      heightFix = `padding-bottom: ${sumWithPx(deltaHeight, paddingBottom)};`;
+    }
+    const overflowFix = scrollHeight > clientHeight || scrollWidth > clientWidth ? `overflow: hidden;` : ``;
+    const transform = (left !== 0 || top !== 0) && !skipTransform ? `transform: translate(${left}px,${top}px);` : '';
+    const oldTransform = node.style.transform;
+    return [oneWayAnimation(`
+        ${transform}
+        ${heightFix}
+        ${overflowFix}
+        width: ${oldSnap.width}px;
+        height: ${oldSnap.height}px;
+        `, `
+        ${finalPadding}
+        ${oldTransform ? `transform:${oldTransform};` : ''}
+        ${overflowFix}
+        width: ${newSnap.width}px;
+        height: ${newSnap.height - newSnapBottomMarginDelta}px;
+        `)];
+  } else {
+    return [];
+  }
+};
+const willPlaySwitch = (oldSnap, newSnap, _ref2) => {
+  let {
+    switchIn,
+    switchOut,
+    switchAnimation,
+    timing,
+    transformHeight = _identity
+  } = _ref2;
+  const realWrapper = newSnap.domNode;
+  const newChildren = [].slice.call(realWrapper.children);
+  // realWrapper.style.willChange = 'width,height,margin-top;'
+  if (realWrapper.firstChild) {
+    realWrapper.insertBefore(oldSnap.clonedNode, realWrapper.firstChild);
+    realWrapper.insertBefore(newSnap.clonedNode, realWrapper.firstChild);
+  } else {
+    realWrapper.append(oldSnap.clonedNode);
+    realWrapper.append(newSnap.clonedNode);
+  }
+  oldSnap.clonedNode.className = oldSnap.clonedNode.className + ' JS-old-snap';
+  newSnap.clonedNode.className = newSnap.clonedNode.className + ' JS-new-snap';
+  // newSnap.clonedNode.style.willChange = 'width,height,opacity'
+  // oldSnap.clonedNode.style.willChange = 'width,height,opacity'
+  const realWrapperRect = realWrapper.getBoundingClientRect();
+  const resizeToNew = oneWayAnimation(`
+    overflow: hidden;
+    width: ${oldSnap.width}px;
+    height: ${oldSnap.height}px;
+    `, `
+    overflow: hidden;
+    width: ${newSnap.clonedNode.style.width};
+    height: ${callIfFunction(transformHeight, newSnap.clonedNode.style.height, realWrapperRect)};
+    `);
+  childMAp(newChildren, c => {
+    if (c.dataset && !c.dataset.noFlip) {
+      // Don't capture "0" as prevOpacity — it's always a transient value from
+      // a prior uncompleted willPlaySwitch. Otherwise finishSwitchNew restores
+      // opacity to "0" permanently, leaving content invisible.
+      if (c.style.opacity && c.style.opacity !== '0') {
+        c.dataset.prevOpacity = c.style.opacity;
+      }
+      c.style.opacity = '0';
+    }
+  });
+  childMAp([].slice.call(oldSnap.clonedNode.children), c => {
+    if (c.dataset && c.dataset.noFlip) {
+      c.style.opacity = '0';
+    }
+  });
+  const resizeOld = oldSnap.width > newSnap.width || oldSnap.height > newSnap.height ? [resizeToNew] : [resizeToNew];
+  const resizeNew = oldSnap.width < newSnap.width || oldSnap.height < newSnap.height ? [resizeToNew] : [resizeToNew];
+  return () => {
+    morph(oldSnap.clonedNode, formatAnimation([].concat(switchOut || switchAnimation, resizeOld), timing), () => oldSnap.clonedNode.remove());
+    newSnap.clonedNode.style.opacity = '0';
+    continueSwitchCallbacks.set(realWrapper, continueSwitchOnClone(realWrapper));
+    morph(newSnap.clonedNode, formatAnimation([formatAnimation(switchIn || switchAnimation, timing, !switchIn)].concat(resizeNew), timing), finishSwitchNew(newSnap.clonedNode, realWrapper));
+  };
+};
+const getDelays = (el, animation) => {
+  const delayStr = morphTime.get(el) - Date.now() + 'ms';
+  return animation.split(',').map(_ => delayStr).join(',');
+};
+class Snapshoter extends React.Component {
+  getSnapshotBeforeUpdate(oldProps) {
+    if (oldProps.on !== this.props.on) {
+      console.log('on', 'UHUL');
+    } else if (oldProps.moveOn !== this.props.moveOn) {
+      console.log('moveOn', 'UHUL');
+    }
+    return null;
+  }
+  render() {
+    return null;
+  }
+}
+const useFlip = _ref3 => {
+  let {
+    on,
+    moveOn
+  } = _ref3;
+  useHiddenFill(/*#__PURE__*/React.createElement(Snapshoter, {
+    on: on,
+    moveOn: moveOn,
+    callback: console.log
+  }));
+};
+const getAnimationNames = animation => animation.split(',').map(_ => _.replace(/\s*(\S+).*/, '$1'));
+const willUseFlip = () => {
+  let controlElement = null;
+  let morphEnabled = false;
+  const disableMorph = () => {
+    controlElement = null;
+    morphEnabled = false;
+  };
+  const [useRegisterEnter, enterChildrenCallback] = willUseSharedCallback(useLayoutEffect);
+  const [useRegisterLeave, leaveChildrenCallback] = willUseSharedCallback(useLayoutEffect);
+  const [useRegisterMorph, morphChildrenCallback, getSize] = willUseSharedCallback(useLayoutEffect);
+  const useEnterAnimation = function (ref) {
+    let onEnter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEnterAnimation;
+    let {
+      onEnterEnd,
+      timing = defaultAnimationMaker,
+      enterEffect
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    useLayoutEffect(() => {
+      if (!morphEnabled && onEnter && ref.current) {
+        const el = ref.current;
+        const animation = formatAnimation(onEnter, timing);
+        const endEffect = callIfFunction(enterEffect, el);
+        morph(el, animation, () => {
+          callIfFunction(onEnterEnd);
+          callIfFunction(endEffect, el);
+        });
+        enterChildrenCallback(timing);
+      }
+    }, [onEnter]);
+  };
+  const useLeaveAnimation = function (ref) {
+    let onLeave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultEnterAnimation;
+    let {
+      ref: removeRef,
+      leaveEffect,
+      timing = defaultAnimationMaker,
+      nestedFlip = false,
+      events = {},
+      reverse = true
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    useLayoutEffect(() => () => {
+      if (onLeave && ref.current) {
+        const el = ref.current;
+        const animation = formatAnimation(onLeave, timing, reverse);
+        // on leave animations require a clone, as the real node will be intantaneousy removed by react
+        leaveChildrenCallback(timing);
+        const isNested = callIfFunction(nestedFlip);
+        const clone = isNested ? el : el.cloneNode(true);
+        _s.each((callback, type) => clone.addEventListener(type, callback), events);
+        const endEffect = callIfFunction(leaveEffect, clone, el);
+        if (removeRef) {
+          removeRef.current = clone;
+        }
+        if (!isNested) {
+          el.parentNode.insertBefore(clone, el);
+        }
+        // sometimes the clone may need to trigger events (usual case: onmouseover to reopen the element)
+
+        // allow clone to be continued by another animation
+        controlElement = clone;
+        // the animation
+        const animate = () => {
+          morph(clone, animation, () => {
+            clone.remove();
+            disableMorph();
+            callIfFunction(endEffect, clone, el);
+          });
+        };
+
+        // wait for current animation to end and then animate
+        if (clone.style.animation) {
+          const maxAnimationTime = _max((clone.style.animationDuration.split(",") || ["0.25s"]).map(s => parseFloat(s.trim() || "0.25") * (s.indexOf("m") > 0 ? 1 : 1000)));
+          const timeoutRef = {};
+          const animationEnd = e => {
+            clearTimeout(timeoutRef.current || -1);
+            clone.removeEventListener('animationend', animationEnd);
+            clone.style.animationDelay = '';
+            e === null || e === void 0 || e.stopImmediatePropagation();
+            setTimeout(animate, 1);
+          };
+          timeoutRef.current = setTimeout(animationEnd, maxAnimationTime);
+          clone.addEventListener('animationend', animationEnd);
+          clone.style.animationDelay = getDelays(el, clone.style.animation);
+        } else {
+          animate();
+        }
+      }
+    }, [onLeave]);
+  };
+  const useMorphAnimation = function (ref) {
+    let ready = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    let {
+      timing = defaultAnimationMaker
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    useLayoutEffect(() => {
+      if (ready && controlElement && ref.current) {
+        // const controlElement =getControlElement()
+        const el = ref.current;
+        const animation = oneWayAnimation(`opacity:${window.getComputedStyle(controlElement).opacity};`, `opacity: 1`);
+        const oldSnap = _objectSpread(_objectSpread({}, toPosition(controlElement, undefined, {
+          allowFixed: true
+        })), {}, {
+          clonedNode: cloneWrapper(controlElement)
+        });
+        const newSnap = _objectSpread(_objectSpread({}, toPosition(el, undefined, {
+          allowFixed: true
+        })), {}, {
+          clonedNode: cloneWrapper(el)
+        });
+        const rectAnimation = getClientRectAnimation(oldSnap, newSnap);
+        morph(newSnap.domNode, formatAnimation(rectAnimation.concat(animation), timing), disableMorph);
+        morphChildrenCallback(executeAnimation => executeAnimation(timing));
+        if (rectAnimation.length) {
+          willPlaySwitch(oldSnap, newSnap, {
+            switchAnimation: defaultSwitchAnimation,
+            timing
+          })();
+        }
+        controlElement.remove();
+        disableMorph();
+      }
+      return () => {
+        morphEnabled = true;
+        // continue existing switch animation on the clone
+        if (continueSwitchCallbacks.has(ref.current)) {
+          continueSwitchCallbacks.get(ref.current)(controlElement);
+        }
+      };
+    }, [ready]);
+  };
+  const useNestedEnterAnimation = function (ref, onEnter) {
+    let {
+      timing
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    useRegisterEnter(parentTiming => {
+      const el = ref.current;
+      const animation = formatAnimation(onEnter, timing || parentTiming);
+      morph(el, animation);
+      return getAnimationNames(animation);
+    });
+  };
+  const useNestLeaveAnimation = function (ref, onLeave) {
+    let {
+      timing,
+      events
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    useRegisterLeave(parentTiming => {
+      const el = ref.current;
+      const animation = formatAnimation(onLeave, timing || parentTiming);
+      morph(el, animation);
+      return getAnimationNames(animation);
+    });
+  };
+  const willUseNestedMorphAnimation = () => {
+    const morphId = _uniqueId('JS-');
+    return ref => {
+      useLayoutEffect(() => {
+        var _ref$current;
+        if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.dataset) {
+          ref.current.dataset.morphId = morphId;
+        }
+      });
+      const executeAnimation = useConstant(timing => {
+        const prev = controlElement.querySelector(`[data-morph-id='${morphId}']`);
+        const next = ref.current;
+        if (next.dataset) {
+          next.dataset.noFlip = true;
+        }
+        next.style.opacity = '1';
+        const prevPos = prev.getBoundingClientRect();
+        const nextPos = next.getBoundingClientRect();
+        const originalTransform = next.style.transform || '';
+        const deltaX = Math.round(nextPos.left - prevPos.left);
+        const deltaY = Math.round(nextPos.top - prevPos.top);
+        const newLeft = deltaX > 0 ? -deltaX : -deltaX;
+        const animation = oneWayAnimation(`
+          transform: translate(${newLeft}px,${deltaY}px) ${originalTransform};
+        `, `
+          transform: translate(0,0) ${originalTransform};
+        `);
+        morph(next, formatAnimation(animation, timing));
+      });
+      useRegisterMorph(executeAnimation);
+    };
+  };
+  return [[useEnterAnimation, useLeaveAnimation, useMorphAnimation], [useNestedEnterAnimation, useNestLeaveAnimation], willUseNestedMorphAnimation];
+};
+const willUseFlipSwitch = () => {
+  let oldSnap = null;
+  const getTempWrapper = function (parent) {
+    let positionConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const tempWrapper = cloneWrapper(parent);
+    return _objectSpread(_objectSpread({}, toPosition(parent, undefined, positionConfig)), {}, {
+      clonedNode: tempWrapper
+    });
+  };
+  return function (ref, onEnter, onLeave) {
+    let {
+      timing = defaultAnimationMaker,
+      switchAnimation = defaultSwitchAnimation,
+      effect
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    useLayoutEffect(() => {
+      if (oldSnap && ref.current) {
+        const newSnap = getTempWrapper(ref.current, {
+          withMargins: true
+        });
+        let switchToPlay = _identity;
+        if (oldSnap.clonedNode) {
+          switchToPlay = willPlaySwitch(oldSnap, newSnap, {
+            switchIn: callIfFunction(onEnter),
+            switchOut: callIfFunction(onLeave),
+            switchAnimation: callIfFunction(switchAnimation),
+            timing
+          });
+        }
+        const animation = getClientRectAnimationForSwitch(oldSnap, newSnap);
+        const endEffect = callIfFunction(effect, oldSnap.clonedNode, newSnap.clonedNode, ref.current);
+        switchToPlay();
+        morph(newSnap.domNode, formatAnimation(animation, timing), () => callIfFunction(endEffect, oldSnap.clonedNode, newSnap.clonedNode));
+      }
+      return () => {
+        oldSnap = getTempWrapper(ref.current, {
+          withMargins: true
+        });
+      };
+    }, []);
+  };
+};
+const flipHooks = willUseFlip();
+const useFlipEnter = flipHooks[0][0];
+const useFlipLeave = flipHooks[0][1];
+const useFlipAnimation = function (ref, onEnterOrBoth) {
+  let onLeaveOrIgnore = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const onEnter = ifUndefined(onEnterOrBoth && onEnterOrBoth.onEnter, onEnterOrBoth);
+  const onLeave = ifUndefined(onEnterOrBoth && onEnterOrBoth.onLeave, onLeaveOrIgnore);
+  useFlipEnter(ref, onEnter, config);
+  useFlipLeave(ref, onLeave === true ? onEnter : onLeave, _objectSpread(_objectSpread({}, config), {}, {
+    reverse: onLeave === true
+  }));
+};
+
+export { defaultAnimationMaker, formatAnimation, getClientRectAnimation, morph, toPosition, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, willUseFlip, willUseFlipSwitch };
+//# sourceMappingURL=Flip.mjs.map