@measured/dnd - npm Package Compare versions

Comparing version 16.6.0-canary.d4e2c53 to 16.6.0-canary.ebfeb3d

package.json

 {
   "name": "@measured/dnd",
-  "version": "16.6.0-canary.d4e2c53",
+  "version": "16.6.0-canary.ebfeb3d",
   "private": false,
-  "description": "Beautiful and accessible drag and drop for lists with React",
-  "author": "Alex Reardon <[e-mail]>",
+  "description": "Beautiful and accessible drag and drop for lists with React, with iframe and CSS transform support",
+  "author": "Measured Corporation Ltd <[e-mail]>",
   "maintainers": [
-    "Gabriel Santerre <[e-mail]>",
-    "Reece Carolan <[e-mail]>"
+    "Measured Corporation Ltd <[e-mail]>"
   ],
@@ -25,6 +24,6 @@ "keywords": [
     "type": "git",
-    "url": "https://github.com/hello-pangea/dnd.git"
+    "url": "https://github.com/measuredco/dnd.git"
   },
   "bugs": {
-    "url": "https://github.com/hello-pangea/dnd/issues"
+    "url": "https://github.com/measuredco/dnd/issues"
   },
@@ -31,0 +30,0 @@ "main": "dist/dnd.cjs.js",

src/state/auto-scroller/fluid-scroller/index.ts

@@ -11,3 +11,3 @@ import rafSchd from 'raf-schd';
 export interface PublicArgs {
-  scrollWindow: (change: Position) => void;
+  scrollWindow: (change: Position, win?: Window) => void;
   scrollDroppable: (id: DroppableId, change: Position) => void;
@@ -14,0 +14,0 @@ getAutoScrollerOptions?: () => AutoScrollerOptions;

src/state/auto-scroller/fluid-scroller/scroll.ts

@@ -14,2 +14,3 @@ import type { Position, Rect } from 'css-box-model';
 import { AutoScrollerOptions } from './auto-scroller-options-types';
+import getIframeScroll from './get-iframe-scroll';
 
@@ -20,3 +21,3 @@ interface Args {
   shouldUseTimeDampening: boolean;
-  scrollWindow: (scroll: Position) => void;
+  scrollWindow: (scroll: Position, win?: Window) => void;
   scrollDroppable: (id: DroppableId, scroll: Position) => void;
@@ -56,2 +57,16 @@ getAutoScrollerOptions: () => AutoScrollerOptions;
 
+  const iframeScroll = getIframeScroll({
+    state,
+    dragStartTime,
+    shouldUseTimeDampening,
+    getAutoScrollerOptions,
+    draggable,
+  });
+
+  if (iframeScroll?.change) {
+    scrollWindow(iframeScroll.change, iframeScroll.window);
+
+    return;
+  }
+
   const droppable: DroppableDimension | null = getBestScrollableDroppable({
@@ -58,0 +73,0 @@ center,

src/state/dimension-marshal/get-initial-publish.ts

@@ -34,3 +34,3 @@ import type { Position } from 'css-box-model';
   timings.start(timingKey);
-  const viewport: Viewport = getViewport(critical);
+  const viewport: Viewport = getViewport();
   const windowScroll: Position = viewport.scroll.current;
@@ -37,0 +37,0 @@

src/state/droppable/get-droppable.ts

@@ -14,2 +14,3 @@ import type { BoxModel, Position } from 'css-box-model';
 import getSubject from './util/get-subject';
+import { Transform } from '../../view/transform';
 
@@ -34,2 +35,3 @@ export interface Closest {
   closest?: Closest | null;
+  transform: Transform | null;
 }
@@ -46,2 +48,3 @@
   closest,
+  transform,
 }: Args): DroppableDimension => {
@@ -100,2 +103,3 @@ const frame: Scrollable | null = (() => {
     subject,
+    transform,
   };
@@ -102,0 +106,0 @@

src/state/get-frame.ts

@@ -8,4 +8,3 @@ import { invariant } from '../invariant';
   invariant(frame, 'Expected Droppable to have a frame');
-
   return frame;
 };

src/state/move-in-direction/move-cross-axis/index.ts

@@ -1,2 +0,2 @@
-import { type Position } from 'css-box-model';
+import type { Position } from 'css-box-model';
 import type { PublicResult } from '../move-in-direction-types';
@@ -3,0 +3,0 @@ import type {

src/state/move-in-direction/move-to-next-place/index.ts

@@ -18,3 +18,3 @@ import type { Position } from 'css-box-model';
 import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center';
-import { add, subtract } from '../../position';
+import { subtract } from '../../position';
 import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location';
@@ -107,3 +107,2 @@
     });
-
     return {
@@ -128,2 +127,3 @@ clientSelection,
   });
+
   return {
@@ -130,0 +130,0 @@ clientSelection: previousClientSelection,

src/state/reducer.ts

@@ -382,4 +382,2 @@ import type { Position } from 'css-box-model';
 
-    console.log('result', result);
-
     // cannot move in that direction
@@ -386,0 +384,0 @@ if (!result) {

src/types.ts

 import type { BoxModel, Rect, Position } from 'css-box-model';
+import { Transform } from './view/transform';
 
@@ -100,2 +101,4 @@ export type Id = string;
   displaceBy: Position;
+  // Any transforms applied to this draggable
+  transform: Transform | null;
 }
@@ -154,2 +157,3 @@
   subject: DroppableSubject;
+  transform: Transform | null;
 }
@@ -310,3 +314,2 @@ export interface DraggableLocation {
   scroll: ScrollDetails;
-  offset: Rect;
 }
@@ -313,0 +316,0 @@

src/view/draggable/connected-draggable.ts

@@ -23,2 +23,3 @@ import type { Position } from 'css-box-model';
   Combine,
+  DroppableDimension,
 } from '../../types';
@@ -218,2 +219,3 @@ import type {
     snapshot: getSecondarySnapshot(null),
+    sourceDroppable: null,
   },
@@ -238,2 +240,4 @@ };
       shouldAnimateDisplacement: boolean,
+      dimension?: DraggableDimension,
+      sourceDroppable?: DroppableDimension | null,
     ): MapProps => ({
@@ -246,2 +250,4 @@ mapped: {
         snapshot: getMemoizedSnapshot(combineTargetFor),
+        dimension,
+        sourceDroppable: sourceDroppable || null,
       },
@@ -266,2 +272,4 @@ }),
     afterCritical: LiftEffect,
+    dimension?: DraggableDimension,
+    sourceDroppable?: DroppableDimension | null,
   ): MapProps | null => {
@@ -297,3 +305,9 @@ const visualDisplacement: Displacement | null =
       const offset: Position = memoizedOffset(change.x, change.y);
-      return getMemoizedProps(offset, combineTargetFor, true);
+      return getMemoizedProps(
+        offset,
+        combineTargetFor,
+        true,
+        dimension,
+        sourceDroppable,
+      );
     }
@@ -314,2 +328,4 @@
       visualDisplacement.shouldAnimate,
+      dimension,
+      sourceDroppable,
     );
@@ -329,2 +345,8 @@ };
 
+      const dimension = state.dimensions.draggables[ownProps.draggableId];
+
+      const sourceDroppable = state.critical.droppable.id
+        ? state.dimensions.droppables[state.critical.droppable.id]
+        : null;
+
       return getProps(
@@ -335,2 +357,4 @@ ownProps.draggableId,
         state.afterCritical,
+        dimension,
+        sourceDroppable,
       );
@@ -346,2 +370,8 @@ }
       }
+      const dimension = state.dimensions.draggables[ownProps.draggableId];
+
+      const sourceDroppable = completed.critical.droppable.id
+        ? state.dimensions.droppables[completed.critical.droppable.id]
+        : null;
+
       return getProps(
@@ -352,2 +382,4 @@ ownProps.draggableId,
         completed.afterCritical,
+        dimension,
+        sourceDroppable,
       );
@@ -354,0 +386,0 @@ }

src/view/draggable/draggable-types.ts

@@ -16,2 +16,3 @@ import type { Position } from 'css-box-model';
   DraggableRubric,
+  DroppableDimension,
 } from '../../types';
@@ -143,2 +144,4 @@ import { dropAnimationFinished } from '../../state/action-creators';
   snapshot: DraggableStateSnapshot;
+  dimension?: DraggableDimension;
+  sourceDroppable: DroppableDimension | null;
 }
@@ -145,0 +148,0 @@

src/view/draggable/get-style.ts

@@ -62,5 +62,10 @@ import type { BoxModel } from 'css-box-model';
 
+  const untransformedOffset = {
+    x: offset.x / (dimension?.transform?.matrix.scaleX || 1),
+    y: offset.y / (dimension?.transform?.matrix.scaleY || 1),
+  };
+
   const transform: string | undefined = isDropAnimating
-    ? transforms.drop(offset, isCombining)
-    : transforms.moveTo(offset);
+    ? transforms.drop(untransformedOffset, isCombining)
+    : transforms.moveTo(untransformedOffset);
 
@@ -71,4 +76,4 @@ const style: DraggingStyle = {
     // As we are applying the margins we need to align to the start of the marginBox
-    top: box.marginBox.top,
-    left: box.marginBox.left,
+    top: box.marginBox.top / (dimension.transform?.matrix.scaleX || 1),
+    left: box.marginBox.left / (dimension.transform?.matrix.scaleY || 1),
 
@@ -78,4 +83,4 @@ // ## Sizing
     boxSizing: 'border-box',
-    width: box.borderBox.width,
-    height: box.borderBox.height,
+    width: box.borderBox.width / (dimension.transform?.matrix.scaleX || 1),
+    height: box.borderBox.height / (dimension.transform?.matrix.scaleY || 1),
 
@@ -100,4 +105,9 @@ // ## Movement
 function getSecondaryStyle(secondary: SecondaryMapProps): NotDraggingStyle {
+  const { offset, sourceDroppable } = secondary;
+
   return {
-    transform: transforms.moveTo(secondary.offset),
+    transform: transforms.moveTo({
+      x: offset.x / (sourceDroppable?.transform?.matrix.scaleX || 1),
+      y: offset.y / (sourceDroppable?.transform?.matrix.scaleY || 1),
+    }),
     // transition style is applied in the head
@@ -104,0 +114,0 @@ transition: secondary.shouldAnimateDisplacement ? undefined : 'none',

src/view/event-bindings/bind-events.ts

@@ -1,2 +0,1 @@
-import { IframeHTMLAttributes } from 'react';
 import { querySelectorAll } from '../../query-selector-all';
@@ -21,2 +20,22 @@ import type {
 
+let loaded = false;
+
+function bindEvent(win: Window, binding: EventBinding, options: EventOptions) {
+  let timer: number | undefined;
+
+  if (!loaded) {
+    // Some browsers require us to defer binding events, i.e. Safari
+    timer = setInterval(() => {
+      if ((win as Window).document.readyState === 'complete') {
+        win.addEventListener(binding.eventName, binding.fn, options);
+        loaded = true;
+      }
+    }, 100);
+  } else {
+    win.addEventListener(binding.eventName, binding.fn, options);
+  }
+
+  return timer;
+}
+
 export default function bindEvents(
@@ -41,5 +60,6 @@ el: HTMLElement | Window,
 
-        win.addEventListener(binding.eventName, binding.fn, options);
+        const timer = bindEvent(win as Window, binding, options);
 
         return function unbind() {
+          clearInterval(timer);
           win.removeEventListener(binding.eventName, binding.fn, options);
@@ -46,0 +66,0 @@ };

src/view/iframe/apply-offset.ts

@@ -1,2 +0,2 @@
-import { Rect } from 'css-box-model';
+import { BoxModel, Rect } from 'css-box-model';
 import { Offset } from './offset-types';
@@ -21,1 +21,11 @@
 }
+
+export const applyOffsetBox = (box: BoxModel, offset: Offset): BoxModel => {
+  return {
+    ...box,
+    borderBox: applyOffset(box.borderBox, offset),
+    marginBox: applyOffset(box.marginBox, offset),
+    paddingBox: applyOffset(box.paddingBox, offset),
+    contentBox: applyOffset(box.contentBox, offset),
+  };
+};

src/view/iframe/get-iframe-offset.ts

@@ -0,1 +1,2 @@
+import getIframe from './get-iframe';
 import { Offset } from './offset-types';
@@ -11,7 +12,5 @@
 
-  const refWindow = el.ownerDocument.defaultView;
+  const iframe = getIframe(el);
 
-  if (refWindow && refWindow.self !== refWindow.parent) {
-    const iframe = refWindow.frameElement as HTMLIFrameElement;
-
+  if (iframe) {
     const rect = iframe.getBoundingClientRect();
@@ -18,0 +17,0 @@

src/view/use-draggable-publisher/get-dimension.ts

 import { calculateBox, withScroll } from 'css-box-model';
-import type { BoxModel, Position } from 'css-box-model';
+import type { Position } from 'css-box-model';
 import type {
@@ -10,3 +10,4 @@ DraggableDescriptor,
 import getIframeOffset from '../iframe/get-iframe-offset';
-import applyOffset from '../iframe/apply-offset';
+import { applyTransformBox, getTransform } from '../transform';
+import { applyOffsetBox } from '../iframe/apply-offset';
 
@@ -20,18 +21,27 @@ export default function getDimension(
 
-  const offset = getIframeOffset(el);
-
-  const client: BoxModel = calculateBox(
+  const originalClient = calculateBox(
     el.getBoundingClientRect(),
     computedStyles,
   );
-  const page: BoxModel = withScroll(
-    calculateBox(
-      applyOffset(el.getBoundingClientRect(), offset),
-      computedStyles,
-    ),
+  let client = { ...originalClient };
+  let page = withScroll(
+    calculateBox(el.getBoundingClientRect(), computedStyles),
     windowScroll,
   );
 
+  const transform = getTransform(el, { x: 0, y: 0 });
+
+  if (transform) {
+    client = applyTransformBox(client, transform);
+    page = applyTransformBox(page, transform);
+  }
+
+  const iframeOffset = getIframeOffset(el);
+
+  if (iframeOffset) {
+    page = applyOffsetBox(page, iframeOffset);
+  }
+
   const placeholder: Placeholder = {
-    client,
+    client: originalClient,
     tagName: el.tagName.toLowerCase(),
@@ -51,2 +61,3 @@ display: computedStyles.display,
     page,
+    transform,
   };
@@ -53,0 +64,0 @@

src/view/use-droppable-publisher/get-dimension.ts

@@ -13,3 +13,6 @@ import { getBox, withScroll, createBox, expand } from 'css-box-model';
 import getScroll from './get-scroll';
-import getOffsettedBox from '../iframe/get-offsetted-box';
+import getIframeOffset from '../iframe/get-iframe-offset';
+import { applyOffsetBox } from '../iframe/apply-offset';
+import { Transform, applyTransformBox, getTransform } from '../transform';
+import { Offset } from '../iframe/offset-types';
 
@@ -19,5 +22,15 @@ const getClient = (
   closestScrollable?: Element | null,
+  offset?: Offset | null,
+  transform?: Transform | null,
 ): BoxModel => {
-  const base: BoxModel = getOffsettedBox(targetRef);
+  let base: BoxModel = getBox(targetRef);
 
+  if (transform) {
+    base = applyTransformBox(base, transform);
+  }
+
+  if (offset) {
+    base = applyOffsetBox(base, offset);
+  }
+
   // Droppable has no scroll parent
@@ -85,2 +98,3 @@ if (!closestScrollable) {
   shouldClipSubject: boolean;
+  transform: Transform | null;
 }
@@ -99,3 +113,5 @@
   const closestScrollable: Element | null = env.closestScrollable;
-  const client: BoxModel = getClient(ref, closestScrollable);
+  const offset = getIframeOffset(ref);
+  const transform = getTransform(ref, { x: 0, y: 0 });
+  const client: BoxModel = getClient(ref, closestScrollable, offset, transform);
   const page: BoxModel = withScroll(client, windowScroll);
@@ -132,2 +148,3 @@
     closest,
+    transform,
   });
@@ -134,0 +151,0 @@

src/view/use-droppable-publisher/get-scroll.ts

 import type { Position } from 'css-box-model';
+import { getTransform } from '../transform';
 
@@ -7,5 +8,10 @@ export default (el: Element): Position => {
   if (isIframe) {
-    const targetEl = (el as HTMLIFrameElement).contentWindow!;
+    const win = (el as HTMLIFrameElement).contentWindow!;
 
-    return { x: targetEl.scrollX, y: targetEl.scrollY };
+    const transform = getTransform(el as HTMLElement);
+
+    return {
+      x: win.scrollX * (transform?.matrix.scaleX || 1),
+      y: win.scrollY * (transform?.matrix.scaleY || 1),
+    };
   }
@@ -12,0 +18,0 @@

src/view/use-droppable-publisher/use-droppable-publisher.ts

@@ -7,3 +7,3 @@ import { useRef } from 'react';
 import { invariant } from '../../invariant';
-import checkForNestedScrollContainers from './check-for-nested-scroll-container';
+// import checkForNestedScrollContainers from './check-for-nested-scroll-container';
 import * as dataAttr from '../data-attributes';
@@ -173,5 +173,5 @@ import { origin } from '../../state/position';
         // print a debug warning if using an unsupported nested scroll container setup
-        if (process.env.NODE_ENV !== 'production') {
-          checkForNestedScrollContainers(scrollable);
-        }
+        // if (process.env.NODE_ENV !== 'production') {
+        //   checkForNestedScrollContainers(scrollable);
+        // }
       }
@@ -178,0 +178,0 @@

src/view/use-sensor-marshal/sensors/util/offset-point.ts

 import { Position } from 'css-box-model';
+import { applyTransformPoint, getTransform } from '../../../transform';
 
-export default function offsetPoint(x: number, y: number, win: Window) {
-  // const { clientX, clientY } = event;
-
-  // const win = event.currentTarget as Window;
-
+export default function offsetPoint(
+  x: number,
+  y: number,
+  win: Window,
+): Position {
   let offsetX = 0;
@@ -15,4 +16,22 @@ let offsetY = 0;
 
+    const transform = getTransform(iframe);
+
     offsetX = rect.left;
     offsetY = rect.top;
+
+    if (transform) {
+      const { x: transformedX, y: transformedY } = applyTransformPoint(
+        x,
+        y,
+        transform.matrix,
+        transform.origin,
+      );
+
+      const point: Position = {
+        x: transformedX + offsetX,
+        y: transformedY + offsetY,
+      };
+
+      return point;
+    }
   }
@@ -19,0 +38,0 @@

src/view/use-style-marshal/use-style-marshal.ts

@@ -1,2 +0,1 @@
-import { useRef, MutableRefObject } from 'react';
 import memoizeOne from 'memoize-one';
@@ -11,6 +10,7 @@ import { useMemo, useCallback } from 'use-memo-one';
 import useLayoutEffect from '../use-isomorphic-layout-effect';
+import { querySelectorAll } from '../../query-selector-all';
+import querySelectorAllIframe from '../iframe/query-selector-all-iframe';
 
-const getHead = (): HTMLHeadElement => {
-  const head: HTMLHeadElement | null = document.querySelector('head');
-  invariant(head, 'Cannot find the head to append a style to');
+const getHead = (doc: Document): HTMLHeadElement | null => {
+  const head: HTMLHeadElement | null = doc.querySelector('head');
   return head;
@@ -28,6 +28,7 @@ };
 
+const alwaysDataAttr = `${prefix}-always`;
+const dynamicDataAttr = `${prefix}-dynamic`;
+
 export default function useStyleMarshal(contextId: ContextId, nonce?: string) {
   const styles: Styles = useMemo(() => getStyles(contextId), [contextId]);
-  const alwaysRef = useRef<HTMLStyleElement | null>(null);
-  const dynamicRef = useRef<HTMLStyleElement | null>(null);
 
@@ -38,51 +39,83 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
     memoizeOne((proposed: string) => {
-      const el: HTMLStyleElement | null = dynamicRef.current;
-      invariant(el, 'Cannot set dynamic style element if it is not set');
-      el.textContent = proposed;
+      const selector = `[${dynamicDataAttr}="${contextId}"]`;
+
+      querySelectorAllIframe(selector).forEach((el) => {
+        invariant(el, 'Cannot set dynamic style element if it is not set');
+        el.textContent = proposed;
+      });
     }),
-    [],
+    [contextId],
   );
 
-  const setAlwaysStyle = useCallback((proposed: string) => {
-    const el: HTMLStyleElement | null = alwaysRef.current;
-    invariant(el, 'Cannot set dynamic style element if it is not set');
-    el.textContent = proposed;
-  }, []);
+  const setAlwaysStyle = useCallback(
+    (proposed: string) => {
+      const selector = `[${alwaysDataAttr}="${contextId}"]`;
 
+      querySelectorAllIframe(selector).forEach((el) => {
+        invariant(el, 'Cannot set dynamic style element if it is not set');
+        el.textContent = proposed;
+      });
+    },
+    [contextId],
+  );
+
   // using layout effect as programatic dragging might start straight away (such as for cypress)
   useLayoutEffect(() => {
-    invariant(
-      !alwaysRef.current && !dynamicRef.current,
-      'style elements already mounted',
-    );
+    const alwaysSelector = `[${alwaysDataAttr}="${contextId}"]`;
+    const dynamicSelector = `[${dynamicDataAttr}="${contextId}"]`;
 
-    const always: HTMLStyleElement = createStyleEl(nonce);
-    const dynamic: HTMLStyleElement = createStyleEl(nonce);
+    const heads = [
+      getHead(document),
+      ...(
+        querySelectorAll(document, `[${prefix}-iframe]`) as HTMLIFrameElement[]
+      ).map((iframe) => getHead(iframe.contentWindow!.document)),
+    ];
 
-    // store their refs
-    alwaysRef.current = always;
-    dynamicRef.current = dynamic;
+    // Create initial style elements
+    heads.forEach((head) => {
+      if (!head) return;
 
-    // for easy identification
-    always.setAttribute(`${prefix}-always`, contextId);
-    dynamic.setAttribute(`${prefix}-dynamic`, contextId);
+      const alwaysElements = querySelectorAll(
+        head.ownerDocument,
+        alwaysSelector,
+      );
+      const dynamicElements = querySelectorAll(
+        head.ownerDocument,
+        dynamicSelector,
+      );
 
-    // add style tags to head
-    getHead().appendChild(always);
-    getHead().appendChild(dynamic);
+      if (
+        alwaysElements.length >= heads.length ||
+        dynamicElements.length >= heads.length
+      ) {
+        return;
+      }
 
-    // set initial style
-    setAlwaysStyle(styles.always);
-    setDynamicStyle(styles.resting);
+      const always: HTMLStyleElement = createStyleEl(nonce);
+      const dynamic: HTMLStyleElement = createStyleEl(nonce);
 
+      // for easy identification
+      always.setAttribute(alwaysDataAttr, contextId);
+      dynamic.setAttribute(dynamicDataAttr, contextId);
+
+      head.appendChild(always);
+      head.appendChild(dynamic);
+
+      // set initial style
+      setAlwaysStyle(styles.always);
+      setDynamicStyle(styles.resting);
+    });
+
     return () => {
-      const remove = (ref: MutableRefObject<HTMLStyleElement | null>) => {
-        const current: HTMLStyleElement | null = ref.current;
-        invariant(current, 'Cannot unmount ref as it is not set');
-        getHead().removeChild(current);
-        ref.current = null;
+      const remove = (selector: string) => {
+        const elements = querySelectorAllIframe(selector);
+
+        elements.forEach((el) => {
+          invariant(el, 'Cannot unmount element as it is not set');
+          el.ownerDocument.head.removeChild(el);
+        });
       };
 
-      remove(alwaysRef);
-      remove(dynamicRef);
+      remove(alwaysSelector);
+      remove(dynamicSelector);
     };
@@ -113,6 +146,2 @@ }, [
   const resting = useCallback(() => {
-    // Can be called defensively
-    if (!dynamicRef.current) {
-      return;
-    }
     setDynamicStyle(styles.resting);
@@ -119,0 +148,0 @@ }, [setDynamicStyle, styles.resting]);

src/view/window/get-viewport.ts

 import { getRect } from 'css-box-model';
 import type { Rect, Position } from 'css-box-model';
-import type { Critical, Viewport } from '../../types';
+import type { Viewport } from '../../types';
 import { origin } from '../../state/position';
@@ -8,8 +8,4 @@ import getWindowScroll from './get-window-scroll';
 import getDocumentElement from '../get-document-element';
-import getIframeOffset from '../iframe/get-iframe-offset';
-import querySelectorAllIframe from '../iframe/query-selector-all-iframe';
-import { prefix } from '../data-attributes';
-import applyOffset from '../iframe/apply-offset';
 
-export default (critical?: Critical): Viewport => {
+export default (): Viewport => {
   const scroll: Position = getWindowScroll();
@@ -40,9 +36,2 @@ const maxScroll: Position = getMaxWindowScroll();
 
-  const droppables = querySelectorAllIframe(
-    `[${prefix}-droppable-id="${critical?.droppable.id}"]`,
-  );
-
-  const offset = getIframeOffset(droppables[0]);
-  const offsetFrame = applyOffset(frame, offset);
-
   const viewport: Viewport = {
@@ -59,3 +48,2 @@ frame,
     },
-    offset: offsetFrame,
   };
@@ -62,0 +50,0 @@

src/view/window/scroll-window.ts

 import type { Position } from 'css-box-model';
 
-// Not guarenteed to scroll by the entire amount
-export default (change: Position): void => {
-  window.scrollBy(change.x, change.y);
+// Not guaranteed to scroll by the entire amount
+export default (change: Position, win: Window = window): void => {
+  win.scrollBy(change.x, change.y);
 };

No alert changes

Improved metrics

Total package byte prevSize

1349423

increased by2.32%

Number of package files

253

increased by0.8%

Lines of code

39885

increased by2.57%

Number of low supply chain risk alerts

270

decreased by-2.88%

No dependency changes