box-ui-elements 25.1.0-beta.2 → 25.1.0-beta.3

package/es/constants.js

@@ -236,7 +236,7 @@ export const CLIENT_NAME_CONTENT_SIDEBAR = 'ContentSidebar';
 export const CLIENT_NAME_CONTENT_UPLOADER = 'ContentUploader';
 export const CLIENT_NAME_FILE_PICKER = 'FilePicker';
 export const CLIENT_NAME_FOLDER_PICKER = 'FolderPicker';
-export const CLIENT_VERSION = '25.1.0-beta.2';
+export const CLIENT_VERSION = '25.1.0-beta.3';
 
 /* ---------------------- Statuses -------------------------- */
 export const STATUS_PENDING = 'pending';

package/es/features/security-cloud-game/DragCloud.js

@@ -46,6 +46,7 @@ const DragCloud = ({
   updateLiveText,
   updatePosition
 }) => {
+  const nodeRef = React.useRef({});
   const [isMoving, setIsMoving] = useState(false);
   const dragCloudClasses = classNames('bdl-DragCloud', {
     'is-moving': isMoving
@@ -156,12 +157,14 @@ const DragCloud = ({
     trailing: true
   });
   return /*#__PURE__*/React.createElement(Draggable, {
+    nodeRef: nodeRef,
     bounds: "parent",
     disabled: disabled,
     onDrag: onDrag,
     onStop: onDrop,
     position: position
   }, /*#__PURE__*/React.createElement("div", {
+    ref: nodeRef,
     className: dragCloudClasses,
     onBlur: onBlur,
     onKeyDown: onKeyDown,

package/es/features/security-cloud-game/DragCloud.js.flow

@@ -33,6 +33,7 @@ const DragCloud = ({
     updateLiveText,
     updatePosition,
 }) => {
+    const nodeRef = React.useRef({});
     const [isMoving, setIsMoving] = useState(false);
 
     const dragCloudClasses = classNames('bdl-DragCloud', {
@@ -137,8 +138,22 @@ const DragCloud = ({
     const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });
 
     return (
-        <Draggable bounds="parent" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>
-            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role="button" tabIndex={0}>
+        <Draggable
+            nodeRef={nodeRef}
+            bounds="parent"
+            disabled={disabled}
+            onDrag={onDrag}
+            onStop={onDrop}
+            position={position}
+        >
+            <div
+                ref={nodeRef}
+                className={dragCloudClasses}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                role="button"
+                tabIndex={0}
+            >
                 <IconCloud
                     filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}
                     height={cloudSize}

package/es/features/security-cloud-game/DragCloud.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragCloud.js","names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","createElement","id","in","stdDeviation","dx","dy","result","floodColor","floodOpacity","in2","operator","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","intl","formatMessage","onDrop","position","updateLiveText","updatePosition","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","_objectSpread","Math","max","reachLeftEdge","moveRight","maxX","min","reachRightEdge","moveUp","newY","y","reachTopEdge","moveDown","maxY","reachBottomEdge","handleSpacebar","cloudStatusText","cloudDropped","cloudGrabbed","currentPositionText","currentPosition","onKeyDown","event","preventDefault","stopPropagation","key","onBlur","onDrag","e","leading","trailing","bounds","onStop","className","role","tabIndex","filter","definition","title","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport throttle from 'lodash/throttle';\nimport Draggable from 'react-draggable';\n\nimport IconCloud from '../../icons/general/IconCloud';\nimport messages from './messages';\nimport { getGridPosition } from './utils';\n\nconst DropShadowFilter = () => (\n    <filter id=\"drop-shadow\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n        <feOffset dx=\"2\" dy=\"2\" result=\"offsetblur\" />\n        <feFlood floodColor=\"black\" floodOpacity=\"0.3\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n);\n\nconst DragCloud = ({\n    cloudSize,\n    disabled,\n    gameBoardSize: { height, width },\n    gridTrackSize,\n    intl: { formatMessage },\n    onDrop,\n    position,\n    updateLiveText,\n    updatePosition,\n}) => {\n    const [isMoving, setIsMoving] = useState(false);\n\n    const dragCloudClasses = classNames('bdl-DragCloud', {\n        'is-moving': isMoving,\n    });\n\n    const moveLeft = () => {\n        const newX = position.x - gridTrackSize;\n        updatePosition({ ...position, x: Math.max(newX, 0) }, true);\n        if (newX < 0) {\n            updateLiveText(formatMessage(messages.reachLeftEdge));\n        }\n    };\n\n    const moveRight = () => {\n        const maxX = width - cloudSize;\n        const newX = position.x + gridTrackSize;\n        updatePosition({ ...position, x: Math.min(newX, maxX) }, true);\n        if (newX > maxX) {\n            updateLiveText(formatMessage(messages.reachRightEdge));\n        }\n    };\n\n    const moveUp = () => {\n        const newY = position.y - gridTrackSize;\n        updatePosition({ ...position, y: Math.max(newY, 0) }, true);\n        if (newY < 0) {\n            updateLiveText(formatMessage(messages.reachTopEdge));\n        }\n    };\n\n    const moveDown = () => {\n        const maxY = height - cloudSize;\n        const newY = position.y + gridTrackSize;\n        updatePosition({ ...position, y: Math.min(newY, maxY) }, true);\n        if (newY > maxY) {\n            updateLiveText(formatMessage(messages.reachBottomEdge));\n        }\n    };\n\n    const handleSpacebar = () => {\n        const cloudStatusText = formatMessage(isMoving ? messages.cloudDropped : messages.cloudGrabbed);\n        const currentPositionText = formatMessage(messages.currentPosition, getGridPosition(position, gridTrackSize));\n        updateLiveText(`${cloudStatusText} ${currentPositionText}`, true);\n\n        if (isMoving) {\n            onDrop();\n        }\n\n        setIsMoving(!isMoving);\n    };\n\n    /**\n     * DragCloud keyboard event handler. Supports Up/Down/Left/Right arrow keys and Spacebar\n     * @param {KeyboardEvent} event - The drag event\n     * @returns {void}\n     */\n    const onKeyDown = event => {\n        if (disabled) {\n            return;\n        }\n\n        if (isMoving) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === ' ') {\n            handleSpacebar();\n        } else if (isMoving) {\n            switch (event.key) {\n                case 'ArrowUp':\n                    moveUp();\n                    break;\n                case 'ArrowDown':\n                    moveDown();\n                    break;\n                case 'ArrowLeft':\n                    moveLeft();\n                    break;\n                case 'ArrowRight':\n                    moveRight();\n                    break;\n                default:\n                    break;\n            }\n        }\n    };\n\n    /**\n     * Reset isMoving state when DragCloud loses focus\n     * @returns {void}\n     */\n    const onBlur = () => setIsMoving(false);\n\n    /**\n     * DragCloud drag event handler. Updates current position.\n     * @param {MouseEvent} e - The drag event\n     * @param {object} { x, y } - Object which contains x and y coordinate of the drag event.\n     * @returns {void}\n     */\n    const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });\n\n    return (\n        <Draggable bounds=\"parent\" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>\n            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role=\"button\" tabIndex={0}>\n                <IconCloud\n                    filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}\n                    height={cloudSize}\n                    title={formatMessage(messages.cloudObject)}\n                    width={cloudSize}\n                />\n            </div>\n        </Draggable>\n    );\n};\n\nDragCloud.displayName = 'DragCloud';\n\nDragCloud.propTypes = {\n    cloudSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    gameBoardSize: PropTypes.objectOf(PropTypes.number),\n    gridTrackSize: PropTypes.number,\n    intl: PropTypes.any,\n    position: PropTypes.objectOf(PropTypes.number).isRequired,\n    onDrop: PropTypes.func,\n    updateLiveText: PropTypes.func,\n    updatePosition: PropTypes.func,\n};\n\n// Actual export\nexport { DragCloud as DragCloudBase };\nexport default injectIntl(DragCloud);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DragCloud.js","names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","createElement","id","in","stdDeviation","dx","dy","result","floodColor","floodOpacity","in2","operator","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","intl","formatMessage","onDrop","position","updateLiveText","updatePosition","nodeRef","useRef","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","_objectSpread","Math","max","reachLeftEdge","moveRight","maxX","min","reachRightEdge","moveUp","newY","y","reachTopEdge","moveDown","maxY","reachBottomEdge","handleSpacebar","cloudStatusText","cloudDropped","cloudGrabbed","currentPositionText","currentPosition","onKeyDown","event","preventDefault","stopPropagation","key","onBlur","onDrag","e","leading","trailing","bounds","onStop","ref","className","role","tabIndex","filter","definition","title","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport throttle from 'lodash/throttle';\nimport Draggable from 'react-draggable';\n\nimport IconCloud from '../../icons/general/IconCloud';\nimport messages from './messages';\nimport { getGridPosition } from './utils';\n\nconst DropShadowFilter = () => (\n    <filter id=\"drop-shadow\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n        <feOffset dx=\"2\" dy=\"2\" result=\"offsetblur\" />\n        <feFlood floodColor=\"black\" floodOpacity=\"0.3\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n);\n\nconst DragCloud = ({\n    cloudSize,\n    disabled,\n    gameBoardSize: { height, width },\n    gridTrackSize,\n    intl: { formatMessage },\n    onDrop,\n    position,\n    updateLiveText,\n    updatePosition,\n}) => {\n    const nodeRef = React.useRef({});\n    const [isMoving, setIsMoving] = useState(false);\n\n    const dragCloudClasses = classNames('bdl-DragCloud', {\n        'is-moving': isMoving,\n    });\n\n    const moveLeft = () => {\n        const newX = position.x - gridTrackSize;\n        updatePosition({ ...position, x: Math.max(newX, 0) }, true);\n        if (newX < 0) {\n            updateLiveText(formatMessage(messages.reachLeftEdge));\n        }\n    };\n\n    const moveRight = () => {\n        const maxX = width - cloudSize;\n        const newX = position.x + gridTrackSize;\n        updatePosition({ ...position, x: Math.min(newX, maxX) }, true);\n        if (newX > maxX) {\n            updateLiveText(formatMessage(messages.reachRightEdge));\n        }\n    };\n\n    const moveUp = () => {\n        const newY = position.y - gridTrackSize;\n        updatePosition({ ...position, y: Math.max(newY, 0) }, true);\n        if (newY < 0) {\n            updateLiveText(formatMessage(messages.reachTopEdge));\n        }\n    };\n\n    const moveDown = () => {\n        const maxY = height - cloudSize;\n        const newY = position.y + gridTrackSize;\n        updatePosition({ ...position, y: Math.min(newY, maxY) }, true);\n        if (newY > maxY) {\n            updateLiveText(formatMessage(messages.reachBottomEdge));\n        }\n    };\n\n    const handleSpacebar = () => {\n        const cloudStatusText = formatMessage(isMoving ? messages.cloudDropped : messages.cloudGrabbed);\n        const currentPositionText = formatMessage(messages.currentPosition, getGridPosition(position, gridTrackSize));\n        updateLiveText(`${cloudStatusText} ${currentPositionText}`, true);\n\n        if (isMoving) {\n            onDrop();\n        }\n\n        setIsMoving(!isMoving);\n    };\n\n    /**\n     * DragCloud keyboard event handler. Supports Up/Down/Left/Right arrow keys and Spacebar\n     * @param {KeyboardEvent} event - The drag event\n     * @returns {void}\n     */\n    const onKeyDown = event => {\n        if (disabled) {\n            return;\n        }\n\n        if (isMoving) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === ' ') {\n            handleSpacebar();\n        } else if (isMoving) {\n            switch (event.key) {\n                case 'ArrowUp':\n                    moveUp();\n                    break;\n                case 'ArrowDown':\n                    moveDown();\n                    break;\n                case 'ArrowLeft':\n                    moveLeft();\n                    break;\n                case 'ArrowRight':\n                    moveRight();\n                    break;\n                default:\n                    break;\n            }\n        }\n    };\n\n    /**\n     * Reset isMoving state when DragCloud loses focus\n     * @returns {void}\n     */\n    const onBlur = () => setIsMoving(false);\n\n    /**\n     * DragCloud drag event handler. Updates current position.\n     * @param {MouseEvent} e - The drag event\n     * @param {object} { x, y } - Object which contains x and y coordinate of the drag event.\n     * @returns {void}\n     */\n    const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });\n\n    return (\n        <Draggable\n            nodeRef={nodeRef}\n            bounds=\"parent\"\n            disabled={disabled}\n            onDrag={onDrag}\n            onStop={onDrop}\n            position={position}\n        >\n            <div\n                ref={nodeRef}\n                className={dragCloudClasses}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <IconCloud\n                    filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}\n                    height={cloudSize}\n                    title={formatMessage(messages.cloudObject)}\n                    width={cloudSize}\n                />\n            </div>\n        </Draggable>\n    );\n};\n\nDragCloud.displayName = 'DragCloud';\n\nDragCloud.propTypes = {\n    cloudSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    gameBoardSize: PropTypes.objectOf(PropTypes.number),\n    gridTrackSize: PropTypes.number,\n    intl: PropTypes.any,\n    position: PropTypes.objectOf(PropTypes.number).isRequired,\n    onDrop: PropTypes.func,\n    updateLiveText: PropTypes.func,\n    updatePosition: PropTypes.func,\n};\n\n// Actual export\nexport { DragCloud as DragCloudBase };\nexport default injectIntl(DragCloud);\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "25.1.0-beta.2",
+    "version": "25.1.0-beta.3",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -260,7 +260,7 @@
         "react-docgen-typescript": "^1.16.1",
         "react-docgen-typescript-loader": "^3.6.0",
         "react-dom": "^18.3.1",
-        "react-draggable": "^4.4.6",
+        "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": "^6.6.8",
         "react-measure": "^2.3.0",
@@ -341,7 +341,7 @@
         "react-aria-components": "^1.10.1",
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^17.0.1 || ^18.0.0",
-        "react-draggable": "^4.4.6",
+        "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
         "react-measure": "^2.3.0",

package/src/features/security-cloud-game/DragCloud.js

@@ -33,6 +33,7 @@ const DragCloud = ({
     updateLiveText,
     updatePosition,
 }) => {
+    const nodeRef = React.useRef({});
     const [isMoving, setIsMoving] = useState(false);
 
     const dragCloudClasses = classNames('bdl-DragCloud', {
@@ -137,8 +138,22 @@ const DragCloud = ({
     const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });
 
     return (
-        <Draggable bounds="parent" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>
-            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role="button" tabIndex={0}>
+        <Draggable
+            nodeRef={nodeRef}
+            bounds="parent"
+            disabled={disabled}
+            onDrag={onDrag}
+            onStop={onDrop}
+            position={position}
+        >
+            <div
+                ref={nodeRef}
+                className={dragCloudClasses}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                role="button"
+                tabIndex={0}
+            >
                 <IconCloud
                     filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}
                     height={cloudSize}