{"version":3,"sources":["../../lib/Draggable.tsx","../../lib/utils/shims.ts","../../lib/utils/getPrefix.ts","../../lib/utils/domFns.ts","../../lib/utils/positionFns.ts","../../lib/DraggableCore.tsx","../../lib/utils/log.ts"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport { clsx } from 'clsx';\nimport {createCSSTransform, createSVGTransform} from './utils/domFns';\nimport {canDragX, canDragY, createDraggableData, getBoundPosition} from './utils/positionFns';\nimport {dontSetMe} from './utils/shims';\nimport DraggableCore from './DraggableCore';\nimport type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps, DraggableCoreDefaultProps} from './DraggableCore';\nimport log from './utils/log';\nimport type {Bounds, DraggableEventHandler} from './utils/types';\nimport type {ReactElement} from 'react';\n\ntype DraggableState = {\n dragging: boolean,\n dragged: boolean,\n x: number, y: number,\n slackX: number, slackY: number,\n isElementSVG: boolean,\n prevPropsPosition: ControlPosition | null,\n};\n\nexport type DraggableDefaultProps = DraggableCoreDefaultProps & {\n axis: 'both' | 'x' | 'y' | 'none',\n bounds: Bounds | string | false,\n defaultClassName: string,\n defaultClassNameDragging: string,\n defaultClassNameDragged: string,\n defaultPosition: ControlPosition,\n scale: number,\n};\n\nexport type DraggableProps = DraggableCoreProps & DraggableDefaultProps & {\n positionOffset: PositionOffsetControlPosition,\n position: ControlPosition,\n};\n\n//\n// Define \n//\n\n// Public-facing prop shape: every prop is optional for consumers because the\n// required ones are supplied by `defaultProps`. This reproduces the historical\n// hand-written declaration `React.Component, {}>` so the\n// auto-generated .d.ts stays API-compatible with the old typings.\nclass Draggable extends React.Component, DraggableState> {\n\n // Internally, defaultProps guarantees every prop is present at runtime, so we\n // narrow `this.props` back to the fully-resolved type for type-safe access.\n declare props: DraggableProps;\n\n static displayName?: string = 'Draggable';\n\n // Both the annotation and the `?` are load-bearing:\n // - The index-signature annotation stops tsc from inferring the\n // PropTypes.Requireable<...> types and emitting `import PropTypes from\n // 'prop-types'` into the generated public .d.ts, which would force consumers\n // to install @types/prop-types (the v4.5.0 hand-written typings had none).\n // - The `?` keeps `propTypes` from being a *required* member of the public\n // type. React <= 18's JSX LibraryManagedAttributes only consults a\n // component's `propTypes` when it is required (`C extends {propTypes: ...}`);\n // when it does, this index-signature `propTypes` makes `defaultProps` stop\n // marking props optional, so consumers are forced to pass every prop.\n // Optional dodges that branch; React 19 ignores `propTypes` entirely. The\n // typings/tsconfig.react18.json check guards against a regression here.\n // Do not remove. See lib/DraggableCore.tsx for the same guard.\n static propTypes?: {[key: string]: unknown} = {\n // Accepts all props accepts.\n ...DraggableCore.propTypes,\n\n /**\n * `axis` determines which axis the draggable can move.\n *\n * Note that all callbacks will still return data as normal. This only\n * controls flushing to the DOM.\n *\n * 'both' allows movement horizontally and vertically.\n * 'x' limits movement to horizontal axis.\n * 'y' limits movement to vertical axis.\n * 'none' limits all movement.\n *\n * Defaults to 'both'.\n */\n axis: PropTypes.oneOf(['both', 'x', 'y', 'none']),\n\n /**\n * `bounds` determines the range of movement available to the element.\n * Available values are:\n *\n * 'parent' restricts movement within the Draggable's parent node.\n *\n * Alternatively, pass an object with the following properties, all of which are optional:\n *\n * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}\n *\n * All values are in px.\n *\n * Example:\n *\n * ```jsx\n * let App = React.createClass({\n * render: function () {\n * return (\n * \n *
Content
\n * \n * );\n * }\n * });\n * ```\n */\n bounds: PropTypes.oneOfType([\n PropTypes.shape({\n left: PropTypes.number,\n right: PropTypes.number,\n top: PropTypes.number,\n bottom: PropTypes.number\n }),\n PropTypes.string,\n PropTypes.oneOf([false])\n ]),\n\n defaultClassName: PropTypes.string,\n defaultClassNameDragging: PropTypes.string,\n defaultClassNameDragged: PropTypes.string,\n\n /**\n * `defaultPosition` specifies the x and y that the dragged item should start at\n *\n * Example:\n *\n * ```jsx\n * let App = React.createClass({\n * render: function () {\n * return (\n * \n *
I start with transformX: 25px and transformY: 25px;
\n * \n * );\n * }\n * });\n * ```\n */\n defaultPosition: PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number\n }),\n positionOffset: PropTypes.shape({\n x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n }),\n\n /**\n * `position`, if present, defines the current position of the element.\n *\n * This is similar to how form elements in React work - if no `position` is supplied, the component\n * is uncontrolled.\n *\n * Example:\n *\n * ```jsx\n * let App = React.createClass({\n * render: function () {\n * return (\n * \n *
I start with transformX: 25px and transformY: 25px;
\n * \n * );\n * }\n * });\n * ```\n */\n position: PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number\n }),\n\n /**\n * These properties should be defined on the child, not here.\n */\n className: dontSetMe,\n style: dontSetMe,\n transform: dontSetMe\n };\n\n // Typed as the full `DraggableProps` (not just the default-provided subset) so\n // React's JSX LibraryManagedAttributes treats EVERY prop as optional for\n // consumers, matching the historical hand-written typings. At runtime only the\n // default-able props are actually populated.\n static defaultProps: DraggableProps = {\n ...DraggableCore.defaultProps,\n axis: 'both',\n bounds: false,\n defaultClassName: 'react-draggable',\n defaultClassNameDragging: 'react-draggable-dragging',\n defaultClassNameDragged: 'react-draggable-dragged',\n defaultPosition: {x: 0, y: 0},\n scale: 1\n } as unknown as DraggableProps;\n\n // React 16.3+\n // Arity (props, state)\n static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState): Partial | null {\n // Set x/y if a new position is provided in props that is different than the previous.\n if (\n position &&\n (!prevPropsPosition ||\n position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y\n )\n ) {\n log('Draggable: getDerivedStateFromProps %j', {position, prevPropsPosition});\n return {\n x: position.x,\n y: position.y,\n prevPropsPosition: {...position}\n };\n }\n return null;\n }\n\n constructor(props: DraggableProps) {\n super(props);\n\n this.state = {\n // Whether or not we are currently dragging.\n dragging: false,\n\n // Whether or not we have been dragged before.\n dragged: false,\n\n // Current transform x and y.\n x: props.position ? props.position.x : props.defaultPosition.x,\n y: props.position ? props.position.y : props.defaultPosition.y,\n\n prevPropsPosition: {...props.position},\n\n // Used for compensating for out-of-bounds drags\n slackX: 0, slackY: 0,\n\n // Can only determine if SVG after mounting\n isElementSVG: false\n };\n\n if (props.position && !(props.onDrag || props.onStop)) {\n // eslint-disable-next-line no-console\n console.warn('A `position` was applied to this , without drag handlers. This will make this ' +\n 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' +\n '`position` of this element.');\n }\n }\n\n componentDidMount() {\n // Check to see if the element passed is an instanceof SVGElement\n if(typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {\n this.setState({isElementSVG: true});\n }\n }\n\n componentWillUnmount() {\n if (this.state.dragging) {\n this.setState({dragging: false}); // prevents invariant if unmounted while dragging\n }\n }\n\n // React 19 removed ReactDOM.findDOMNode, so nodeRef is now required.\n // For backward compatibility with React 18 and earlier, we still support findDOMNode if available.\n findDOMNode(): HTMLElement | null {\n if (this.props?.nodeRef) {\n return this.props.nodeRef.current;\n }\n // ReactDOM.findDOMNode was removed from React 19's type defs (and runtime),\n // so access it dynamically to stay compatible with React 18 and earlier.\n const legacyReactDOM = ReactDOM as unknown as {\n findDOMNode?: (instance: unknown) => HTMLElement | null;\n };\n if (typeof legacyReactDOM.findDOMNode === 'function') {\n return legacyReactDOM.findDOMNode(this) as HTMLElement | null;\n }\n return null;\n }\n\n onDragStart: DraggableEventHandler = (e, coreData) => {\n log('Draggable: onDragStart: %j', coreData);\n\n // Short-circuit if user's callback killed it.\n const shouldStart = this.props.onStart(e, createDraggableData(this, coreData));\n // Kills start event on core as well, so move handlers are never bound.\n if (shouldStart === false) return false;\n\n this.setState({dragging: true, dragged: true});\n };\n\n onDrag: DraggableEventHandler = (e, coreData) => {\n if (!this.state.dragging) return false;\n log('Draggable: onDrag: %j', coreData);\n\n const uiData = createDraggableData(this, coreData);\n\n const newState = {\n x: uiData.x,\n y: uiData.y,\n slackX: 0,\n slackY: 0,\n };\n\n // Keep within bounds.\n if (this.props.bounds) {\n // Save original x and y.\n const {x, y} = newState;\n\n // Add slack to the values used to calculate bound position. This will ensure that if\n // we start removing slack, the element won't react to it right away until it's been\n // completely removed.\n newState.x += this.state.slackX;\n newState.y += this.state.slackY;\n\n // Get bound position. This will ceil/floor the x and y within the boundaries.\n const [newStateX, newStateY] = getBoundPosition(this, newState.x, newState.y);\n newState.x = newStateX;\n newState.y = newStateY;\n\n // Recalculate slack by noting how much was shaved by the boundPosition handler.\n newState.slackX = this.state.slackX + (x - newState.x);\n newState.slackY = this.state.slackY + (y - newState.y);\n\n // Update the event we fire to reflect what really happened after bounds took effect.\n uiData.x = newState.x;\n uiData.y = newState.y;\n uiData.deltaX = newState.x - this.state.x;\n uiData.deltaY = newState.y - this.state.y;\n }\n\n // Short-circuit if user's callback killed it.\n const shouldUpdate = this.props.onDrag(e, uiData);\n if (shouldUpdate === false) return false;\n\n this.setState(newState);\n };\n\n onDragStop: DraggableEventHandler = (e, coreData) => {\n if (!this.state.dragging) return false;\n\n // Short-circuit if user's callback killed it.\n const shouldContinue = this.props.onStop(e, createDraggableData(this, coreData));\n if (shouldContinue === false) return false;\n\n log('Draggable: onDragStop: %j', coreData);\n\n const newState: Partial = {\n dragging: false,\n slackX: 0,\n slackY: 0\n };\n\n // If this is a controlled component, the result of this operation will be to\n // revert back to the old position. We expect a handler on `onDragStop`, at the least.\n const controlled = Boolean(this.props.position);\n if (controlled) {\n const {x, y} = this.props.position;\n newState.x = x;\n newState.y = y;\n }\n\n this.setState(newState as DraggableState);\n };\n\n render(): ReactElement {\n const {\n axis,\n bounds,\n children,\n defaultPosition,\n defaultClassName,\n defaultClassNameDragging,\n defaultClassNameDragged,\n position,\n positionOffset,\n scale,\n ...draggableCoreProps\n } = this.props;\n\n let style = {};\n let svgTransform = null;\n\n // If this is controlled, we don't want to move it - unless it's dragging.\n const controlled = Boolean(position);\n const draggable = !controlled || this.state.dragging;\n\n const validPosition = position || defaultPosition;\n const transformOpts = {\n // Set left if horizontal drag is enabled\n x: canDragX(this) && draggable ?\n this.state.x :\n validPosition.x,\n\n // Set top if vertical drag is enabled\n y: canDragY(this) && draggable ?\n this.state.y :\n validPosition.y\n };\n\n // If this element was SVG, we use the `transform` attribute.\n if (this.state.isElementSVG) {\n svgTransform = createSVGTransform(transformOpts, positionOffset);\n } else {\n // Add a CSS transform to move the element around. This allows us to move the element around\n // without worrying about whether or not it is relatively or absolutely positioned.\n // If the item you are dragging already has a transform set, wrap it in a so \n // has a clean slate.\n style = createCSSTransform(transformOpts, positionOffset);\n }\n\n // React.Children.only types its return as ReactElement; narrow the\n // single child to an element carrying optional DOM style/className props so\n // we can read and merge them.\n const onlyChild = React.Children.only(children) as ReactElement<{\n className?: string,\n style?: React.CSSProperties,\n }>;\n\n // Mark with class while dragging\n const className = clsx((onlyChild.props.className || ''), defaultClassName, {\n [defaultClassNameDragging]: this.state.dragging,\n [defaultClassNameDragged]: this.state.dragged\n });\n\n // Reuse the child provided\n // This makes it flexible to use whatever element is wanted (div, ul, etc)\n return (\n \n {React.cloneElement(onlyChild, {\n className: className,\n style: {...onlyChild.props.style, ...style},\n transform: svgTransform\n } as Partial<{className: string, style: React.CSSProperties, transform: string | null}>)}\n \n );\n }\n}\n\nexport {Draggable as default, DraggableCore};\n","// @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc\nexport function findInArray(\n array: ArrayLike,\n callback: (value: T, index: number, array: ArrayLike) => unknown\n): T | undefined {\n for (let i = 0, length = array.length; i < length; i++) {\n if (callback.apply(callback, [array[i], i, array])) return array[i];\n }\n}\n\nexport function isFunction(func: unknown): func is (...args: unknown[]) => unknown {\n return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';\n}\n\nexport function isNum(num: unknown): num is number {\n return typeof num === 'number' && !isNaN(num);\n}\n\nexport function int(a: string): number {\n return parseInt(a, 10);\n}\n\nexport function dontSetMe(props: {[key: string]: unknown}, propName: string, componentName: string): Error | undefined {\n if (props[propName]) {\n return new Error(`Invalid prop ${propName} passed to ${componentName} - do not set this, set it on the child.`);\n }\n}\n","const prefixes = ['Moz', 'Webkit', 'O', 'ms'];\nexport function getPrefix(prop: string='transform'): string {\n // Ensure we're running in an environment where there is actually a global\n // `window` obj\n if (typeof window === 'undefined') return '';\n\n // If we're in a pseudo-browser server-side environment, this access\n // path may not exist, so bail out if it doesn't.\n const style = window.document?.documentElement?.style;\n if (!style) return '';\n\n if (prop in style) return '';\n\n for (let i = 0; i < prefixes.length; i++) {\n if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];\n }\n\n return '';\n}\n\nexport function browserPrefixToKey(prop: string, prefix: string): string {\n return prefix ? `${prefix}${kebabToTitleCase(prop)}` : prop;\n}\n\nexport function browserPrefixToStyle(prop: string, prefix: string): string {\n return prefix ? `-${prefix.toLowerCase()}-${prop}` : prop;\n}\n\nfunction kebabToTitleCase(str: string): string {\n let out = '';\n let shouldCapitalize = true;\n for (let i = 0; i < str.length; i++) {\n if (shouldCapitalize) {\n out += str[i].toUpperCase();\n shouldCapitalize = false;\n } else if (str[i] === '-') {\n shouldCapitalize = true;\n } else {\n out += str[i];\n }\n }\n return out;\n}\n\n// Default export is the prefix itself, like 'Moz', 'Webkit', etc\n// Note that you may have to re-test for certain things; for instance, Chrome 50\n// can handle unprefixed `transform`, but not unprefixed `user-select`\nexport default (getPrefix() as string);\n","import {findInArray, isFunction, int} from './shims';\nimport browserPrefix, {browserPrefixToKey} from './getPrefix';\n\nimport type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';\n\ntype Indexable = {[key: string]: unknown};\n\n// Drag handlers receive a more specific event type (MouseTouchEvent) than the\n// DOM's `EventListener` (which takes a base `Event`). We accept any such handler\n// and cast to `EventListener` only at the addEventListener/removeEventListener\n// boundary, mirroring the old permissive `Function` parameter type.\ntype EventListenerLike = (event: never) => void | false;\n\nlet matchesSelectorFunc = '';\nexport function matchesSelector(el: Node, selector: string): boolean {\n if (!matchesSelectorFunc) {\n matchesSelectorFunc = findInArray([\n 'matches',\n 'webkitMatchesSelector',\n 'mozMatchesSelector',\n 'msMatchesSelector',\n 'oMatchesSelector'\n ], function(method){\n // Doesn't think elements are indexable\n return isFunction((el as unknown as Indexable)[method]);\n }) ?? '';\n }\n\n // Might not be found entirely (not an Element?) - in that case, bail\n // Doesn't think elements are indexable\n const matchFn = (el as unknown as Indexable)[matchesSelectorFunc];\n if (!isFunction(matchFn)) return false;\n\n // Doesn't think elements are indexable\n return Boolean(matchFn.call(el, selector));\n}\n\n// Works up the tree to the draggable itself attempting to match selector.\nexport function matchesSelectorAndParentsTo(el: Node, selector: string, baseNode: Node): boolean {\n let node: Node | null = el;\n do {\n if (matchesSelector(node, selector)) return true;\n if (node === baseNode) return false;\n node = node.parentNode;\n } while (node);\n\n return false;\n}\n\nexport function addEvent(\n el: Node | null | undefined,\n event: string,\n handler: EventListenerLike,\n inputOptions?: AddEventListenerOptions\n): void {\n if (!el) return;\n const options = {capture: true, ...inputOptions};\n const listener = handler as EventListener;\n if (el.addEventListener) {\n el.addEventListener(event, listener, options);\n } else if ((el as unknown as Indexable).attachEvent) {\n (el as unknown as {attachEvent(name: string, handler: EventListener): void}).attachEvent('on' + event, listener);\n } else {\n // Doesn't think elements are indexable\n (el as unknown as Indexable)['on' + event] = listener;\n }\n}\n\nexport function removeEvent(\n el: Node | null | undefined,\n event: string,\n handler: EventListenerLike,\n inputOptions?: AddEventListenerOptions\n): void {\n if (!el) return;\n const options = {capture: true, ...inputOptions};\n const listener = handler as EventListener;\n if (el.removeEventListener) {\n el.removeEventListener(event, listener, options);\n } else if ((el as unknown as Indexable).detachEvent) {\n (el as unknown as {detachEvent(name: string, handler: EventListener): void}).detachEvent('on' + event, listener);\n } else {\n // Doesn't think elements are indexable\n (el as unknown as Indexable)['on' + event] = null;\n }\n}\n\nexport function outerHeight(node: HTMLElement): number {\n // This is deliberately excluding margin for our calculations, since we are using\n // offsetTop which is including margin. See getBoundPosition\n let height = node.clientHeight;\n const computedStyle = (node.ownerDocument.defaultView as Window).getComputedStyle(node);\n height += int(computedStyle.borderTopWidth);\n height += int(computedStyle.borderBottomWidth);\n return height;\n}\n\nexport function outerWidth(node: HTMLElement): number {\n // This is deliberately excluding margin for our calculations, since we are using\n // offsetLeft which is including margin. See getBoundPosition\n let width = node.clientWidth;\n const computedStyle = (node.ownerDocument.defaultView as Window).getComputedStyle(node);\n width += int(computedStyle.borderLeftWidth);\n width += int(computedStyle.borderRightWidth);\n return width;\n}\nexport function innerHeight(node: HTMLElement): number {\n let height = node.clientHeight;\n const computedStyle = (node.ownerDocument.defaultView as Window).getComputedStyle(node);\n height -= int(computedStyle.paddingTop);\n height -= int(computedStyle.paddingBottom);\n return height;\n}\n\nexport function innerWidth(node: HTMLElement): number {\n let width = node.clientWidth;\n const computedStyle = (node.ownerDocument.defaultView as Window).getComputedStyle(node);\n width -= int(computedStyle.paddingLeft);\n width -= int(computedStyle.paddingRight);\n return width;\n}\n\ninterface EventWithOffset {\n clientX: number, clientY: number\n}\n\n// Get from offsetParent\nexport function offsetXYFromParent(evt: EventWithOffset, offsetParent: HTMLElement, scale: number): ControlPosition {\n const isBody = offsetParent === offsetParent.ownerDocument.body;\n const offsetParentRect = isBody ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();\n\n const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;\n const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;\n\n return {x, y};\n}\n\nexport function createCSSTransform(controlPos: ControlPosition, positionOffset: PositionOffsetControlPosition): {[key: string]: string} {\n const translation = getTranslation(controlPos, positionOffset, 'px');\n return {[browserPrefixToKey('transform', browserPrefix)]: translation };\n}\n\nexport function createSVGTransform(controlPos: ControlPosition, positionOffset: PositionOffsetControlPosition): string {\n const translation = getTranslation(controlPos, positionOffset, '');\n return translation;\n}\nexport function getTranslation({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition, unitSuffix: string): string {\n let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;\n if (positionOffset) {\n const defaultX = `${(typeof positionOffset.x === 'string') ? positionOffset.x : positionOffset.x + unitSuffix}`;\n const defaultY = `${(typeof positionOffset.y === 'string') ? positionOffset.y : positionOffset.y + unitSuffix}`;\n translation = `translate(${defaultX}, ${defaultY})` + translation;\n }\n return translation;\n}\n\nexport function getTouch(e: MouseTouchEvent, identifier: number): {clientX: number, clientY: number} | null | undefined {\n return (e.targetTouches && findInArray(e.targetTouches, t => identifier === t.identifier)) ||\n (e.changedTouches && findInArray(e.changedTouches, t => identifier === t.identifier));\n}\n\nexport function getTouchIdentifier(e: MouseTouchEvent): number | undefined {\n if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;\n if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;\n}\n\n// User-select Hacks:\n//\n// Useful for preventing blue highlights all over everything when dragging.\n\n// webpack exposes the page's CSP nonce as the free variable `__webpack_nonce__`.\n// Read it defensively: the `typeof` guard keeps this safe under bundlers that\n// don't define it (a bare reference to an undeclared identifier would throw).\ndeclare const __webpack_nonce__: string | undefined;\nfunction getDefaultNonce(): string | undefined {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : undefined;\n}\n\n// Note we're passing `document` b/c we could be iframed\nexport function addUserSelectStyles(doc: Document | null | undefined, nonce?: string | null) {\n if (!doc) return;\n let styleEl = doc.getElementById('react-draggable-style-el') as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = doc.createElement('style');\n styleEl.type = 'text/css';\n styleEl.id = 'react-draggable-style-el';\n // Attach a CSP nonce so a strict `style-src` policy doesn't block this\n // injected element. Prefer the explicit prop; otherwise fall back to\n // webpack's `__webpack_nonce__`. Only the first call (which creates the\n // element) applies it; later calls reuse the existing element as before.\n const resolvedNonce = nonce ?? getDefaultNonce();\n if (resolvedNonce) styleEl.setAttribute('nonce', resolvedNonce);\n styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\\n';\n styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\\n';\n doc.getElementsByTagName('head')[0].appendChild(styleEl);\n }\n if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');\n}\n\nexport function scheduleRemoveUserSelectStyles(doc: Document | null | undefined) {\n // Prevent a possible \"forced reflow\"\n if (window.requestAnimationFrame) {\n window.requestAnimationFrame(() => {\n removeUserSelectStyles(doc);\n });\n } else {\n removeUserSelectStyles(doc);\n }\n}\n\nfunction removeUserSelectStyles(doc: Document | null | undefined) {\n if (!doc) return;\n try {\n if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');\n // IE\n const ieSelection = (doc as unknown as {selection?: {empty(): void}}).selection;\n if (ieSelection) {\n // IE\n ieSelection.empty();\n } else {\n // Remove selection caused by scroll, unless it's a focused input\n // (we use doc.defaultView in case we're in an iframe)\n const selection = (doc.defaultView || window).getSelection();\n if (selection && selection.type !== 'Caret') {\n selection.removeAllRanges();\n }\n }\n } catch {\n // probably IE\n }\n}\n\nexport function addClassName(el: HTMLElement, className: string) {\n if (el.classList) {\n el.classList.add(className);\n } else {\n if (!el.className.match(new RegExp(`(?:^|\\\\s)${className}(?!\\\\S)`))) {\n el.className += ` ${className}`;\n }\n }\n}\n\nexport function removeClassName(el: HTMLElement, className: string) {\n if (el.classList) {\n el.classList.remove(className);\n } else {\n el.className = el.className.replace(new RegExp(`(?:^|\\\\s)${className}(?!\\\\S)`, 'g'), '');\n }\n}\n","import {isNum, int} from './shims';\nimport {getTouch, innerWidth, innerHeight, offsetXYFromParent, outerWidth, outerHeight} from './domFns';\n\nimport type Draggable from '../Draggable';\nimport type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';\nimport type DraggableCore from '../DraggableCore';\n\nexport function getBoundPosition(draggable: Draggable, x: number, y: number): [number, number] {\n // If no bounds, short-circuit and move on\n if (!draggable.props.bounds) return [x, y];\n\n // Clone new bounds\n let {bounds} = draggable.props;\n bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);\n const node = findDOMNode(draggable);\n\n if (typeof bounds === 'string') {\n const {ownerDocument} = node;\n const ownerWindow = ownerDocument.defaultView;\n if (!ownerWindow) {\n throw new Error('Cannot resolve the owner window of the draggable node.');\n }\n let boundNode;\n if (bounds === 'parent') {\n boundNode = node.parentNode;\n } else {\n // Flow assigns the wrong return type (Node) for getRootNode(),\n // so we cast it to one of the correct types (Element).\n // The others are Document and ShadowRoot.\n // All three implement querySelector() so it's safe to call.\n const rootNode = (node.getRootNode() as unknown) as Element;\n boundNode = rootNode.querySelector(bounds);\n }\n\n if (!(boundNode instanceof ownerWindow.HTMLElement)) {\n throw new Error('Bounds selector \"' + bounds + '\" could not find an element.');\n }\n const boundNodeEl: HTMLElement = boundNode; // for Flow, can't seem to refine correctly\n const nodeStyle = ownerWindow.getComputedStyle(node);\n const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);\n // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.\n bounds = {\n left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),\n top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),\n right: innerWidth(boundNodeEl) - outerWidth(node) - node.offsetLeft +\n int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),\n bottom: innerHeight(boundNodeEl) - outerHeight(node) - node.offsetTop +\n int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)\n };\n }\n\n // Keep x and y below right and bottom limits...\n if (isNum(bounds.right)) x = Math.min(x, bounds.right);\n if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom);\n\n // But above left and top limits.\n if (isNum(bounds.left)) x = Math.max(x, bounds.left);\n if (isNum(bounds.top)) y = Math.max(y, bounds.top);\n\n return [x, y];\n}\n\nexport function snapToGrid(grid: [number, number], pendingX: number, pendingY: number): [number, number] {\n const x = Math.round(pendingX / grid[0]) * grid[0];\n const y = Math.round(pendingY / grid[1]) * grid[1];\n return [x, y];\n}\n\nexport function canDragX(draggable: Draggable): boolean {\n return draggable.props.axis === 'both' || draggable.props.axis === 'x';\n}\n\nexport function canDragY(draggable: Draggable): boolean {\n return draggable.props.axis === 'both' || draggable.props.axis === 'y';\n}\n\n// Get {x, y} positions from event.\nexport function getControlPosition(e: MouseTouchEvent, touchIdentifier: number | null | undefined, draggableCore: DraggableCore): ControlPosition | null {\n const touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;\n if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch\n const node = findDOMNode(draggableCore);\n // User can provide an offsetParent if desired.\n const offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;\n return offsetXYFromParent(touchObj || e, offsetParent as HTMLElement, draggableCore.props.scale);\n}\n\n// Create an data object exposed by 's events\nexport function createCoreData(draggable: DraggableCore, x: number, y: number): DraggableData {\n const isStart = !isNum(draggable.lastX);\n const node = findDOMNode(draggable);\n\n if (isStart) {\n // If this is our first move, use the x and y as last coords.\n return {\n node,\n deltaX: 0, deltaY: 0,\n lastX: x, lastY: y,\n x, y,\n };\n } else {\n // Otherwise calculate proper values.\n return {\n node,\n deltaX: x - draggable.lastX, deltaY: y - draggable.lastY,\n lastX: draggable.lastX, lastY: draggable.lastY,\n x, y,\n };\n }\n}\n\n// Create an data exposed by 's events\nexport function createDraggableData(draggable: Draggable, coreData: DraggableData): DraggableData {\n const scale = draggable.props.scale;\n return {\n node: coreData.node,\n x: draggable.state.x + (coreData.deltaX / scale),\n y: draggable.state.y + (coreData.deltaY / scale),\n deltaX: (coreData.deltaX / scale),\n deltaY: (coreData.deltaY / scale),\n lastX: draggable.state.x,\n lastY: draggable.state.y\n };\n}\n\n// A lot faster than stringify/parse\nfunction cloneBounds(bounds: Bounds): Bounds {\n return {\n left: bounds.left,\n top: bounds.top,\n right: bounds.right,\n bottom: bounds.bottom\n };\n}\n\nfunction findDOMNode(draggable: Draggable | DraggableCore): HTMLElement {\n const node = draggable.findDOMNode();\n if (!node) {\n throw new Error(': Unmounted during event!');\n }\n // $FlowIgnore we can't assert on HTMLElement due to tests... FIXME\n return node;\n}\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport {matchesSelectorAndParentsTo, addEvent, removeEvent, addUserSelectStyles, getTouchIdentifier,\n scheduleRemoveUserSelectStyles} from './utils/domFns';\nimport {createCoreData, getControlPosition, snapToGrid} from './utils/positionFns';\nimport {dontSetMe} from './utils/shims';\nimport log from './utils/log';\n\nimport type {EventHandler, MouseTouchEvent} from './utils/types';\n\n// Re-export shared types so existing imports from './DraggableCore' keep working.\nexport type {DraggableData, DraggableEventHandler, ControlPosition, PositionOffsetControlPosition} from './utils/types';\nimport type {DraggableEventHandler} from './utils/types';\n\n// Simple abstraction for dragging events names.\nconst eventsFor = {\n touch: {\n start: 'touchstart',\n move: 'touchmove',\n stop: 'touchend'\n },\n mouse: {\n start: 'mousedown',\n move: 'mousemove',\n stop: 'mouseup'\n }\n};\n\n// Default to mouse events.\nlet dragEventFor = eventsFor.mouse;\n\nexport type DraggableCoreDefaultProps = {\n allowAnyClick: boolean,\n allowMobileScroll: boolean,\n disabled: boolean,\n enableUserSelectHack: boolean,\n onStart: DraggableEventHandler,\n onDrag: DraggableEventHandler,\n onStop: DraggableEventHandler,\n onMouseDown: (e: MouseEvent) => void,\n scale: number,\n};\n\nexport type DraggableCoreProps = DraggableCoreDefaultProps & {\n cancel: string,\n // Public type stays React.ReactNode for backward compatibility with the\n // hand-written typings shipped through v4.5.0. At runtime React.Children.only\n // still requires exactly one element (enforced in render()).\n children?: React.ReactNode,\n offsetParent: HTMLElement,\n grid: [number, number],\n handle: string,\n nodeRef?: React.RefObject | null,\n nonce?: string,\n};\n\n//\n// Define .\n//\n// is for advanced usage of . It maintains minimal internal state so it can\n// work well with libraries that require more control over the element.\n//\n\n// Public-facing prop shape: every prop is optional for consumers because the\n// required ones are supplied by `defaultProps`. This reproduces the historical\n// hand-written declaration `React.Component, {}>`\n// so the auto-generated .d.ts stays API-compatible with the old typings.\nexport default class DraggableCore extends React.Component> {\n\n // Internally, defaultProps guarantees every prop is present at runtime, so we\n // narrow `this.props` back to the fully-resolved type for type-safe access.\n declare props: DraggableCoreProps;\n\n static displayName: string | undefined = 'DraggableCore';\n\n // Both the annotation and the `?` are load-bearing:\n // - The index-signature annotation stops tsc from inferring the\n // PropTypes.Requireable<...> types and emitting `import PropTypes from\n // 'prop-types'` into the generated public .d.ts, which would force consumers\n // to install @types/prop-types (the v4.5.0 hand-written typings had none).\n // - The `?` keeps `propTypes` from being a *required* member of the public\n // type. React <= 18's JSX LibraryManagedAttributes only consults a\n // component's `propTypes` when it is required (`C extends {propTypes: ...}`);\n // when it does, this index-signature `propTypes` makes `defaultProps` stop\n // marking props optional, so consumers are forced to pass every prop.\n // Optional dodges that branch; React 19 ignores `propTypes` entirely. The\n // typings/tsconfig.react18.json check guards against a regression here.\n // Do not remove. See lib/Draggable.tsx for the same guard.\n static propTypes?: {[key: string]: unknown} = {\n /**\n * `allowAnyClick` allows dragging using any mouse button.\n * By default, we only accept the left button.\n *\n * Defaults to `false`.\n */\n allowAnyClick: PropTypes.bool,\n\n /**\n * `allowMobileScroll` turns off cancellation of the 'touchstart' event\n * on mobile devices. Only enable this if you are having trouble with click\n * events. Prefer using 'handle' / 'cancel' instead.\n *\n * Defaults to `false`.\n */\n allowMobileScroll: PropTypes.bool,\n\n children: PropTypes.node.isRequired,\n\n /**\n * `disabled`, if true, stops the from dragging. All handlers,\n * with the exception of `onMouseDown`, will not fire.\n */\n disabled: PropTypes.bool,\n\n /**\n * By default, we add 'user-select:none' attributes to the document body\n * to prevent ugly text selection during drag. If this is causing problems\n * for your app, set this to `false`.\n */\n enableUserSelectHack: PropTypes.bool,\n\n /**\n * `offsetParent`, if set, uses the passed DOM node to compute drag offsets\n * instead of using the parent node.\n */\n offsetParent: function(props: DraggableCoreProps, propName: keyof DraggableCoreProps) {\n if (props[propName] && (props[propName] as HTMLElement).nodeType !== 1) {\n throw new Error('Draggable\\'s offsetParent must be a DOM Node.');\n }\n },\n\n /**\n * `grid` specifies the x and y that dragging should snap to.\n */\n grid: PropTypes.arrayOf(PropTypes.number),\n\n /**\n * `handle` specifies a selector to be used as the handle that initiates drag.\n *\n * Example:\n *\n * ```jsx\n * let App = React.createClass({\n * render: function () {\n * return (\n * \n *
\n *
Click me to drag
\n *
This is some other content
\n *
\n * \n * );\n * }\n * });\n * ```\n */\n handle: PropTypes.string,\n\n /**\n * `cancel` specifies a selector to be used to prevent drag initialization.\n *\n * Example:\n *\n * ```jsx\n * let App = React.createClass({\n * render: function () {\n * return(\n * \n *
\n *
You can't drag from here
\n *
Dragging here works fine
\n *
\n * \n * );\n * }\n * });\n * ```\n */\n cancel: PropTypes.string,\n\n /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.\n * Unfortunately, in order for to work properly, we need raw access\n * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`\n * as in this example:\n *\n * function MyComponent() {\n * const nodeRef = React.useRef(null);\n * return (\n * \n *
Example Target
\n * \n * );\n * }\n *\n * This can be used for arbitrarily nested components, so long as the ref ends up\n * pointing to the actual child DOM node and not a custom component.\n */\n nodeRef: PropTypes.object,\n\n /**\n * `nonce` is applied to the dynamically-injected