@digital-ai/dot-components 3.20.0 → 3.20.2

package/index.esm.js

@@ -11602,13 +11602,15 @@ function DotDashboardOptionsMenu({
     });
   }
   if (onDetails) {
-    menuItems.push({
-      children: jsx("div", {
-        className: "dashboard-details-border"
-      }),
-      disabled: true,
-      key: 'dashboard-details-border'
-    });
+    if (menuItems.length > 0) {
+      menuItems.push({
+        children: jsx("div", {
+          className: "dashboard-details-border"
+        }),
+        disabled: true,
+        key: 'dashboard-details-border'
+      });
+    }
     menuItems.push({
       children: jsxs(DotLink, {
         ariaLabel: "Dashboard details",
@@ -11773,7 +11775,7 @@ function DotDashboardActions({
     setDashboardToPublish(null);
     setDashboardToUnpublish(null);
     onStatusChanged && onStatusChanged(publishedDashboard);
-  }, []);
+  }, [onStatusChanged]);
   const handlePublishConfirmClose = useCallback(() => {
     setDashboardToPublish(null);
     setDashboardToUnpublish(null);
@@ -11817,6 +11819,7 @@ function DotDashboardActions({
   const handleStartDuplicateIfConfig = onDuplicated ? handleStartDuplicate : undefined;
   const handleStartStatusChangeIfConfig = onStatusChanged ? handleStartStatusChange : undefined;
   const handleStartDeleteIfConfig = onDeleted ? handleStartDelete : undefined;
+  const handleViewModeIfConfig = onViewMode && canEdit ? onViewMode : undefined;
   return jsxs(StyledDashboardActions, {
     "data-testid": "dot-dashboard-actions",
     children: [jsx(DotDashboardPublishConfirm, {
@@ -11843,11 +11846,11 @@ function DotDashboardActions({
     }), onFavorite && jsx(FavoriteButton, {
       dashboard: dashboard,
       onFavorite: onFavorite
-    }), canEdit && jsx(DotDashboardOptionsMenu, {
+    }), jsx(DotDashboardOptionsMenu, {
       dashboard: dashboard,
       isEdit: isEdit,
       menuPlacement: "bottom-start",
-      onViewMode: onViewMode,
+      onViewMode: handleViewModeIfConfig,
       onStartStatusChange: handleStartStatusChangeIfConfig,
       onStartDuplicate: handleStartDuplicateIfConfig,
       onStartDelete: handleStartDeleteIfConfig,
@@ -16222,7 +16225,16 @@ const DotTableActions = ({
   const [anchorEl, setAnchorEl] = useState(null);
   const [showMenu, setShowMenu] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [_resizeListener, setResizeListener] = useState(null);
   useEffect(() => {
+    const checkForOverflowing = () => {
+      if (actions.length > 1) {
+        const actionIcons = document.getElementsByClassName('dot-table-action-icon');
+        const actionTableCellWidth = 3 * (actionIcons.length > 0 && actionIcons[0].clientWidth);
+        const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
+        setShowMenu(isOverflowing);
+      }
+    };
     const items = actions.map(action => ({
       ariaLabel: action.ariaLabel,
       children: getMenuItem(action),
@@ -16236,35 +16248,33 @@ const DotTableActions = ({
     });
     setSelectionMap(map);
     checkForOverflowing();
-    window.addEventListener('resize', checkForOverflowing);
+    setResizeListener(orig => {
+      if (orig) {
+        window.removeEventListener('resize', orig);
+      }
+      window.addEventListener('resize', checkForOverflowing);
+      return checkForOverflowing;
+    });
     return () => {
       window.removeEventListener('resize', checkForOverflowing);
     };
-  }, []);
-  const checkForOverflowing = () => {
-    if (actions.length > 1) {
-      const actionIcons = document.getElementsByClassName('dot-table-action-icon');
-      const actionTableCellWidth = 3 * (actionIcons.length > 0 && actionIcons[0].clientWidth);
-      const isOverflowing = actionTableCellWidth > (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current.clientWidth);
-      setShowMenu(isOverflowing);
-    }
-  };
-  const toggleMenu = event => {
+  }, [actions]);
+  const toggleMenu = useCallback(event => {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
-    setMenuOpen(!menuOpen);
-  };
-  const onSelect = (event, _menuId, itemKey) => {
+    setMenuOpen(wasOpen => !wasOpen);
+  }, []);
+  const onSelect = useCallback((event, _menuId, itemKey) => {
     event.stopPropagation();
     selectionMap[itemKey].onClick(null);
-  };
-  const onLeave = () => {
+  }, [selectionMap]);
+  const onLeave = useCallback(() => {
     setMenuOpen(false);
-  };
-  const handleTableActionClick = (event, action) => {
+  }, []);
+  const handleTableActionClick = useCallback((event, action) => {
     event.stopPropagation();
     action.onClick(event);
-  };
+  }, []);
   const renderTableActions = () => {
     return actions && actions.map((action, index) => index < 2 && jsx(DotTableAction, {
       "data-testid": action['data-testid'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "3.20.0",
+  "version": "3.20.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [