Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@measured/dnd

Package Overview
Dependencies
Maintainers
3
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@measured/dnd - npm Package Compare versions

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

1

dist/dnd.d.ts

@@ -224,2 +224,3 @@ import { Position } from 'css-box-model';

shouldRespectForcePress?: boolean;
disableSecondaryAnimation?: boolean;
}

@@ -226,0 +227,0 @@

5

package.json
{
"name": "@measured/dnd",
"version": "16.6.0-canary.ebfeb3d",
"version": "16.6.0-canary.eda7e8b",
"private": false,

@@ -78,2 +78,3 @@ "description": "Beautiful and accessible drag and drop for lists with React, with iframe and CSS transform support",

"css-box-model": "^1.2.1",
"lru-cache": "^10.2.0",
"memoize-one": "^6.0.0",

@@ -106,4 +107,4 @@ "raf-schd": "^4.0.3",

"@emotion/styled": "11.11.0",
"@jest/environment": "29.7.0",
"@measured/auto-frame-component": "0.1.0-canary.4686711",
"@jest/environment": "29.7.0",
"@release-it/conventional-changelog": "8.0.1",

@@ -110,0 +111,0 @@ "@rollup/plugin-babel": "6.0.4",

@@ -6,18 +6,26 @@ import { BoxModel, getBox } from 'css-box-model';

import { AutoScrollerOptions } from './auto-scroller-options-types';
import { Transform, getTransform } from '../../../view/transform';
const resetToOrigin = (box: BoxModel) => ({
width: box.marginBox.width,
height: box.marginBox.height,
top: 0,
left: 0,
right: box.marginBox.width,
bottom: box.marginBox.height,
center: {
x: box.marginBox.width / 2,
y: box.marginBox.height / 2,
},
x: 0,
y: 0,
});
const resetToOrigin = (box: BoxModel, transform: Transform | null) => {
const { scaleX = 1, scaleY = 1 } = transform?.matrix || {};
const width = box.marginBox.width / scaleX;
const height = box.marginBox.height / scaleY;
return {
width,
height,
top: 0,
left: 0,
right: width,
bottom: height,
center: {
x: width / 2,
y: height / 2,
},
x: 0,
y: 0,
};
};
/**

@@ -54,6 +62,7 @@ * Get the scroll for a draggable inside an iframe

const box = getBox(el);
const transform = getTransform(iframe);
const change = getScroll({
dragStartTime,
container: resetToOrigin(viewportBox), // Reset to origin because we don't care about position of the iframe
container: resetToOrigin(viewportBox, transform), // Reset to origin because we don't care about position of the iframe
subject: draggable.client.marginBox,

@@ -60,0 +69,0 @@ center: box.borderBox.center,

@@ -35,2 +35,3 @@ import type { BoxModel, Position } from 'css-box-model';

transform: Transform | null;
parents: DroppableDescriptor[];
}

@@ -48,2 +49,3 @@

transform,
parents,
}: Args): DroppableDimension => {

@@ -103,2 +105,3 @@ const frame: Scrollable | null = (() => {

transform,
parents,
};

@@ -105,0 +108,0 @@

@@ -78,2 +78,49 @@ import type { Position, Rect } from 'css-box-model';

/**
* normalizeFamilies
*
* Groups all items that share a common root `parent`, and selects the deepest item
* in that group that contains the center point of the dragged item to represent
* the "family".
*/
function normalizeFamilies(
pageBorderBox: Rect,
candidates: DroppableDimension[],
) {
const families = candidates.reduce<Record<string, DroppableDimension[][]>>(
(acc, candidate) => {
const familyName = candidate.parents[0]?.id || candidate.descriptor.id;
const family = acc[familyName] || [];
const generation = candidate.parents.length;
family[generation] = [...(family[generation] || []), candidate];
return {
...acc,
[familyName]: family,
};
},
{},
);
return Object.keys(families).map((familyName) => {
const family = families[familyName].flat();
const reversedFamily = [...family].reverse();
// Get first member of family that contains the draggable
const chosenMember = reversedFamily.find((member) => {
return (
pageBorderBox.center.x < member.page.borderBox.right &&
pageBorderBox.center.x > member.page.borderBox.left &&
pageBorderBox.center.y > member.page.borderBox.top &&
pageBorderBox.center.y < member.page.borderBox.bottom
);
});
return chosenMember || family[0];
});
}
export default function getDroppableOver({

@@ -150,3 +197,10 @@ pageBorderBox,

// Multiple options returned
// Select the best candidate from each group that share a common root ancestor
const normalizedCandidates = normalizeFamilies(pageBorderBox, candidates);
// All candidates were in the same family
if (normalizedCandidates.length === 1) {
return normalizedCandidates[0].descriptor.id;
}
// Should only occur with really large items

@@ -157,4 +211,4 @@ // Going to use fallback: distance from home

draggable,
candidates,
candidates: normalizedCandidates,
});
}

@@ -157,2 +157,3 @@ import type { BoxModel, Rect, Position } from 'css-box-model';

transform: Transform | null;
parents: DroppableDescriptor[];
}

@@ -159,0 +160,0 @@ export interface DraggableLocation {

@@ -257,5 +257,6 @@ import type { Position } from 'css-box-model';

combineTargetFor?: DraggableId | null,
disableSecondaryAnimation?: boolean,
): MapProps | null => {
return combineTargetFor
? getMemoizedProps(origin, combineTargetFor, true)
? getMemoizedProps(origin, combineTargetFor, !disableSecondaryAnimation)
: null;

@@ -271,2 +272,3 @@ };

sourceDroppable?: DroppableDimension | null,
disableSecondaryAnimation?: boolean,
): MapProps | null => {

@@ -285,3 +287,3 @@ const visualDisplacement: Displacement | null =

if (!isAfterCriticalInVirtualList) {
return getFallback(combineTargetFor);
return getFallback(combineTargetFor, disableSecondaryAnimation);
}

@@ -306,3 +308,3 @@

combineTargetFor,
true,
!disableSecondaryAnimation,
dimension,

@@ -325,3 +327,3 @@ sourceDroppable,

combineTargetFor,
visualDisplacement.shouldAnimate,
disableSecondaryAnimation ? false : visualDisplacement.shouldAnimate,
dimension,

@@ -356,2 +358,3 @@ sourceDroppable,

sourceDroppable,
ownProps.disableSecondaryAnimation,
);

@@ -380,2 +383,3 @@ }

sourceDroppable,
ownProps.disableSecondaryAnimation,
);

@@ -397,7 +401,24 @@ }

const selector = (state: State, ownProps: OwnProps): MapProps =>
draggingSelector(state, ownProps) ||
secondarySelector(state, ownProps) ||
atRest;
const selector = (state: State, ownProps: OwnProps): MapProps => {
// Modify atRest based on props
const atRestLocal =
atRest.mapped.type === 'DRAGGING'
? atRest
: {
...atRest,
mapped: {
...atRest.mapped,
shouldAnimateDisplacement: ownProps.disableSecondaryAnimation
? false
: atRest.mapped.shouldAnimateDisplacement,
},
};
return (
draggingSelector(state, ownProps) ||
secondarySelector(state, ownProps) ||
atRestLocal
);
};
return selector;

@@ -404,0 +425,0 @@ };

@@ -171,2 +171,3 @@ import type { Position } from 'css-box-model';

shouldRespectForcePress?: boolean;
disableSecondaryAnimation?: boolean;
}

@@ -173,0 +174,0 @@

@@ -49,3 +49,3 @@ import { querySelectorAll } from '../../query-selector-all';

window.document,
'iframe',
'[data-rfd-iframe]',
) as HTMLIFrameElement[];

@@ -52,0 +52,0 @@

@@ -0,1 +1,2 @@

import { LRUCache } from 'lru-cache';
import type { DraggableId, ContextId } from '../../types';

@@ -7,2 +8,7 @@ import { dragHandle as dragHandleAttr } from '../data-attributes';

const dragHandleCache = new LRUCache<string, HTMLElement>({
max: 5000,
ttl: 1000,
});
export default function findDragHandle(

@@ -15,2 +21,8 @@ contextId: ContextId,

const cachedHandle = dragHandleCache.get(selector);
if (cachedHandle) {
return cachedHandle;
}
const possible = querySelectorAllIframe(selector);

@@ -41,3 +53,5 @@

dragHandleCache.set(selector, handle);
return handle;
}

@@ -0,1 +1,9 @@

import { LRUCache } from 'lru-cache';
import { querySelectorAll } from '../../query-selector-all';
const iframeCache = new LRUCache<string, HTMLIFrameElement[]>({
max: 1,
ttl: 1000,
});
/**

@@ -6,12 +14,22 @@ * querySelectorAllIframe

*/
export default function querySelectorAllIframe(selector: string) {
let iframes = iframeCache.get('iframes');
import { querySelectorAll } from '../../query-selector-all';
if (!iframes) {
iframes = querySelectorAll(document, 'iframe') as HTMLIFrameElement[];
export default function querySelectorAllIframe(selector: string) {
const iframes = querySelectorAll(document, 'iframe') as HTMLIFrameElement[];
// Quicker than running the [data-rbd-frame] query
iframes = iframes.filter((iframe) =>
iframe.hasAttribute('data-rfd-iframe'),
);
iframeCache.set('iframes', iframes);
}
const iframePossible = iframes.reduce<HTMLElement[]>(
(acc, iframe) => [
...acc,
...querySelectorAll(iframe.contentWindow!.document, selector),
...(iframe.contentWindow?.document
? querySelectorAll(iframe.contentWindow.document, selector)
: []),
],

@@ -18,0 +36,0 @@ [],

@@ -17,2 +17,3 @@ import { getBox, withScroll, createBox, expand } from 'css-box-model';

import { Offset } from '../iframe/offset-types';
import { prefix } from '../data-attributes';

@@ -100,2 +101,33 @@ const getClient = (

const getParents = (ref: HTMLElement) => {
const contextId = ref.getAttribute(`${prefix}-droppable-context-id`);
const parentDescriptors: DroppableDescriptor[] = [];
if (!contextId) return [];
let currentEl: HTMLElement | null | undefined = ref;
while (currentEl) {
currentEl = currentEl.parentElement?.closest(
`[${prefix}-droppable-context-id="${contextId}"]`,
);
const id = currentEl?.getAttribute(`${prefix}-droppable-id`);
if (id) {
parentDescriptors.push({
id,
mode: 'standard',
type: 'DEFAULT',
});
}
}
// Parents need reversing
parentDescriptors.reverse();
return parentDescriptors;
};
export default ({

@@ -137,2 +169,4 @@ ref,

const parents = getParents(ref);
const dimension: DroppableDimension = getDroppableDimension({

@@ -148,2 +182,3 @@ descriptor,

transform,
parents,
});

@@ -150,0 +185,0 @@

@@ -68,3 +68,5 @@ import memoizeOne from 'memoize-one';

querySelectorAll(document, `[${prefix}-iframe]`) as HTMLIFrameElement[]
).map((iframe) => getHead(iframe.contentWindow!.document)),
)
.filter((iframe) => iframe.contentWindow?.document)
.map((iframe) => getHead(iframe.contentWindow!.document)),
];

@@ -71,0 +73,0 @@

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc