gwchq-textjam 0.2.21 → 0.2.22

package/dist/index.js

@@ -68344,8 +68344,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -68369,7 +68369,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68386,7 +68386,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68404,7 +68404,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68426,8 +68426,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68446,8 +68446,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68457,7 +68457,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -103011,7 +103011,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103042,14 +103042,14 @@ var ProjectName = _ref => {
   var project = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.project, react_redux__WEBPACK_IMPORTED_MODULE_1__.shallowEqual);
   var projectName = getProjectName(project);
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
-  var {
-    hovered,
-    hoverProps
-  } = (0,_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.useHover)();
   var nameInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var nameBeforeEditingRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(projectName);
   var [isEditing, setEditing] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   var [name, setName] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(projectName);
+  var {
+    hovered,
+    hoverProps
+  } = (0,_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.useHover)(_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.TOOLTIP_SHOW_DELAY_MS);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!isEditing) {
       setName(projectName);
@@ -103125,7 +103125,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -370864,6 +370864,7 @@ const ContextMenu = (props) => {
                     [styles_module_scss_1.default.withDivider]: showDivider && i !== menuOptions.length - 1,
                 }), onClick: (e) => {
                     e.stopPropagation = true;
+                    e.syntheticEvent.stopPropagation();
                     option.action?.();
                     onClose();
                 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.optionContent, children: [option.icon ?? null, option.text] }), hoverElement && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.hoverElement, children: hoverElement }))] }, option.id ?? i)))] }));
@@ -370993,32 +370994,21 @@ const ItemEdit_1 = __webpack_require__(61576);
 const ItemIcon_1 = __webpack_require__(3427);
 const styles_module_scss_1 = __importDefault(__webpack_require__(68233));
 const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const button_dots_svg_1 = __importDefault(__webpack_require__(80054));
 const SvgIcon_1 = __webpack_require__(82917);
-const react_1 = __webpack_require__(51649);
 const stores_1 = __webpack_require__(32132);
 const BasicItemContent = ({ item, onContextMenu, }) => {
     const itemData = item.getItemData();
-    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
-    const timerRef = (0, react_1.useRef)(undefined);
     const isSharedProject = (0, stores_1.useAppSelector)((state) => state.editor.isSharedProject);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)(useHover_1.TOOLTIP_SHOW_DELAY_MS);
     if (item.isRenaming()) {
         return (0, jsx_runtime_1.jsx)(ItemEdit_1.ItemEdit, { item: item });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.itemContent, onContextMenu: onContextMenu, children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: itemData }), (0, jsx_runtime_1.jsx)(Text_1.Text, { className: styles_module_scss_1.default.itemTitle, size: 12, draggable: true, onMouseEnter: () => {
-                            timerRef.current = setTimeout(() => {
-                                setShowTooltip(true);
-                            }, 1000);
-                        }, onMouseLeave: () => {
-                            clearTimeout(timerRef.current);
-                            setShowTooltip(false);
-                        }, onDragStart: () => {
-                            clearTimeout(timerRef.current);
-                            setShowTooltip(false);
-                        }, children: item.getItemName() }), !isSharedProject && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: styles_module_scss_1.default.itemButton, size: 16, SvgElement: button_dots_svg_1.default, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.itemContent, onContextMenu: onContextMenu, children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: itemData }), (0, jsx_runtime_1.jsx)(Text_1.Text, { className: styles_module_scss_1.default.itemTitle, size: 12, draggable: true, ...hoverProps, children: item.getItemName() }), !isSharedProject && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: styles_module_scss_1.default.itemButton, size: 16, SvgElement: button_dots_svg_1.default, onClick: (e) => {
                             onContextMenu(e);
                             e.stopPropagation();
-                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: showTooltip, position: "bottom" })] }));
+                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom" })] }));
 };
 exports.BasicItemContent = BasicItemContent;
 
@@ -373515,17 +373505,48 @@ exports.validateProjectFilesCount = validateProjectFilesCount;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useHover = void 0;
+exports.useHover = exports.TOOLTIP_SHOW_DELAY_MS = void 0;
 const react_1 = __webpack_require__(51649);
-const useHover = () => {
+exports.TOOLTIP_SHOW_DELAY_MS = 1000;
+const useHover = (delay = 0) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const clearHoverTimeout = () => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+    const activate = () => {
+        clearHoverTimeout();
+        if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+                setHovered(true);
+                timeoutRef.current = null;
+            }, delay);
+        }
+        else {
+            setHovered(true);
+        }
+    };
+    const deactivate = () => {
+        clearHoverTimeout();
+        setHovered(false);
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearHoverTimeout();
+        };
+    }, []);
     return {
         hovered,
         hoverProps: {
-            onMouseEnter: () => setHovered(true),
-            onMouseLeave: () => setHovered(false),
-            onFocus: () => setHovered(true),
-            onBlur: () => setHovered(false),
+            onMouseEnter: activate,
+            onMouseLeave: deactivate,
+            onFocus: activate,
+            onBlur: deactivate,
+            onDragStart: deactivate,
+            onKeyDown: deactivate,
         },
     };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",