@moda/om 19.2.0 → 19.3.0

package/dist/index.esm.js

@@ -1047,7 +1047,7 @@ function _objectSpread2(e) {
   }
   return e;
 }
-function _toPrimitive$1(t, r) {
+function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -1057,8 +1057,8 @@ function _toPrimitive$1(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-function _toPropertyKey$1(t) {
-  var i = _toPrimitive$1(t, "string");
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : String(i);
 }
 function _typeof$1(o) {
@@ -1071,7 +1071,7 @@ function _typeof$1(o) {
   }, _typeof$1(o);
 }
 function _defineProperty$1(obj, key, value) {
-  key = _toPropertyKey$1(key);
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -1388,41 +1388,70 @@ var States = function States(_ref) {
   }));
 };
 
-var _assign = function __assign() {
-  _assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign$b = function() {
+  __assign$b = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
   };
-  return _assign.apply(this, arguments);
+  return __assign$b.apply(this, arguments);
 };
+
 function __rest$a(s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
   return t;
 }
 
 /** @deprecated */
 function __spreadArrays() {
   for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
+  for (var r = Array(s), k = 0, i = 0; i < il; i++)
+      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+          r[k] = a[j];
   return r;
 }
+
 function __spreadArray(to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 }
 
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 var zeroRightClassName = 'right-scroll-bar-position';
 var fullWidthClassName = 'width-before-scroll-bar';
 var noScrollbarsClassName = 'with-scroll-bars-hidden';
@@ -1495,6 +1524,7 @@ function useCallbackRef(initialValue, callback) {
   return ref.facade;
 }
 
+var currentValues = new WeakMap();
 /**
  * Merges two or more refs together providing a single interface to set their value
  * @param {RefObject|Ref} refs
@@ -1510,11 +1540,32 @@ function useCallbackRef(initialValue, callback) {
  * }
  */
 function useMergeRefs(refs, defaultValue) {
-  return useCallbackRef(defaultValue || null, function (newValue) {
+  var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {
     return refs.forEach(function (ref) {
       return assignRef(ref, newValue);
     });
   });
+  // handle refs changes - added or removed
+  React.useLayoutEffect(function () {
+    var oldValue = currentValues.get(callbackRef);
+    if (oldValue) {
+      var prevRefs_1 = new Set(oldValue);
+      var nextRefs_1 = new Set(refs);
+      var current_1 = callbackRef.current;
+      prevRefs_1.forEach(function (ref) {
+        if (!nextRefs_1.has(ref)) {
+          assignRef(ref, null);
+        }
+      });
+      nextRefs_1.forEach(function (ref) {
+        if (!prevRefs_1.has(ref)) {
+          assignRef(ref, current_1);
+        }
+      });
+    }
+    currentValues.set(callbackRef, refs);
+  }, [refs]);
+  return callbackRef;
 }
 
 function ItoI(a) {
@@ -1605,7 +1656,7 @@ function createSidecarMedium(options) {
     options = {};
   }
   var medium = innerCreateMedium(null);
-  medium.options = _assign({
+  medium.options = __assign$b({
     async: true,
     ssr: false
   }, options);
@@ -1622,7 +1673,7 @@ var SideCar$1 = function SideCar(_a) {
   if (!Target) {
     throw new Error('Sidecar medium not found');
   }
-  return /*#__PURE__*/React.createElement(Target, _assign({}, rest));
+  return /*#__PURE__*/React.createElement(Target, __assign$b({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -1663,7 +1714,7 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     rest = __rest$a(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
   var SideCar = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
-  var containerProps = _assign(_assign({}, rest), callbacks);
+  var containerProps = __assign$b(__assign$b({}, rest), callbacks);
   return /*#__PURE__*/React.createElement(React.Fragment, null, enabled && ( /*#__PURE__*/React.createElement(SideCar, {
     sideCar: effectCar$1,
     removeScrollBar: removeScrollBar,
@@ -1674,9 +1725,9 @@ var RemoveScroll = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     allowPinchZoom: !!allowPinchZoom,
     lockRef: ref,
     gapMode: gapMode
-  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), _assign(_assign({}, containerProps), {
+  })), forwardProps ? ( /*#__PURE__*/React.cloneElement(React.Children.only(children), __assign$b(__assign$b({}, containerProps), {
     ref: containerRef
-  }))) : ( /*#__PURE__*/React.createElement(Container, _assign({}, containerProps, {
+  }))) : ( /*#__PURE__*/React.createElement(Container, __assign$b({}, containerProps, {
     className: className,
     ref: containerRef
   }), children)));
@@ -2982,7 +3033,7 @@ var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parent
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/
   // nearest focus guard
   React.createElement("div", {
     key: "guard-first",
@@ -3066,14 +3117,7 @@ FocusLock.defaultProps = {
 var FocusLockUI = FocusLock;
 
 function deferAction(action) {
-  // Hidding setImmediate from Webpack to avoid inserting polyfill
-  var _window = window,
-    setImmediate = _window.setImmediate;
-  if (typeof setImmediate !== 'undefined') {
-    setImmediate(action);
-  } else {
-    setTimeout(action, 1);
-  }
+  setTimeout(action, 1);
 }
 
 var effectCar = createSidecarMedium();
@@ -3112,7 +3156,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var onActivation = lockProps.onActivation,
     onDeactivation = lockProps.onDeactivation,
     restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
-  var appliedLockProps = _assign(_assign({}, restProps), {
+  var appliedLockProps = __assign$b(__assign$b({}, restProps), {
     as: as,
     style: style,
     sideCar: sideCar,
@@ -3137,7 +3181,7 @@ var FocusOn$1 = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
     lockProps: appliedLockProps,
     focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
     as: RemoveScroll
-  }, children), enabled && ( /*#__PURE__*/React.createElement(SideCar, _assign({}, rest, {
+  }, children), enabled && ( /*#__PURE__*/React.createElement(SideCar, __assign$b({}, rest, {
     sideCar: effectCar,
     setLockProps: setLockProps,
     shards: shards
@@ -3158,34 +3202,34 @@ function _inheritsLoose(subClass, superClass) {
   _setPrototypeOf(subClass, superClass);
 }
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -3450,17 +3494,29 @@ var filterAutoFocusable = function filterAutoFocusable(nodes, cache) {
   });
 };
 /**
- * only tabbable ones
- * (but with guards which would be ignored)
+ * !__WARNING__! Low level API.
+ * @returns all tabbable nodes
+ *
+ * @see {@link getFocusableNodes} to get any focusable element
+ *
+ * @param topNodes - array of top level HTMLElements to search inside
+ * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
  */
 var getTabbableNodes = function getTabbableNodes(topNodes, visibilityCache, withGuards) {
   return orderByTabIndex(filterFocusable(getFocusables(topNodes, withGuards), visibilityCache), true, withGuards);
 };
 /**
- * actually anything "focusable", not only tabbable
- * (without guards, as long as they are not expected to be focused)
+ * !__WARNING__! Low level API.
+ *
+ * @returns anything "focusable", not only tabbable. The difference is in `tabIndex=-1`
+ * (without guards, as long as they are not expected to be ever focused)
+ *
+ * @see {@link getTabbableNodes} to get only tabble nodes element
+ *
+ * @param topNodes - array of top level HTMLElements to search inside
+ * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
  */
-var getAllTabbableNodes = function getAllTabbableNodes(topNodes, visibilityCache) {
+var getFocusableNodes = function getFocusableNodes(topNodes, visibilityCache) {
   return orderByTabIndex(filterFocusable(getFocusables(topNodes), visibilityCache), false);
 };
 /**
@@ -3532,8 +3588,8 @@ var getTopParent = function getTopParent(node) {
 };
 /**
  * returns all "focus containers" inside a given node
- * @param node
- * @returns {T}
+ * @param node - node or nodes to look inside
+ * @returns Element[]
  */
 var getAllAffectedNodes = function getAllAffectedNodes(node) {
   var nodes = asArray(node);
@@ -3555,6 +3611,10 @@ var safeProbe = function safeProbe(cb) {
 /**
  * returns active element from document or from nested shadowdoms
  */
+/**
+ * returns current active element. If the active element is a "container" itself(shadowRoot or iframe) returns active element inside it
+ * @param [inDocument]
+ */
 var getActiveElement = function getActiveElement(inDocument) {
   if (inDocument === void 0) {
     inDocument = document;
@@ -3577,7 +3637,8 @@ var focusInsideIframe = function focusInsideIframe(topNode, activeElement) {
   }));
 };
 /**
- * @returns {Boolean} true, if the current focus is inside given node or nodes
+ * @returns {Boolean} true, if the current focus is inside given node or nodes.
+ * Supports nodes hidden inside shadowDom
  */
 var focusInside = function focusInside(topNode, activeElement) {
   // const activeElement = document && getActiveElement();
@@ -3593,8 +3654,11 @@ var focusInside = function focusInside(topNode, activeElement) {
 };
 
 /**
- * focus is hidden FROM the focus-lock
+ * checks if focus is hidden FROM the focus-lock
  * ie contained inside a node focus-lock shall ignore
+ *
+ * This is a utility function coupled with {@link FOCUS_ALLOW} constant
+ *
  * @returns {boolean} focus is currently is in "allow" area
  */
 var focusIsHidden = function focusIsHidden(inDocument) {
@@ -3819,16 +3883,21 @@ var reorderNodes = function reorderNodes(srcNodes, dstNodes) {
   }).filter(isDefined);
 };
 /**
- * given top node(s) and the last active element return the element to be focused next
+ * contains the main logic of the `focus-lock` package.
+ *
+ * ! you probably dont need this function !
+ *
+ * given top node(s) and the last active element returns the element to be focused next
+ * @returns element which should be focused to move focus inside
  * @param topNode
  * @param lastNode
  */
-var getFocusMerge = function getFocusMerge(topNode, lastNode) {
+var focusSolver = function focusSolver(topNode, lastNode) {
   var activeElement = getActiveElement(asArray(topNode).length > 0 ? document : getFirst(topNode).ownerDocument);
   var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
   var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);
   var visibilityCache = new Map();
-  var anyFocusable = getAllTabbableNodes(entries, visibilityCache);
+  var anyFocusable = getFocusableNodes(entries, visibilityCache);
   var innerElements = getTabbableNodes(entries, visibilityCache).filter(function (_a) {
     var node = _a.node;
     return isNotAGuard(node);
@@ -3839,7 +3908,7 @@ var getFocusMerge = function getFocusMerge(topNode, lastNode) {
       return undefined;
     }
   }
-  var outerNodes = getAllTabbableNodes([commonParent], visibilityCache).map(function (_a) {
+  var outerNodes = getFocusableNodes([commonParent], visibilityCache).map(function (_a) {
     var node = _a.node;
     return node;
   });
@@ -3867,10 +3936,10 @@ var getFocusMerge = function getFocusMerge(topNode, lastNode) {
 };
 
 /**
- * return list of focusable elements inside a given top node
- * @deprecated use {@link getFocusableIn}. Yep, there is typo in the function name
+ * @returns list of focusable elements inside a given top node
+ * @see {@link getFocusableNodes} for lower level access
  */
-var getFocusabledIn = function getFocusabledIn(topNode) {
+var expandFocusableNodes = function expandFocusableNodes(topNode) {
   var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
   var commonParent = getTopCommonParent(topNode, topNode, entries);
   var visibilityCache = new Map();
@@ -3902,26 +3971,34 @@ var focusOn = function focusOn(target, focusOptions) {
     target.contentWindow.focus();
   }
 };
+
 var guardCount = 0;
 var lockDisabled = false;
 /**
- * Sets focus at a given node. The last focused element will help to determine which element(first or last) should be focused.
+ * The main functionality of the focus-lock package
+ *
+ * Contains focus at a given node.
+ * The last focused element will help to determine which element(first or last) should be focused.
+ * The found element will be focused.
+ *
+ * This is one time action (move), not a persistent focus-lock
+ *
  * HTML markers (see {@link import('./constants').FOCUS_AUTO} constants) can control autofocus
- * @param topNode
- * @param lastNode
- * @param options
+ * @see {@link focusSolver} for the same functionality without autofocus
  */
-var setFocus = function setFocus(topNode, lastNode, options) {
+var moveFocusInside = function moveFocusInside(topNode, lastNode, options) {
   if (options === void 0) {
     options = {};
   }
-  var focusable = getFocusMerge(topNode, lastNode);
+  var focusable = focusSolver(topNode, lastNode);
+  // global local side effect to countain recursive lock activation and resolve focus-fighting
   if (lockDisabled) {
     return;
   }
   if (focusable) {
+    /** +FOCUS-FIGHTING prevention **/
     if (guardCount > 2) {
-      // tslint:disable-next-line:no-console
+      // we have recursive entered back the lock activation
       console.error('FocusLock: focus-fighting detected. Only one focus management system could be active. ' + 'See https://github.com/theKashey/focus-lock/#focus-fighting');
       lockDisabled = true;
       setTimeout(function () {
@@ -4034,7 +4111,7 @@ var activateTrap = function activateTrap() {
               }
               document.body.focus();
             } else {
-              result = setFocus(workingArea, lastActiveFocus, {
+              result = moveFocusInside(workingArea, lastActiveFocus, {
                 focusOptions: focusOptions
               });
               lastPortaledElement = {};
@@ -4046,7 +4123,7 @@ var activateTrap = function activateTrap() {
       }
       if (document) {
         var newActiveElement = document && document.activeElement;
-        var allNodes = getFocusabledIn(workingArea);
+        var allNodes = expandFocusableNodes(workingArea);
         var focusedIndex = allNodes.map(function (_ref) {
           var node = _ref.node;
           return node;
@@ -4096,9 +4173,9 @@ process.env.NODE_ENV !== "production" ? {
 var onWindowBlur = function onWindowBlur() {
   focusWasOutsideWindow = 'just'; // using setTimeout to set  this variable after React/sidecar reaction
 
-  setTimeout(function () {
+  deferAction(function () {
     focusWasOutsideWindow = 'meanwhile';
-  }, 0);
+  });
 };
 var attachHandler = function attachHandler() {
   document.addEventListener('focusin', onTrap);
@@ -4152,7 +4229,7 @@ mediumFocus.assignSyncMedium(onFocus);
 mediumBlur.assignMedium(onBlur);
 mediumEffect.assignMedium(function (cb) {
   return cb({
-    moveFocusInside: setFocus,
+    moveFocusInside: moveFocusInside,
     focusInside: focusInside
   });
 });
@@ -4429,15 +4506,20 @@ var handleScroll = function handleScroll(axis, endTarget, event, sourceDelta, no
         availableScrollTop += position;
       }
     }
-    target = target.parentNode;
+    if (target instanceof ShadowRoot) {
+      target = target.host;
+    } else {
+      target = target.parentNode;
+    }
   } while (
   // portaled content
   !targetInLock && target !== document.body ||
   // self content
   targetInLock && (endTarget.contains(target) || endTarget === target));
-  if (isDeltaPositive && (noOverscroll && availableScroll === 0 || !noOverscroll && delta > availableScroll)) {
+  // handle epsilon around 0 (non standard zoom levels)
+  if (isDeltaPositive && (noOverscroll && Math.abs(availableScroll) < 1 || !noOverscroll && delta > availableScroll)) {
     shouldCancelScroll = true;
-  } else if (!isDeltaPositive && (noOverscroll && availableScrollTop === 0 || !noOverscroll && -delta > availableScrollTop)) {
+  } else if (!isDeltaPositive && (noOverscroll && Math.abs(availableScrollTop) < 1 || !noOverscroll && -delta > availableScrollTop)) {
     shouldCancelScroll = true;
   }
   return shouldCancelScroll;
@@ -4532,7 +4614,7 @@ function RemoveScrollSideCar(props) {
     }
     var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
     var sourceEvent = shouldPreventQueue.current.filter(function (e) {
-      return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta);
+      return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta);
     })[0];
     // self event, and should be canceled
     if (sourceEvent && sourceEvent.should) {
@@ -4559,7 +4641,8 @@ function RemoveScrollSideCar(props) {
       name: name,
       delta: delta,
       target: target,
-      should: should
+      should: should,
+      shadowParent: getOutermostShadowParent(target)
     };
     shouldPreventQueue.current.push(event);
     setTimeout(function () {
@@ -4605,6 +4688,17 @@ function RemoveScrollSideCar(props) {
     gapMode: props.gapMode
   }) : null);
 }
+function getOutermostShadowParent(node) {
+  var shadowParent = null;
+  while (node !== null) {
+    if (node instanceof ShadowRoot) {
+      shadowParent = node.host;
+      node = node.host;
+    }
+    node = node.parentNode;
+  }
+  return shadowParent;
+}
 
 exportSidecar(effectCar$1, RemoveScrollSideCar);
 
@@ -4858,10 +4952,10 @@ function Effect(_a) {
 var SideCar = exportSidecar(effectCar, Effect);
 
 var RequireSideCar = function RequireSideCar(props) {
-  return /*#__PURE__*/React.createElement(SideCar, _assign({}, props));
+  return /*#__PURE__*/React.createElement(SideCar, __assign$b({}, props));
 };
 var FocusOn = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FocusOn$1, _assign({}, props, {
+  return /*#__PURE__*/React.createElement(FocusOn$1, __assign$b({}, props, {
     ref: ref,
     sideCar: RequireSideCar
   }));
@@ -9736,8 +9830,8 @@ var t = function t(_t) {
   },
   n = function n(t, _n) {
     if (t.clientHeight < t.scrollHeight || t.clientWidth < t.scrollWidth) {
-      var _l = getComputedStyle(t, null);
-      return e$1(_l.overflowY, _n) || e$1(_l.overflowX, _n) || function (t) {
+      var _o = getComputedStyle(t, null);
+      return e$1(_o.overflowY, _n) || e$1(_o.overflowX, _n) || function (t) {
         var e = function (t) {
           if (!t.ownerDocument || !t.ownerDocument.defaultView) return null;
           try {
@@ -9751,84 +9845,97 @@ var t = function t(_t) {
     }
     return !1;
   },
-  l = function l(t, e, n, _l2, i, o, r, d) {
-    return o < t && r > e || o > t && r < e ? 0 : o <= t && d <= n || r >= e && d >= n ? o - t - _l2 : r > e && d < n || o < t && d > n ? r - e + i : 0;
+  o$1 = function o(t, e, n, _o2, l, r, i, s) {
+    return r < t && i > e || r > t && i < e ? 0 : r <= t && s <= n || i >= e && s >= n ? r - t - _o2 : i > e && s < n || r < t && s > n ? i - e + l : 0;
   },
-  i = function i(t) {
+  l = function l(t) {
     var e = t.parentElement;
     return null == e ? t.getRootNode().host || null : e;
   },
-  o$1 = function o(e, _o2) {
-    var r, d, h, f;
+  r = function r(e, _r2) {
+    var i, s, d, h;
     if ("undefined" == typeof document) return [];
-    var u = _o2.scrollMode,
-      s = _o2.block,
-      c = _o2.inline,
-      a = _o2.boundary,
-      g = _o2.skipOverflowHiddenElements,
-      m = "function" == typeof a ? a : function (t) {
+    var c = _r2.scrollMode,
+      f = _r2.block,
+      u = _r2.inline,
+      a = _r2.boundary,
+      g = _r2.skipOverflowHiddenElements,
+      p = "function" == typeof a ? a : function (t) {
         return t !== a;
       };
     if (!t(e)) throw new TypeError("Invalid target");
-    var p = document.scrollingElement || document.documentElement,
-      w = [],
-      W = e;
-    for (; t(W) && m(W);) {
-      if (W = i(W), W === p) {
+    var m = document.scrollingElement || document.documentElement,
+      w = [];
+    var W = e;
+    for (; t(W) && p(W);) {
+      if (W = l(W), W === m) {
         w.push(W);
         break;
       }
       null != W && W === document.body && n(W) && !n(document.documentElement) || null != W && n(W, g) && w.push(W);
     }
-    var H = null != (d = null == (r = window.visualViewport) ? void 0 : r.width) ? d : innerWidth,
-      b = null != (f = null == (h = window.visualViewport) ? void 0 : h.height) ? f : innerHeight,
+    var b = null != (s = null == (i = window.visualViewport) ? void 0 : i.width) ? s : innerWidth,
+      H = null != (h = null == (d = window.visualViewport) ? void 0 : d.height) ? h : innerHeight,
       _window = window,
-      v = _window.scrollX,
-      y = _window.scrollY,
+      y = _window.scrollX,
+      M = _window.scrollY,
       _e$getBoundingClientR = e.getBoundingClientRect(),
-      E = _e$getBoundingClientR.height,
-      M = _e$getBoundingClientR.width,
+      v = _e$getBoundingClientR.height,
+      E = _e$getBoundingClientR.width,
       x = _e$getBoundingClientR.top,
-      I = _e$getBoundingClientR.right,
-      C = _e$getBoundingClientR.bottom,
+      C = _e$getBoundingClientR.right,
+      I = _e$getBoundingClientR.bottom,
       R = _e$getBoundingClientR.left,
-      T = "start" === s || "nearest" === s ? x : "end" === s ? C : x + E / 2,
-      V = "center" === c ? R + M / 2 : "end" === c ? I : R,
-      k = [];
+      _ref = function (t) {
+        var e = window.getComputedStyle(t);
+        return {
+          top: parseFloat(e.scrollMarginTop) || 0,
+          right: parseFloat(e.scrollMarginRight) || 0,
+          bottom: parseFloat(e.scrollMarginBottom) || 0,
+          left: parseFloat(e.scrollMarginLeft) || 0
+        };
+      }(e),
+      T = _ref.top,
+      B = _ref.right,
+      F = _ref.bottom,
+      V = _ref.left;
+    var k = "start" === f || "nearest" === f ? x - T : "end" === f ? I + F : x + v / 2 - T + F,
+      D = "center" === u ? R + E / 2 - V + B : "end" === u ? C + B : R - V;
+    var L = [];
     for (var _t2 = 0; _t2 < w.length; _t2++) {
       var _e2 = w[_t2],
         _e$getBoundingClientR2 = _e2.getBoundingClientRect(),
         _n2 = _e$getBoundingClientR2.height,
-        _i = _e$getBoundingClientR2.width,
-        _o = _e$getBoundingClientR2.top,
-        _r = _e$getBoundingClientR2.right,
-        _d = _e$getBoundingClientR2.bottom,
-        _h = _e$getBoundingClientR2.left;
-      if ("if-needed" === u && x >= 0 && R >= 0 && C <= b && I <= H && x >= _o && C <= _d && R >= _h && I <= _r) return k;
-      var _f = getComputedStyle(_e2),
-        _a = parseInt(_f.borderLeftWidth, 10),
-        _g = parseInt(_f.borderTopWidth, 10),
-        _m = parseInt(_f.borderRightWidth, 10),
-        _W = parseInt(_f.borderBottomWidth, 10),
-        B = 0,
-        D = 0,
-        L = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _a - _m : 0,
-        S = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _g - _W : 0,
-        X = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _i / _e2.offsetWidth : 0,
-        Y = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _n2 / _e2.offsetHeight : 0;
-      if (p === _e2) B = "start" === s ? T : "end" === s ? T - b : "nearest" === s ? l(y, y + b, b, _g, _W, y + T, y + T + E, E) : T - b / 2, D = "start" === c ? V : "center" === c ? V - H / 2 : "end" === c ? V - H : l(v, v + H, H, _a, _m, v + V, v + V + M, M), B = Math.max(0, B + y), D = Math.max(0, D + v);else {
-        B = "start" === s ? T - _o - _g : "end" === s ? T - _d + _W + S : "nearest" === s ? l(_o, _d, _n2, _g, _W + S, T, T + E, E) : T - (_o + _n2 / 2) + S / 2, D = "start" === c ? V - _h - _a : "center" === c ? V - (_h + _i / 2) + L / 2 : "end" === c ? V - _r + _m + L : l(_h, _r, _i, _a, _m + L, V, V + M, M);
+        _l = _e$getBoundingClientR2.width,
+        _r = _e$getBoundingClientR2.top,
+        _i = _e$getBoundingClientR2.right,
+        _s = _e$getBoundingClientR2.bottom,
+        _d = _e$getBoundingClientR2.left;
+      if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && x >= _r && I <= _s && R >= _d && C <= _i) return L;
+      var _h = getComputedStyle(_e2),
+        _a = parseInt(_h.borderLeftWidth, 10),
+        _g = parseInt(_h.borderTopWidth, 10),
+        _p = parseInt(_h.borderRightWidth, 10),
+        _W = parseInt(_h.borderBottomWidth, 10);
+      var _T = 0,
+        _B = 0;
+      var _F = "offsetWidth" in _e2 ? _e2.offsetWidth - _e2.clientWidth - _a - _p : 0,
+        _V = "offsetHeight" in _e2 ? _e2.offsetHeight - _e2.clientHeight - _g - _W : 0,
+        S = "offsetWidth" in _e2 ? 0 === _e2.offsetWidth ? 0 : _l / _e2.offsetWidth : 0,
+        X = "offsetHeight" in _e2 ? 0 === _e2.offsetHeight ? 0 : _n2 / _e2.offsetHeight : 0;
+      if (m === _e2) _T = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o$1(M, M + H, H, _g, _W, M + k, M + k + v, v) : k - H / 2, _B = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o$1(y, y + b, b, _a, _p, y + D, y + D + E, E), _T = Math.max(0, _T + M), _B = Math.max(0, _B + y);else {
+        _T = "start" === f ? k - _r - _g : "end" === f ? k - _s + _W + _V : "nearest" === f ? o$1(_r, _s, _n2, _g, _W + _V, k, k + v, v) : k - (_r + _n2 / 2) + _V / 2, _B = "start" === u ? D - _d - _a : "center" === u ? D - (_d + _l / 2) + _F / 2 : "end" === u ? D - _i + _p + _F : o$1(_d, _i, _l, _a, _p + _F, D, D + E, E);
         var _t3 = _e2.scrollLeft,
-          _f2 = _e2.scrollTop;
-        B = Math.max(0, Math.min(_f2 + B / Y, _e2.scrollHeight - _n2 / Y + S)), D = Math.max(0, Math.min(_t3 + D / X, _e2.scrollWidth - _i / X + L)), T += _f2 - B, V += _t3 - D;
+          _h2 = _e2.scrollTop;
+        _T = 0 === X ? 0 : Math.max(0, Math.min(_h2 + _T / X, _e2.scrollHeight - _n2 / X + _V)), _B = 0 === S ? 0 : Math.max(0, Math.min(_t3 + _B / S, _e2.scrollWidth - _l / S + _F)), k += _h2 - _T, D += _t3 - _B;
       }
-      k.push({
+      L.push({
         el: _e2,
-        top: B,
-        left: D
+        top: _T,
+        left: _B
       });
     }
-    return k;
+    return L;
   };
 
 var o = function o(t) {
@@ -9842,7 +9949,7 @@ var o = function o(t) {
     inline: "nearest"
   };
 };
-function e(e, r) {
+function e(e, r$1) {
   if (!e.isConnected || !function (t) {
     var o = t;
     for (; o && o.parentNode;) {
@@ -9862,9 +9969,9 @@ function e(e, r) {
   }(e);
   if (function (t) {
     return "object" == _typeof$1(t) && "function" == typeof t.behavior;
-  }(r)) return r.behavior(o$1(e, r));
-  var l = "boolean" == typeof r || null == r ? void 0 : r.behavior;
-  var _iterator = _createForOfIteratorHelper(o$1(e, o(r))),
+  }(r$1)) return r$1.behavior(r(e, r$1));
+  var l = "boolean" == typeof r$1 || null == r$1 ? void 0 : r$1.behavior;
+  var _iterator = _createForOfIteratorHelper(r(e, o(r$1))),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {