box-ui-elements 18.0.0-beta.1 → 18.0.0-beta.2

package/es/components/draggable-list/DraggableList.js

@@ -18,7 +18,7 @@ var DraggableList = function DraggableList(_ref) {
     return React.createElement("div", {
       ref: droppableProvided.innerRef,
       className: className
-    }, children);
+    }, children, droppableProvided.placeholder);
   }));
 };
 

package/es/components/draggable-list/DraggableList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/draggable-list/DraggableList.tsx"],"names":["React","DragDropContext","Droppable","DraggableList","children","className","listId","onDragEnd","result","destinationIndex","destination","index","source","droppableProvided","innerRef"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,qBAA3C;AAEA,OAAO,sBAAP;;AASA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAoE;AAAA,MAAjEC,QAAiE,QAAjEA,QAAiE;AAAA,MAAvDC,SAAuD,QAAvDA,SAAuD;AAAA,MAA5CC,MAA4C,QAA5CA,MAA4C;AAAA,MAApCC,UAAoC,QAApCA,SAAoC;AACtF,SACI,oBAAC,eAAD;AACI,IAAA,SAAS,EAAE,mBAAAC,MAAM,EAAI;AACjB,UAAMC,gBAAgB,GAAGD,MAAM,CAACE,WAAP,GAAqBF,MAAM,CAACE,WAAP,CAAmBC,KAAxC,GAAgDH,MAAM,CAACI,MAAP,CAAcD,KAAvF;AACA,aAAOJ,UAAS,CAACC,MAAM,CAACI,MAAP,CAAcD,KAAf,EAAsBF,gBAAtB,CAAhB;AACH;AAJL,KAMI,oBAAC,SAAD;AAAW,IAAA,WAAW,EAAEH;AAAxB,KACK,UAAAO,iBAAiB;AAAA,WACd;AAAK,MAAA,GAAG,EAAEA,iBAAiB,CAACC,QAA5B;AAAsC,MAAA,SAAS,EAAET;AAAjD,OACKD,QADL,CADc;AAAA,GADtB,CANJ,CADJ;AAgBH,CAjBD;;AAmBA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\n\nimport './DraggableList.scss';\n\nexport interface DraggableListProps {\n    children: React.ReactNode;\n    className?: string;\n    listId: string;\n    onDragEnd: (sourceIndex: number, destinationIndex: number) => void;\n}\n\nconst DraggableList = ({ children, className, listId, onDragEnd }: DraggableListProps) => {\n    return (\n        <DragDropContext\n            onDragEnd={result => {\n                const destinationIndex = result.destination ? result.destination.index : result.source.index;\n                return onDragEnd(result.source.index, destinationIndex);\n            }}\n        >\n            <Droppable droppableId={listId}>\n                {droppableProvided => (\n                    <div ref={droppableProvided.innerRef} className={className}>\n                        {children}\n                    </div>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n\nexport default DraggableList;\n"],"file":"DraggableList.js"}
+{"version":3,"sources":["../../../src/components/draggable-list/DraggableList.tsx"],"names":["React","DragDropContext","Droppable","DraggableList","children","className","listId","onDragEnd","result","destinationIndex","destination","index","source","droppableProvided","innerRef","placeholder"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,qBAA3C;AAEA,OAAO,sBAAP;;AASA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAoE;AAAA,MAAjEC,QAAiE,QAAjEA,QAAiE;AAAA,MAAvDC,SAAuD,QAAvDA,SAAuD;AAAA,MAA5CC,MAA4C,QAA5CA,MAA4C;AAAA,MAApCC,UAAoC,QAApCA,SAAoC;AACtF,SACI,oBAAC,eAAD;AACI,IAAA,SAAS,EAAE,mBAAAC,MAAM,EAAI;AACjB,UAAMC,gBAAgB,GAAGD,MAAM,CAACE,WAAP,GAAqBF,MAAM,CAACE,WAAP,CAAmBC,KAAxC,GAAgDH,MAAM,CAACI,MAAP,CAAcD,KAAvF;AACA,aAAOJ,UAAS,CAACC,MAAM,CAACI,MAAP,CAAcD,KAAf,EAAsBF,gBAAtB,CAAhB;AACH;AAJL,KAMI,oBAAC,SAAD;AAAW,IAAA,WAAW,EAAEH;AAAxB,KACK,UAAAO,iBAAiB;AAAA,WACd;AAAK,MAAA,GAAG,EAAEA,iBAAiB,CAACC,QAA5B;AAAsC,MAAA,SAAS,EAAET;AAAjD,OACKD,QADL,EAEKS,iBAAiB,CAACE,WAFvB,CADc;AAAA,GADtB,CANJ,CADJ;AAiBH,CAlBD;;AAoBA,eAAeZ,aAAf","sourcesContent":["import * as React from 'react';\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\n\nimport './DraggableList.scss';\n\nexport interface DraggableListProps {\n    children: React.ReactNode;\n    className?: string;\n    listId: string;\n    onDragEnd: (sourceIndex: number, destinationIndex: number) => void;\n}\n\nconst DraggableList = ({ children, className, listId, onDragEnd }: DraggableListProps) => {\n    return (\n        <DragDropContext\n            onDragEnd={result => {\n                const destinationIndex = result.destination ? result.destination.index : result.source.index;\n                return onDragEnd(result.source.index, destinationIndex);\n            }}\n        >\n            <Droppable droppableId={listId}>\n                {droppableProvided => (\n                    <div ref={droppableProvided.innerRef} className={className}>\n                        {children}\n                        {droppableProvided.placeholder}\n                    </div>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n\nexport default DraggableList;\n"],"file":"DraggableList.js"}

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

@@ -134,8 +134,10 @@ var DragCloud = function DragCloud(_ref) {
       return;
     }
 
-    event.preventDefault();
-    event.stopPropagation();
+    if (isMoving) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
 
     if (event.key === ' ') {
       handleSpacebar();

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

@@ -95,8 +95,10 @@ const DragCloud = ({
             return;
         }
 
-        event.preventDefault();
-        event.stopPropagation();
+        if (isMoving) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
 
         if (event.key === ' ') {
             handleSpacebar();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","formatMessage","intl","onDrop","position","updateLiveText","updatePosition","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","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","id","definition","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"mappings":"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","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        event.preventDefault();\n        event.stopPropagation();\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"],"file":"DragCloud.js"}
+{"version":3,"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","formatMessage","intl","onDrop","position","updateLiveText","updatePosition","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","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","id","definition","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"mappings":"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","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"],"file":"DragCloud.js"}

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

@@ -9,15 +9,15 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import PropTypes from 'prop-types';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import FocusTrap from '../../components/focus-trap';
+import Tooltip from '../../components/tooltip';
 import DragCloud from './DragCloud';
 import DropCloud from './DropCloud';
 import messages from './messages';
 import { checkOverlap, getGridPosition, getRandomCloudPosition } from './utils';
 import './SecurityCloudGame.scss'; // pick these numbers to balance accessibility and game complexity
 
-var CLOUD_SIZE_RATIO = 5;
-var GRID_TRACK_SIZE_RATIO = 20;
+var CLOUD_SIZE_RATIO = 4;
+var GRID_TRACK_SIZE_RATIO = 16;
 
 var SecurityCloudGame = function SecurityCloudGame(_ref) {
   var height = _ref.height,
@@ -73,7 +73,6 @@ var SecurityCloudGame = function SecurityCloudGame(_ref) {
       cloudSize: minGameBoardLength / CLOUD_SIZE_RATIO,
       gridTrackSize: minGameBoardLength / GRID_TRACK_SIZE_RATIO
     });
-    messageElement.focus();
   }, [height, width]);
   useEffect(function () {
     if (!gameBoardHeight) {
@@ -244,7 +243,7 @@ var SecurityCloudGame = function SecurityCloudGame(_ref) {
    */
 
 
-  return React.createElement(FocusTrap, null, React.createElement("div", {
+  return React.createElement("div", null, React.createElement("div", {
     className: "bdl-SecurityCloudGame-liveText",
     "aria-live": "polite"
   }, liveText), React.createElement("div", {
@@ -253,12 +252,17 @@ var SecurityCloudGame = function SecurityCloudGame(_ref) {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")
     }
+  }, React.createElement(Tooltip, {
+    ariaHidden: true,
+    className: "bdl-SecurityCloudGame-tooltip",
+    constrainToWindow: false,
+    position: "bottom-center",
+    text: renderMessage()
   }, React.createElement("div", {
     ref: messageElementRef,
     className: "bdl-SecurityCloudGame-message",
-    "aria-label": getAccessibilityInstructions(),
-    tabIndex: -1
-  }, renderMessage()), React.createElement("div", {
+    "aria-label": getAccessibilityInstructions()
+  }, renderMessage())), React.createElement("div", {
     className: "bdl-SecurityCloudGame-board"
   }, renderDropCloud(), renderDragCloud())));
 };

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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-import FocusTrap from '../../components/focus-trap';
+import Tooltip from '../../components/tooltip';
 
 import DragCloud from './DragCloud';
 import DropCloud from './DropCloud';
@@ -12,8 +12,8 @@ import { checkOverlap, getGridPosition, getRandomCloudPosition } from './utils';
 import './SecurityCloudGame.scss';
 
 // pick these numbers to balance accessibility and game complexity
-const CLOUD_SIZE_RATIO = 5;
-const GRID_TRACK_SIZE_RATIO = 20;
+const CLOUD_SIZE_RATIO = 4;
+const GRID_TRACK_SIZE_RATIO = 16;
 
 const SecurityCloudGame = ({ height, intl: { formatMessage }, onValidDrop, width }) => {
     const [dropCloudPosition, setDropCloudPosition] = useState(null);
@@ -42,8 +42,6 @@ const SecurityCloudGame = ({ height, intl: { formatMessage }, onValidDrop, width
             cloudSize: minGameBoardLength / CLOUD_SIZE_RATIO,
             gridTrackSize: minGameBoardLength / GRID_TRACK_SIZE_RATIO,
         });
-
-        messageElement.focus();
     }, [height, width]);
 
     useEffect(() => {
@@ -202,25 +200,32 @@ const SecurityCloudGame = ({ height, intl: { formatMessage }, onValidDrop, width
      * @returns {JSX}
      */
     return (
-        <FocusTrap>
+        <div>
             <div className="bdl-SecurityCloudGame-liveText" aria-live="polite">
                 {liveText}
             </div>
             <div className="bdl-SecurityCloudGame" style={{ height: `${height}px`, width: `${width}px` }}>
-                <div
-                    ref={messageElementRef}
-                    className="bdl-SecurityCloudGame-message"
-                    aria-label={getAccessibilityInstructions()}
-                    tabIndex={-1}
+                <Tooltip
+                    ariaHidden
+                    className="bdl-SecurityCloudGame-tooltip"
+                    constrainToWindow={false}
+                    position="bottom-center"
+                    text={renderMessage()}
                 >
-                    {renderMessage()}
-                </div>
+                    <div
+                        ref={messageElementRef}
+                        className="bdl-SecurityCloudGame-message"
+                        aria-label={getAccessibilityInstructions()}
+                    >
+                        {renderMessage()}
+                    </div>
+                </Tooltip>
                 <div className="bdl-SecurityCloudGame-board">
                     {renderDropCloud()}
                     {renderDragCloud()}
                 </div>
             </div>
-        </FocusTrap>
+        </div>
     );
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/security-cloud-game/SecurityCloudGame.js"],"names":["PropTypes","React","useEffect","useLayoutEffect","useRef","useState","FormattedMessage","injectIntl","FocusTrap","DragCloud","DropCloud","messages","checkOverlap","getGridPosition","getRandomCloudPosition","CLOUD_SIZE_RATIO","GRID_TRACK_SIZE_RATIO","SecurityCloudGame","height","formatMessage","intl","onValidDrop","width","dropCloudPosition","setDropCloudPosition","dragCloudPosition","setDragCloudPosition","layout","setLayout","liveText","setLiveText","isOverlap","setIsOverlap","isValidDrop","setIsValidDrop","messageElementRef","gameBoardSizeRef","cloudSize","gameBoardHeight","gridTrackSize","messageElement","current","newGameBoardHeight","getBoundingClientRect","minGameBoardLength","Math","min","focus","prevHeight","prevWidth","heightRatio","widthRatio","newDropCloudPosition","prevPos","x","y","nextPos","updateLiveText","text","includeTargetPosition","targetPositionText","targetPosition","onDrop","success","updatePosition","newPosition","shouldUpdateLiveText","hasOverlap","newliveText","targetInRange","currentPosition","getAccessibilityInstructions","accessibilityInstructions","renderDropCloud","renderDragCloud","gameBoardSize","renderMessage","instructions","displayName","propTypes","number","isRequired","any","func","SecurityCloudGameBase"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\n\nimport FocusTrap from '../../components/focus-trap';\n\nimport DragCloud from './DragCloud';\nimport DropCloud from './DropCloud';\nimport messages from './messages';\nimport { checkOverlap, getGridPosition, getRandomCloudPosition } from './utils';\n\nimport './SecurityCloudGame.scss';\n\n// pick these numbers to balance accessibility and game complexity\nconst CLOUD_SIZE_RATIO = 5;\nconst GRID_TRACK_SIZE_RATIO = 20;\n\nconst SecurityCloudGame = ({ height, intl: { formatMessage }, onValidDrop, width }) => {\n    const [dropCloudPosition, setDropCloudPosition] = useState(null);\n    const [dragCloudPosition, setDragCloudPosition] = useState(null);\n    const [layout, setLayout] = useState({});\n    // game interaction states\n    const [liveText, setLiveText] = useState('');\n    const [isOverlap, setIsOverlap] = useState(false);\n    const [isValidDrop, setIsValidDrop] = useState(false);\n\n    const messageElementRef = useRef();\n    // to handle resize events\n    const gameBoardSizeRef = useRef({});\n\n    const { cloudSize, gameBoardHeight, gridTrackSize } = layout;\n\n    useLayoutEffect(() => {\n        const { current: messageElement } = messageElementRef;\n        const newGameBoardHeight = height - messageElement.getBoundingClientRect().height;\n        // guardrail to prevent further rendering if the game board height is not positive\n        if (newGameBoardHeight <= 0) return;\n\n        const minGameBoardLength = Math.min(newGameBoardHeight, width);\n        setLayout({\n            gameBoardHeight: newGameBoardHeight,\n            cloudSize: minGameBoardLength / CLOUD_SIZE_RATIO,\n            gridTrackSize: minGameBoardLength / GRID_TRACK_SIZE_RATIO,\n        });\n\n        messageElement.focus();\n    }, [height, width]);\n\n    useEffect(() => {\n        if (!gameBoardHeight) {\n            return;\n        }\n\n        const { height: prevHeight, width: prevWidth } = gameBoardSizeRef.current;\n        const heightRatio = prevHeight ? gameBoardHeight / prevHeight : 1;\n        const widthRatio = prevWidth ? width / prevWidth : 1;\n\n        // declare and update this variable first in order to generate the starting position for drag cloud\n        let newDropCloudPosition;\n        // use prevState => {} to avoid referencing and updating the state at the same time\n        setDropCloudPosition(prevPos => {\n            newDropCloudPosition = prevPos\n                ? { x: prevPos.x * widthRatio, y: prevPos.y * heightRatio } // on board resize\n                : getRandomCloudPosition(cloudSize, gameBoardHeight, width); // initial render\n            return newDropCloudPosition;\n        });\n        setDragCloudPosition(prevPos => {\n            // on board resize\n            if (prevPos) {\n                return { x: prevPos.x * widthRatio, y: prevPos.y * heightRatio };\n            }\n            let nextPos = getRandomCloudPosition(cloudSize, gameBoardHeight, width);\n            // keep generating new random position until there is no overlap\n            while (checkOverlap(nextPos, newDropCloudPosition, cloudSize)) {\n                nextPos = getRandomCloudPosition(cloudSize, gameBoardHeight, width);\n            }\n            return nextPos;\n        });\n\n        // update previous height and width for ratio calculation\n        gameBoardSizeRef.current = { height: gameBoardHeight, width };\n    }, [cloudSize, gameBoardHeight, width]);\n\n    /**\n     * Update real-time instructional messages for screen reader users.\n     * @param {string}} text - assistive text for screen readers\n     * @param {boolean} includeTargetPosition - if target/drop cloud position should be included\n     */\n    const updateLiveText = (text, includeTargetPosition = false) => {\n        if (includeTargetPosition) {\n            const targetPositionText = formatMessage(\n                messages.targetPosition,\n                getGridPosition(dropCloudPosition, gridTrackSize),\n            );\n            text += ` ${targetPositionText}`;\n        }\n\n        setLiveText(text);\n    };\n\n    /**\n     * DragCloud drop event handler. Checks if it's valid drop and handles valid drop if it is.\n     * @returns {void}\n     */\n    const onDrop = () => {\n        if (isOverlap) {\n            setIsValidDrop(true);\n            updateLiveText(formatMessage(messages.success));\n\n            if (onValidDrop) {\n                // call onValidDrop if passed in through props\n                onValidDrop();\n            }\n        }\n    };\n\n    /**\n     * Pass along to the drag cloud to set position on moving.\n     * @param {number} newPosition - new drag cloud position\n     * @param {boolean} shouldUpdateLiveText - default to false\n     * @returns {void}\n     */\n    const updatePosition = (newPosition, shouldUpdateLiveText = false) => {\n        setDragCloudPosition(newPosition);\n        const hasOverlap = checkOverlap(newPosition, dropCloudPosition, cloudSize);\n        setIsOverlap(hasOverlap);\n\n        if (shouldUpdateLiveText) {\n            const newliveText = hasOverlap\n                ? formatMessage(messages.targetInRange)\n                : formatMessage(messages.currentPosition, getGridPosition(newPosition, gridTrackSize));\n            updateLiveText(newliveText, !hasOverlap);\n        }\n    };\n\n    /**\n     * Get aria label for the message element.\n     * @returns {string|undefined}\n     */\n    const getAccessibilityInstructions = () =>\n        gameBoardHeight &&\n        cloudSize &&\n        gridTrackSize &&\n        formatMessage(\n            messages.accessibilityInstructions,\n            getGridPosition({ x: width - cloudSize, y: gameBoardHeight - cloudSize }, gridTrackSize),\n        );\n\n    /**\n     * Renders the drop cloud.\n     * @returns {JSX}\n     */\n    const renderDropCloud = () => {\n        if (dropCloudPosition && !isValidDrop) {\n            return (\n                <DropCloud className={isOverlap ? 'is-over' : ''} cloudSize={cloudSize} position={dropCloudPosition} />\n            );\n        }\n\n        return null;\n    };\n\n    /**\n     * Renders the drag cloud.\n     * @returns {JSX}\n     */\n    const renderDragCloud = () => {\n        const { current: gameBoardSize } = gameBoardSizeRef;\n\n        if (dragCloudPosition) {\n            return (\n                <DragCloud\n                    cloudSize={cloudSize}\n                    disabled={isValidDrop}\n                    gameBoardSize={gameBoardSize}\n                    gridTrackSize={gridTrackSize}\n                    onDrop={onDrop}\n                    position={dragCloudPosition}\n                    updateLiveText={updateLiveText}\n                    updatePosition={updatePosition}\n                />\n            );\n        }\n\n        return null;\n    };\n\n    /**\n     * Renders the message shown to the user\n     * @returns {JSX}\n     */\n    const renderMessage = () => {\n        if (isValidDrop) {\n            return <FormattedMessage {...messages.success} />;\n        }\n\n        return <FormattedMessage {...messages.instructions} />;\n    };\n\n    /**\n     * Renders the cloud game\n     * @returns {JSX}\n     */\n    return (\n        <FocusTrap>\n            <div className=\"bdl-SecurityCloudGame-liveText\" aria-live=\"polite\">\n                {liveText}\n            </div>\n            <div className=\"bdl-SecurityCloudGame\" style={{ height: `${height}px`, width: `${width}px` }}>\n                <div\n                    ref={messageElementRef}\n                    className=\"bdl-SecurityCloudGame-message\"\n                    aria-label={getAccessibilityInstructions()}\n                    tabIndex={-1}\n                >\n                    {renderMessage()}\n                </div>\n                <div className=\"bdl-SecurityCloudGame-board\">\n                    {renderDropCloud()}\n                    {renderDragCloud()}\n                </div>\n            </div>\n        </FocusTrap>\n    );\n};\n\nSecurityCloudGame.displayName = 'SecurityCloudGame';\n\nSecurityCloudGame.propTypes = {\n    /** Height to set the game to */\n    height: PropTypes.number.isRequired,\n    /* Intl object */\n    intl: PropTypes.any,\n    /** Function to call when the `DragCloud` is successfully dropped onto the `DropCloud` */\n    onValidDrop: PropTypes.func,\n    /** Width to set the game to */\n    width: PropTypes.number.isRequired,\n};\n\nexport { SecurityCloudGame as SecurityCloudGameBase };\nexport default injectIntl(SecurityCloudGame);\n"],"file":"SecurityCloudGame.js"}
+{"version":3,"sources":["../../../src/features/security-cloud-game/SecurityCloudGame.js"],"names":["PropTypes","React","useEffect","useLayoutEffect","useRef","useState","FormattedMessage","injectIntl","Tooltip","DragCloud","DropCloud","messages","checkOverlap","getGridPosition","getRandomCloudPosition","CLOUD_SIZE_RATIO","GRID_TRACK_SIZE_RATIO","SecurityCloudGame","height","formatMessage","intl","onValidDrop","width","dropCloudPosition","setDropCloudPosition","dragCloudPosition","setDragCloudPosition","layout","setLayout","liveText","setLiveText","isOverlap","setIsOverlap","isValidDrop","setIsValidDrop","messageElementRef","gameBoardSizeRef","cloudSize","gameBoardHeight","gridTrackSize","messageElement","current","newGameBoardHeight","getBoundingClientRect","minGameBoardLength","Math","min","prevHeight","prevWidth","heightRatio","widthRatio","newDropCloudPosition","prevPos","x","y","nextPos","updateLiveText","text","includeTargetPosition","targetPositionText","targetPosition","onDrop","success","updatePosition","newPosition","shouldUpdateLiveText","hasOverlap","newliveText","targetInRange","currentPosition","getAccessibilityInstructions","accessibilityInstructions","renderDropCloud","renderDragCloud","gameBoardSize","renderMessage","instructions","displayName","propTypes","number","isRequired","any","func","SecurityCloudGameBase"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\n\nimport Tooltip from '../../components/tooltip';\n\nimport DragCloud from './DragCloud';\nimport DropCloud from './DropCloud';\nimport messages from './messages';\nimport { checkOverlap, getGridPosition, getRandomCloudPosition } from './utils';\n\nimport './SecurityCloudGame.scss';\n\n// pick these numbers to balance accessibility and game complexity\nconst CLOUD_SIZE_RATIO = 4;\nconst GRID_TRACK_SIZE_RATIO = 16;\n\nconst SecurityCloudGame = ({ height, intl: { formatMessage }, onValidDrop, width }) => {\n    const [dropCloudPosition, setDropCloudPosition] = useState(null);\n    const [dragCloudPosition, setDragCloudPosition] = useState(null);\n    const [layout, setLayout] = useState({});\n    // game interaction states\n    const [liveText, setLiveText] = useState('');\n    const [isOverlap, setIsOverlap] = useState(false);\n    const [isValidDrop, setIsValidDrop] = useState(false);\n\n    const messageElementRef = useRef();\n    // to handle resize events\n    const gameBoardSizeRef = useRef({});\n\n    const { cloudSize, gameBoardHeight, gridTrackSize } = layout;\n\n    useLayoutEffect(() => {\n        const { current: messageElement } = messageElementRef;\n        const newGameBoardHeight = height - messageElement.getBoundingClientRect().height;\n        // guardrail to prevent further rendering if the game board height is not positive\n        if (newGameBoardHeight <= 0) return;\n\n        const minGameBoardLength = Math.min(newGameBoardHeight, width);\n        setLayout({\n            gameBoardHeight: newGameBoardHeight,\n            cloudSize: minGameBoardLength / CLOUD_SIZE_RATIO,\n            gridTrackSize: minGameBoardLength / GRID_TRACK_SIZE_RATIO,\n        });\n    }, [height, width]);\n\n    useEffect(() => {\n        if (!gameBoardHeight) {\n            return;\n        }\n\n        const { height: prevHeight, width: prevWidth } = gameBoardSizeRef.current;\n        const heightRatio = prevHeight ? gameBoardHeight / prevHeight : 1;\n        const widthRatio = prevWidth ? width / prevWidth : 1;\n\n        // declare and update this variable first in order to generate the starting position for drag cloud\n        let newDropCloudPosition;\n        // use prevState => {} to avoid referencing and updating the state at the same time\n        setDropCloudPosition(prevPos => {\n            newDropCloudPosition = prevPos\n                ? { x: prevPos.x * widthRatio, y: prevPos.y * heightRatio } // on board resize\n                : getRandomCloudPosition(cloudSize, gameBoardHeight, width); // initial render\n            return newDropCloudPosition;\n        });\n        setDragCloudPosition(prevPos => {\n            // on board resize\n            if (prevPos) {\n                return { x: prevPos.x * widthRatio, y: prevPos.y * heightRatio };\n            }\n            let nextPos = getRandomCloudPosition(cloudSize, gameBoardHeight, width);\n            // keep generating new random position until there is no overlap\n            while (checkOverlap(nextPos, newDropCloudPosition, cloudSize)) {\n                nextPos = getRandomCloudPosition(cloudSize, gameBoardHeight, width);\n            }\n            return nextPos;\n        });\n\n        // update previous height and width for ratio calculation\n        gameBoardSizeRef.current = { height: gameBoardHeight, width };\n    }, [cloudSize, gameBoardHeight, width]);\n\n    /**\n     * Update real-time instructional messages for screen reader users.\n     * @param {string}} text - assistive text for screen readers\n     * @param {boolean} includeTargetPosition - if target/drop cloud position should be included\n     */\n    const updateLiveText = (text, includeTargetPosition = false) => {\n        if (includeTargetPosition) {\n            const targetPositionText = formatMessage(\n                messages.targetPosition,\n                getGridPosition(dropCloudPosition, gridTrackSize),\n            );\n            text += ` ${targetPositionText}`;\n        }\n\n        setLiveText(text);\n    };\n\n    /**\n     * DragCloud drop event handler. Checks if it's valid drop and handles valid drop if it is.\n     * @returns {void}\n     */\n    const onDrop = () => {\n        if (isOverlap) {\n            setIsValidDrop(true);\n            updateLiveText(formatMessage(messages.success));\n\n            if (onValidDrop) {\n                // call onValidDrop if passed in through props\n                onValidDrop();\n            }\n        }\n    };\n\n    /**\n     * Pass along to the drag cloud to set position on moving.\n     * @param {number} newPosition - new drag cloud position\n     * @param {boolean} shouldUpdateLiveText - default to false\n     * @returns {void}\n     */\n    const updatePosition = (newPosition, shouldUpdateLiveText = false) => {\n        setDragCloudPosition(newPosition);\n        const hasOverlap = checkOverlap(newPosition, dropCloudPosition, cloudSize);\n        setIsOverlap(hasOverlap);\n\n        if (shouldUpdateLiveText) {\n            const newliveText = hasOverlap\n                ? formatMessage(messages.targetInRange)\n                : formatMessage(messages.currentPosition, getGridPosition(newPosition, gridTrackSize));\n            updateLiveText(newliveText, !hasOverlap);\n        }\n    };\n\n    /**\n     * Get aria label for the message element.\n     * @returns {string|undefined}\n     */\n    const getAccessibilityInstructions = () =>\n        gameBoardHeight &&\n        cloudSize &&\n        gridTrackSize &&\n        formatMessage(\n            messages.accessibilityInstructions,\n            getGridPosition({ x: width - cloudSize, y: gameBoardHeight - cloudSize }, gridTrackSize),\n        );\n\n    /**\n     * Renders the drop cloud.\n     * @returns {JSX}\n     */\n    const renderDropCloud = () => {\n        if (dropCloudPosition && !isValidDrop) {\n            return (\n                <DropCloud className={isOverlap ? 'is-over' : ''} cloudSize={cloudSize} position={dropCloudPosition} />\n            );\n        }\n\n        return null;\n    };\n\n    /**\n     * Renders the drag cloud.\n     * @returns {JSX}\n     */\n    const renderDragCloud = () => {\n        const { current: gameBoardSize } = gameBoardSizeRef;\n\n        if (dragCloudPosition) {\n            return (\n                <DragCloud\n                    cloudSize={cloudSize}\n                    disabled={isValidDrop}\n                    gameBoardSize={gameBoardSize}\n                    gridTrackSize={gridTrackSize}\n                    onDrop={onDrop}\n                    position={dragCloudPosition}\n                    updateLiveText={updateLiveText}\n                    updatePosition={updatePosition}\n                />\n            );\n        }\n\n        return null;\n    };\n\n    /**\n     * Renders the message shown to the user\n     * @returns {JSX}\n     */\n    const renderMessage = () => {\n        if (isValidDrop) {\n            return <FormattedMessage {...messages.success} />;\n        }\n\n        return <FormattedMessage {...messages.instructions} />;\n    };\n\n    /**\n     * Renders the cloud game\n     * @returns {JSX}\n     */\n    return (\n        <div>\n            <div className=\"bdl-SecurityCloudGame-liveText\" aria-live=\"polite\">\n                {liveText}\n            </div>\n            <div className=\"bdl-SecurityCloudGame\" style={{ height: `${height}px`, width: `${width}px` }}>\n                <Tooltip\n                    ariaHidden\n                    className=\"bdl-SecurityCloudGame-tooltip\"\n                    constrainToWindow={false}\n                    position=\"bottom-center\"\n                    text={renderMessage()}\n                >\n                    <div\n                        ref={messageElementRef}\n                        className=\"bdl-SecurityCloudGame-message\"\n                        aria-label={getAccessibilityInstructions()}\n                    >\n                        {renderMessage()}\n                    </div>\n                </Tooltip>\n                <div className=\"bdl-SecurityCloudGame-board\">\n                    {renderDropCloud()}\n                    {renderDragCloud()}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nSecurityCloudGame.displayName = 'SecurityCloudGame';\n\nSecurityCloudGame.propTypes = {\n    /** Height to set the game to */\n    height: PropTypes.number.isRequired,\n    /* Intl object */\n    intl: PropTypes.any,\n    /** Function to call when the `DragCloud` is successfully dropped onto the `DropCloud` */\n    onValidDrop: PropTypes.func,\n    /** Width to set the game to */\n    width: PropTypes.number.isRequired,\n};\n\nexport { SecurityCloudGame as SecurityCloudGameBase };\nexport default injectIntl(SecurityCloudGame);\n"],"file":"SecurityCloudGame.js"}

package/es/features/security-cloud-game/SecurityCloudGame.scss

@@ -30,10 +30,14 @@
 
     .bdl-SecurityCloudGame-message {
         flex: none;
+        height: 40px;
         padding: 10px;
+        overflow: hidden;
         color: $white;
         font-size: 16px;
+        white-space: nowrap;
         text-align: center;
+        text-overflow: ellipsis;
         background-color: rgba(0, 0, 0, .1);
     }
 
@@ -49,6 +53,10 @@
     left: -9999px;
 }
 
+.bdl-SecurityCloudGame-tooltip.bdl-Tooltip {
+    max-width: 100%;
+}
+
 .bdl-DragCloud {
     position: absolute;
     cursor: move;

package/es/features/virtualized-table/DraggableVirtualizedTable.js

@@ -72,7 +72,7 @@ var DraggableVirtualizedTable = function DraggableVirtualizedTable(_ref) {
       flexGrow: 0,
       headerClassName: "bdl-DraggableVirtualizedTable-dragHandleColumn",
       width: ICON_SIZE
-    }), children));
+    }), children), droppableProvided.placeholder);
   }));
 };
 

package/es/features/virtualized-table/DraggableVirtualizedTable.js.flow

@@ -74,6 +74,7 @@ const DraggableVirtualizedTable = ({
                             )}
                             {children}
                         </VirtualizedTable>
+                        {droppableProvided.placeholder}
                     </div>
                 )}
             </Droppable>

package/es/features/virtualized-table/DraggableVirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/virtualized-table/DraggableVirtualizedTable.js"],"names":["React","noop","classNames","Column","DragDropContext","Droppable","bdlGray","IconDrag","draggableRowRenderer","VIRTUALIZED_TABLE_DEFAULTS","VirtualizedTable","HEADER_HEIGHT","ROW_HEIGHT","ICON_SIZE","DraggableVirtualizedTable","children","className","onDragEnd","rowData","shouldShowDragHandle","tableId","rest","tableClassName","draggableCellRenderer","tableHeight","length","handleDragEnd","destination","source","destinationIndex","index","droppableProvided","innerRef","displayName","defaultProps"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,QAAuB,4CAAvB;AACA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,qBAA3C;AAKA,SAASC,OAAT,QAAwB,wBAAxB;AACA,OAAOC,QAAP,MAAqB,8BAArB;AACA,SAASC,oBAAT,QAAqC,gCAArC;AAEA,SAASC,0BAAT,QAA2C,aAA3C;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AAEA,OAAO,kCAAP;IAEQC,a,GAA8BF,0B,CAA9BE,a;IAAeC,U,GAAeH,0B,CAAfG,U;AACvB,IAAMC,SAAS,GAAG,EAAlB;;AAQA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,OAQrB;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,SAMS,QANTA,SAMS;AAAA,MALTC,SAKS,QALTA,SAKS;AAAA,MAJTC,OAIS,QAJTA,OAIS;AAAA,MAHTC,oBAGS,QAHTA,oBAGS;AAAA,MAFTC,OAES,QAFTA,OAES;AAAA,MADNC,IACM;;AACT,MAAMC,cAAc,GAAGpB,UAAU,CAAC,+BAAD,EAAkCc,SAAlC,CAAjC;;AACA,MAAMO,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,WAAM,oBAAC,QAAD;AAAU,MAAA,KAAK,EAAEjB,OAAjB;AAA0B,MAAA,MAAM,EAAEO,SAAlC;AAA6C,MAAA,KAAK,EAAEA;AAApD,MAAN;AAAA,GAA9B,CAFS,CAGT;AACA;AACA;AACA;AACA;;;AACA,MAAMW,WAAW,GAAGN,OAAO,CAACO,MAAR,GAAiBb,UAAjB,GAA8BD,aAAlD;;AAEA,MAAMe,aAAa,GAAG,SAAhBA,aAAgB,QAA6B;AAAA,QAA1BC,WAA0B,SAA1BA,WAA0B;AAAA,QAAbC,MAAa,SAAbA,MAAa;AAC/C,QAAMC,gBAAgB,GAAGF,WAAW,GAAGA,WAAW,CAACG,KAAf,GAAuBF,MAAM,CAACE,KAAlE;AACA,WAAOb,SAAS,CAACW,MAAM,CAACE,KAAR,EAAeD,gBAAf,CAAhB;AACH,GAHD;;AAKA,SACI,oBAAC,eAAD;AAAiB,IAAA,SAAS,EAAEH;AAA5B,KACI,oBAAC,SAAD;AAAW,IAAA,WAAW,EAAEN;AAAxB,KACK,UAACW,iBAAD;AAAA,WACG;AAAK,MAAA,GAAG,EAAEA,iBAAiB,CAACC;AAA5B,OACI,oBAAC,gBAAD,eACQX,IADR;AAEI,MAAA,SAAS,EAAEC,cAFf;AAGI,MAAA,WAAW,EAAEd,oBAHjB;AAII,MAAA,MAAM,EAAEgB,WAJZ;AAKI,MAAA,OAAO,EAAEN;AALb,QAOKC,oBAAoB,IACjB,oBAAC,MAAD;AACI,MAAA,YAAY,EAAEI,qBADlB;AAEI,MAAA,SAAS,EAAC,gDAFd;AAGI,MAAA,OAAO,EAAC,YAHZ;AAII,MAAA,WAAW,MAJf;AAKI,MAAA,QAAQ,EAAE,CALd;AAMI,MAAA,eAAe,EAAC,gDANpB;AAOI,MAAA,KAAK,EAAEV;AAPX,MARR,EAkBKE,QAlBL,CADJ,CADH;AAAA,GADL,CADJ,CADJ;AA8BH,CArDD;;AAuDAD,yBAAyB,CAACmB,WAA1B,GAAwC,2BAAxC;AAEAnB,yBAAyB,CAACoB,YAA1B,GAAyC;AACrCjB,EAAAA,SAAS,EAAEhB,IAD0B;AAErCkB,EAAAA,oBAAoB,EAAE;AAFe,CAAzC;AAKA,eAAeL,yBAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { Column } from '@box/react-virtualized/dist/es/Table/index';\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\n\nimport type { DroppableProvided } from 'react-beautiful-dnd';\nimport type { VirtualizedTableProps } from './VirtualizedTable';\n\nimport { bdlGray } from '../../styles/variables';\nimport IconDrag from '../../icons/general/IconDrag';\nimport { draggableRowRenderer } from '../virtualized-table-renderers';\n\nimport { VIRTUALIZED_TABLE_DEFAULTS } from './constants';\nimport VirtualizedTable from './VirtualizedTable';\n\nimport './DraggableVirtualizedTable.scss';\n\nconst { HEADER_HEIGHT, ROW_HEIGHT } = VIRTUALIZED_TABLE_DEFAULTS;\nconst ICON_SIZE = 24;\n\ntype Props = VirtualizedTableProps & {\n    onDragEnd: (sourceIndex: number, destinationIndex: number) => void,\n    shouldShowDragHandle?: boolean,\n    tableId: string,\n};\n\nconst DraggableVirtualizedTable = ({\n    children,\n    className,\n    onDragEnd,\n    rowData,\n    shouldShowDragHandle,\n    tableId,\n    ...rest\n}: Props) => {\n    const tableClassName = classNames('bdl-DraggableVirtualizedTable', className);\n    const draggableCellRenderer = () => <IconDrag color={bdlGray} height={ICON_SIZE} width={ICON_SIZE} />;\n    // Virtualized table's performance optimizations can not be used here since\n    // all rows need to be rendered in order for drag and drop to work properly.\n    // From a UX perspective, it also doesn't make sense to have drag and drop on\n    // very large tables that actually require optimizations, so this component\n    // always forces the table to be tall enough to fit all rows\n    const tableHeight = rowData.length * ROW_HEIGHT + HEADER_HEIGHT;\n\n    const handleDragEnd = ({ destination, source }) => {\n        const destinationIndex = destination ? destination.index : source.index;\n        return onDragEnd(source.index, destinationIndex);\n    };\n\n    return (\n        <DragDropContext onDragEnd={handleDragEnd}>\n            <Droppable droppableId={tableId}>\n                {(droppableProvided: DroppableProvided) => (\n                    <div ref={droppableProvided.innerRef}>\n                        <VirtualizedTable\n                            {...rest}\n                            className={tableClassName}\n                            rowRenderer={draggableRowRenderer}\n                            height={tableHeight}\n                            rowData={rowData}\n                        >\n                            {shouldShowDragHandle && (\n                                <Column\n                                    cellRenderer={draggableCellRenderer}\n                                    className=\"bdl-DraggableVirtualizedTable-dragHandleColumn\"\n                                    dataKey=\"dragHandle\"\n                                    disableSort\n                                    flexGrow={0}\n                                    headerClassName=\"bdl-DraggableVirtualizedTable-dragHandleColumn\"\n                                    width={ICON_SIZE}\n                                />\n                            )}\n                            {children}\n                        </VirtualizedTable>\n                    </div>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n\nDraggableVirtualizedTable.displayName = 'DraggableVirtualizedTable';\n\nDraggableVirtualizedTable.defaultProps = {\n    onDragEnd: noop,\n    shouldShowDragHandle: true,\n};\n\nexport default DraggableVirtualizedTable;\n"],"file":"DraggableVirtualizedTable.js"}
+{"version":3,"sources":["../../../src/features/virtualized-table/DraggableVirtualizedTable.js"],"names":["React","noop","classNames","Column","DragDropContext","Droppable","bdlGray","IconDrag","draggableRowRenderer","VIRTUALIZED_TABLE_DEFAULTS","VirtualizedTable","HEADER_HEIGHT","ROW_HEIGHT","ICON_SIZE","DraggableVirtualizedTable","children","className","onDragEnd","rowData","shouldShowDragHandle","tableId","rest","tableClassName","draggableCellRenderer","tableHeight","length","handleDragEnd","destination","source","destinationIndex","index","droppableProvided","innerRef","placeholder","displayName","defaultProps"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,QAAuB,4CAAvB;AACA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,qBAA3C;AAKA,SAASC,OAAT,QAAwB,wBAAxB;AACA,OAAOC,QAAP,MAAqB,8BAArB;AACA,SAASC,oBAAT,QAAqC,gCAArC;AAEA,SAASC,0BAAT,QAA2C,aAA3C;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AAEA,OAAO,kCAAP;IAEQC,a,GAA8BF,0B,CAA9BE,a;IAAeC,U,GAAeH,0B,CAAfG,U;AACvB,IAAMC,SAAS,GAAG,EAAlB;;AAQA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,OAQrB;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,SAMS,QANTA,SAMS;AAAA,MALTC,SAKS,QALTA,SAKS;AAAA,MAJTC,OAIS,QAJTA,OAIS;AAAA,MAHTC,oBAGS,QAHTA,oBAGS;AAAA,MAFTC,OAES,QAFTA,OAES;AAAA,MADNC,IACM;;AACT,MAAMC,cAAc,GAAGpB,UAAU,CAAC,+BAAD,EAAkCc,SAAlC,CAAjC;;AACA,MAAMO,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,WAAM,oBAAC,QAAD;AAAU,MAAA,KAAK,EAAEjB,OAAjB;AAA0B,MAAA,MAAM,EAAEO,SAAlC;AAA6C,MAAA,KAAK,EAAEA;AAApD,MAAN;AAAA,GAA9B,CAFS,CAGT;AACA;AACA;AACA;AACA;;;AACA,MAAMW,WAAW,GAAGN,OAAO,CAACO,MAAR,GAAiBb,UAAjB,GAA8BD,aAAlD;;AAEA,MAAMe,aAAa,GAAG,SAAhBA,aAAgB,QAA6B;AAAA,QAA1BC,WAA0B,SAA1BA,WAA0B;AAAA,QAAbC,MAAa,SAAbA,MAAa;AAC/C,QAAMC,gBAAgB,GAAGF,WAAW,GAAGA,WAAW,CAACG,KAAf,GAAuBF,MAAM,CAACE,KAAlE;AACA,WAAOb,SAAS,CAACW,MAAM,CAACE,KAAR,EAAeD,gBAAf,CAAhB;AACH,GAHD;;AAKA,SACI,oBAAC,eAAD;AAAiB,IAAA,SAAS,EAAEH;AAA5B,KACI,oBAAC,SAAD;AAAW,IAAA,WAAW,EAAEN;AAAxB,KACK,UAACW,iBAAD;AAAA,WACG;AAAK,MAAA,GAAG,EAAEA,iBAAiB,CAACC;AAA5B,OACI,oBAAC,gBAAD,eACQX,IADR;AAEI,MAAA,SAAS,EAAEC,cAFf;AAGI,MAAA,WAAW,EAAEd,oBAHjB;AAII,MAAA,MAAM,EAAEgB,WAJZ;AAKI,MAAA,OAAO,EAAEN;AALb,QAOKC,oBAAoB,IACjB,oBAAC,MAAD;AACI,MAAA,YAAY,EAAEI,qBADlB;AAEI,MAAA,SAAS,EAAC,gDAFd;AAGI,MAAA,OAAO,EAAC,YAHZ;AAII,MAAA,WAAW,MAJf;AAKI,MAAA,QAAQ,EAAE,CALd;AAMI,MAAA,eAAe,EAAC,gDANpB;AAOI,MAAA,KAAK,EAAEV;AAPX,MARR,EAkBKE,QAlBL,CADJ,EAqBKgB,iBAAiB,CAACE,WArBvB,CADH;AAAA,GADL,CADJ,CADJ;AA+BH,CAtDD;;AAwDAnB,yBAAyB,CAACoB,WAA1B,GAAwC,2BAAxC;AAEApB,yBAAyB,CAACqB,YAA1B,GAAyC;AACrClB,EAAAA,SAAS,EAAEhB,IAD0B;AAErCkB,EAAAA,oBAAoB,EAAE;AAFe,CAAzC;AAKA,eAAeL,yBAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { Column } from '@box/react-virtualized/dist/es/Table/index';\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\n\nimport type { DroppableProvided } from 'react-beautiful-dnd';\nimport type { VirtualizedTableProps } from './VirtualizedTable';\n\nimport { bdlGray } from '../../styles/variables';\nimport IconDrag from '../../icons/general/IconDrag';\nimport { draggableRowRenderer } from '../virtualized-table-renderers';\n\nimport { VIRTUALIZED_TABLE_DEFAULTS } from './constants';\nimport VirtualizedTable from './VirtualizedTable';\n\nimport './DraggableVirtualizedTable.scss';\n\nconst { HEADER_HEIGHT, ROW_HEIGHT } = VIRTUALIZED_TABLE_DEFAULTS;\nconst ICON_SIZE = 24;\n\ntype Props = VirtualizedTableProps & {\n    onDragEnd: (sourceIndex: number, destinationIndex: number) => void,\n    shouldShowDragHandle?: boolean,\n    tableId: string,\n};\n\nconst DraggableVirtualizedTable = ({\n    children,\n    className,\n    onDragEnd,\n    rowData,\n    shouldShowDragHandle,\n    tableId,\n    ...rest\n}: Props) => {\n    const tableClassName = classNames('bdl-DraggableVirtualizedTable', className);\n    const draggableCellRenderer = () => <IconDrag color={bdlGray} height={ICON_SIZE} width={ICON_SIZE} />;\n    // Virtualized table's performance optimizations can not be used here since\n    // all rows need to be rendered in order for drag and drop to work properly.\n    // From a UX perspective, it also doesn't make sense to have drag and drop on\n    // very large tables that actually require optimizations, so this component\n    // always forces the table to be tall enough to fit all rows\n    const tableHeight = rowData.length * ROW_HEIGHT + HEADER_HEIGHT;\n\n    const handleDragEnd = ({ destination, source }) => {\n        const destinationIndex = destination ? destination.index : source.index;\n        return onDragEnd(source.index, destinationIndex);\n    };\n\n    return (\n        <DragDropContext onDragEnd={handleDragEnd}>\n            <Droppable droppableId={tableId}>\n                {(droppableProvided: DroppableProvided) => (\n                    <div ref={droppableProvided.innerRef}>\n                        <VirtualizedTable\n                            {...rest}\n                            className={tableClassName}\n                            rowRenderer={draggableRowRenderer}\n                            height={tableHeight}\n                            rowData={rowData}\n                        >\n                            {shouldShowDragHandle && (\n                                <Column\n                                    cellRenderer={draggableCellRenderer}\n                                    className=\"bdl-DraggableVirtualizedTable-dragHandleColumn\"\n                                    dataKey=\"dragHandle\"\n                                    disableSort\n                                    flexGrow={0}\n                                    headerClassName=\"bdl-DraggableVirtualizedTable-dragHandleColumn\"\n                                    width={ICON_SIZE}\n                                />\n                            )}\n                            {children}\n                        </VirtualizedTable>\n                        {droppableProvided.placeholder}\n                    </div>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n\nDraggableVirtualizedTable.displayName = 'DraggableVirtualizedTable';\n\nDraggableVirtualizedTable.defaultProps = {\n    onDragEnd: noop,\n    shouldShowDragHandle: true,\n};\n\nexport default DraggableVirtualizedTable;\n"],"file":"DraggableVirtualizedTable.js"}

package/i18n/bn-IN.js

@@ -82,7 +82,7 @@ export default {
   "be.contentSidebar.activityFeed.annotationActivityPageItem": "পৃষ্ঠা {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionLink": "সংস্করণ {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionUnavailable": "সংস্করণ অনুপলব্ধ রয়েছে",
-  "be.contentSidebar.activityFeed.comment.annotationBadge": "Annotation Badge",
+  "be.contentSidebar.activityFeed.comment.annotationBadge": "অ্যানোটেশন ব্যাজ",
   "be.contentSidebar.activityFeed.comment.commentDeleteMenuItem": "মুছুন",
   "be.contentSidebar.activityFeed.comment.commentDeletePrompt": "আপনি এই মন্তব্যটি স্থায়ীভাবে মুছতে নিশ্চিত?",
   "be.contentSidebar.activityFeed.comment.commentEditMenuItem": "সংশোধন করুন",
@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "অবৈধ ব্যবহারকারী",
   "boxui.validation.requiredError": "অবশ্যক ক্ষেত্র",
   "boxui.validation.tooLongError": "ইনপুট {max} টি অক্ষর অতিক্রম করতে পারবে না",
-  "boxui.validation.tooShortError": "ইনপুট অবশ্যই কমপক্ষে {min} টি অক্ষরের হতে হবে",
-  "boxui.securityControls.linkForMoreDetails": "আরও তথ্যের জন্য এখানে ক্লিক করুন।"
+  "boxui.validation.tooShortError": "ইনপুট অবশ্যই কমপক্ষে {min} টি অক্ষরের হতে হবে"
 }

package/i18n/bn-IN.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = পৃষ্ঠা {
 be.contentSidebar.activityFeed.annotationActivityVersionLink = সংস্করণ {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = সংস্করণ অনুপলব্ধ রয়েছে
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = অ্যানোটেশন ব্যাজ
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = মুছুন
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = বাহ্যিক ব্যবহ
 boxui.securityControls.externalCollabBlock = বাহ্যিক সহযোগিতা সীমাবদ্ধ রয়েছে।
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = বাহ্যিক সহযোগিতা অনুমোদিত ডোমেনে সীমিত।
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = আরও তথ্যের জন্য এখানে ক্লিক করুন।
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = বাহ্যিক ব্যবহারকারীদের জন্য মোবাইলে ডাউনলোড সীমাবদ্ধ রয়েছে।
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners

package/i18n/da-DK.js

@@ -82,7 +82,7 @@ export default {
   "be.contentSidebar.activityFeed.annotationActivityPageItem": "Side {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionLink": "Version {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionUnavailable": "Version er ikke tilgængelig",
-  "be.contentSidebar.activityFeed.comment.annotationBadge": "Annotation Badge",
+  "be.contentSidebar.activityFeed.comment.annotationBadge": "Badge til kommentarer",
   "be.contentSidebar.activityFeed.comment.commentDeleteMenuItem": "Slet",
   "be.contentSidebar.activityFeed.comment.commentDeletePrompt": "Er du sikker på, at du vil slette denne kommentar permanent?",
   "be.contentSidebar.activityFeed.comment.commentEditMenuItem": "Rediger",
@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "Ugyldig bruger",
   "boxui.validation.requiredError": "Obligatorisk felt",
   "boxui.validation.tooLongError": "Der må højst indtastes {max} tegn",
-  "boxui.validation.tooShortError": "Det indtastede skal være på mindst {min} tegn",
-  "boxui.securityControls.linkForMoreDetails": "Klik her for at få flere oplysninger."
+  "boxui.validation.tooShortError": "Det indtastede skal være på mindst {min} tegn"
 }

package/i18n/da-DK.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = Side {number}
 be.contentSidebar.activityFeed.annotationActivityVersionLink = Version {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = Version er ikke tilgængelig
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = Badge til kommentarer
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = Slet
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = Download er begrænset på Box Drive f
 boxui.securityControls.externalCollabBlock = Eksternt samarbejde er begrænset.
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = Eksternt samarbejde er begrænset til godkendte domæner.
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = Klik her for at få flere oplysninger.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = Download er begrænset på mobil for eksterne brugere.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners

package/i18n/de-DE.js

@@ -82,7 +82,7 @@ export default {
   "be.contentSidebar.activityFeed.annotationActivityPageItem": "Seite {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionLink": "Version {number}",
   "be.contentSidebar.activityFeed.annotationActivityVersionUnavailable": "Version nicht verfügbar",
-  "be.contentSidebar.activityFeed.comment.annotationBadge": "Annotation Badge",
+  "be.contentSidebar.activityFeed.comment.annotationBadge": "Anmerkungsabzeichen",
   "be.contentSidebar.activityFeed.comment.commentDeleteMenuItem": "Löschen",
   "be.contentSidebar.activityFeed.comment.commentDeletePrompt": "Möchten Sie diesen Kommentar wirklich dauerhaft löschen?",
   "be.contentSidebar.activityFeed.comment.commentEditMenuItem": "Ändern",
@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "Ungültiger Benutzer",
   "boxui.validation.requiredError": "Pflichtfeld",
   "boxui.validation.tooLongError": "Eingabe darf {max} Zeichen nicht übersteigen",
-  "boxui.validation.tooShortError": "Eingabe muss mindestens {min} Zeichen lang sein",
-  "boxui.securityControls.linkForMoreDetails": "Klicken Sie hier für weitere Details."
+  "boxui.validation.tooShortError": "Eingabe muss mindestens {min} Zeichen lang sein"
 }

package/i18n/de-DE.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = Seite {number}
 be.contentSidebar.activityFeed.annotationActivityVersionLink = Version {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = Version nicht verfügbar
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = Anmerkungsabzeichen
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = Löschen
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = Download auf Box Drive für externe Be
 boxui.securityControls.externalCollabBlock = Externe Zusammenarbeit eingeschränkt.
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = Externe Zusammenarbeit auf genehmigte Domänen beschränkt.
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = Klicken Sie hier für weitere Details.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = Download auf dem Mobilgerät für externe Benutzer eingeschränkt.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners

package/i18n/en-AU.js

@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "Invalid user",
   "boxui.validation.requiredError": "Required field",
   "boxui.validation.tooLongError": "Input cannot exceed {max} characters",
-  "boxui.validation.tooShortError": "Input must be at least {min} characters.",
-  "boxui.securityControls.linkForMoreDetails": "Click here for more details."
+  "boxui.validation.tooShortError": "Input must be at least {min} characters."
 }

package/i18n/en-AU.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = Page {number}
 be.contentSidebar.activityFeed.annotationActivityVersionLink = Version {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = Version unavailable
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = Annotation Badge
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = Delete
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = Download restricted on Box Drive for e
 boxui.securityControls.externalCollabBlock = External collaboration restricted.
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = External collaboration limited to approved domains.
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = Click here for more details.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = Download restricted on mobile for external users.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners

package/i18n/en-CA.js

@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "Invalid User",
   "boxui.validation.requiredError": "Required Field",
   "boxui.validation.tooLongError": "Input cannot exceed {max} characters",
-  "boxui.validation.tooShortError": "Input must be at least {min} characters",
-  "boxui.securityControls.linkForMoreDetails": "Click here for more details."
+  "boxui.validation.tooShortError": "Input must be at least {min} characters"
 }

package/i18n/en-CA.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = Page {number}
 be.contentSidebar.activityFeed.annotationActivityVersionLink = Version {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = Version Unavailable
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = Annotation Badge
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = Delete
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = Download restricted on Box Drive for e
 boxui.securityControls.externalCollabBlock = External collaboration restricted.
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = External collaboration limited to approved domains.
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = Click here for more details.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = Download restricted on mobile for external users.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners

package/i18n/en-GB.js

@@ -929,6 +929,5 @@ export default {
   "boxui.validation.invalidUserError": "Invalid user",
   "boxui.validation.requiredError": "Required field",
   "boxui.validation.tooLongError": "Input cannot exceed {max} characters",
-  "boxui.validation.tooShortError": "Input must be at least {min} characters.",
-  "boxui.securityControls.linkForMoreDetails": "Click here for more details."
+  "boxui.validation.tooShortError": "Input must be at least {min} characters."
 }

package/i18n/en-GB.properties

@@ -164,6 +164,8 @@ be.contentSidebar.activityFeed.annotationActivityPageItem = Page {number}
 be.contentSidebar.activityFeed.annotationActivityVersionLink = Version {number}
 # Annotation activity item link shown on annotation activity for previous file version that is unavailable
 be.contentSidebar.activityFeed.annotationActivityVersionUnavailable = Version unavailable
+# Title icon indicating that the activity item is an annotation
+be.contentSidebar.activityFeed.comment.annotationBadge = Annotation Badge
 # Text to show on menu item to delete comment
 be.contentSidebar.activityFeed.comment.commentDeleteMenuItem = Delete
 # Confirmation prompt text to delete comment
@@ -1348,8 +1350,6 @@ boxui.securityControls.downloadExternal = Download restricted on Box Drive for e
 boxui.securityControls.externalCollabBlock = External collaboration restricted.
 # Bullet point that summarizes external collaboration restriction applied to classification
 boxui.securityControls.externalCollabDomainList = External collaboration limited to approved domains.
-# The text of a link to a help article for more information.
-boxui.securityControls.linkForMoreDetails = Click here for more details.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users
 boxui.securityControls.mobileDownloadExternal = Download restricted on mobile for external users.
 # Bullet point that summarizes mobile download restrictions applied to classification, when restriction applies to external users and managed users except Owners/Co-Owners