@atlaskit/editor-toolbar-model 0.2.7 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-toolbar-model
 
+## 0.2.9
+
+### Patch Changes
+
+- [`5baa955ebe237`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5baa955ebe237) -
+  Add new menu section for all extensions (inc. loom and 1p, 3p extensions), add logic to hide menu
+  button completely when there are no menu-sections with no menu-items associated with it
+
+## 0.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.7
 
 ### Patch Changes

package/dist/cjs/ui/toolbar-model-renderer/ToolbarRendererNew.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarModelRenderer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _common = require("./common");
 var hasParents = function hasParents(component) {
   return component.type !== 'toolbar';
@@ -40,6 +41,27 @@ var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
       return _common.NoOp;
   }
 };
+var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
+  return menuSections.some(function (menuSection) {
+    return allComponents.some(function (component) {
+      return component.type === 'menu-item' && component.parents.some(function (parent) {
+        return parent.key === menuSection.key;
+      });
+    });
+  });
+};
+var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
+  if (component.type === 'menu') {
+    var menuSections = children.filter(function (child) {
+      return child.type === 'menu-section';
+    });
+    return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
+  }
+  if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
+    return children.length === 0;
+  }
+  return false;
+};
 var _ComponentRenderer = function ComponentRenderer(_ref) {
   var component = _ref.component,
     parents = _ref.parents,
@@ -49,8 +71,14 @@ var _ComponentRenderer = function ComponentRenderer(_ref) {
   var children = (0, _common.getSortedChildren)(allComponents.filter(function (comp) {
     return childTypes.includes(comp.type);
   }), component.key);
-  if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
-    return null;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    if (shouldHideEmptyComponent(component, children, allComponents)) {
+      return null;
+    }
+  } else {
+    if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
+      return null;
+    }
   }
   var Component = component.component || getFallbackComponent(component.type, fallbacks);
   var newParents = [].concat((0, _toConsumableArray2.default)(parents), [{

package/dist/es2019/ui/toolbar-model-renderer/ToolbarRendererNew.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getSortedChildren, isSection, NoOp } from './common';
 const hasParents = component => {
   return component.type !== 'toolbar';
@@ -32,6 +33,21 @@ const getFallbackComponent = (type, fallbacks) => {
       return NoOp;
   }
 };
+const hasMenuItems = (menuSections, allComponents) => {
+  return menuSections.some(menuSection => {
+    return allComponents.some(component => component.type === 'menu-item' && component.parents.some(parent => parent.key === menuSection.key));
+  });
+};
+const shouldHideEmptyComponent = (component, children, allComponents) => {
+  if (component.type === 'menu') {
+    const menuSections = children.filter(child => child.type === 'menu-section');
+    return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
+  }
+  if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
+    return children.length === 0;
+  }
+  return false;
+};
 const ComponentRenderer = ({
   component,
   parents,
@@ -40,8 +56,14 @@ const ComponentRenderer = ({
 }) => {
   const childTypes = getChildTypesForParent(component.type);
   const children = getSortedChildren(allComponents.filter(comp => childTypes.includes(comp.type)), component.key);
-  if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
-    return null;
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    if (shouldHideEmptyComponent(component, children, allComponents)) {
+      return null;
+    }
+  } else {
+    if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
+      return null;
+    }
   }
   const Component = component.component || getFallbackComponent(component.type, fallbacks);
   const newParents = [...parents, {

package/dist/esm/ui/toolbar-model-renderer/ToolbarRendererNew.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getSortedChildren, isSection, NoOp } from './common';
 var hasParents = function hasParents(component) {
   return component.type !== 'toolbar';
@@ -33,6 +34,27 @@ var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
       return NoOp;
   }
 };
+var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
+  return menuSections.some(function (menuSection) {
+    return allComponents.some(function (component) {
+      return component.type === 'menu-item' && component.parents.some(function (parent) {
+        return parent.key === menuSection.key;
+      });
+    });
+  });
+};
+var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
+  if (component.type === 'menu') {
+    var menuSections = children.filter(function (child) {
+      return child.type === 'menu-section';
+    });
+    return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
+  }
+  if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
+    return children.length === 0;
+  }
+  return false;
+};
 var _ComponentRenderer = function ComponentRenderer(_ref) {
   var component = _ref.component,
     parents = _ref.parents,
@@ -42,8 +64,14 @@ var _ComponentRenderer = function ComponentRenderer(_ref) {
   var children = getSortedChildren(allComponents.filter(function (comp) {
     return childTypes.includes(comp.type);
   }), component.key);
-  if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
-    return null;
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    if (shouldHideEmptyComponent(component, children, allComponents)) {
+      return null;
+    }
+  } else {
+    if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
+      return null;
+    }
   }
   var Component = component.component || getFallbackComponent(component.type, fallbacks);
   var newParents = [].concat(_toConsumableArray(parents), [{

package/package.json

@@ -21,10 +21,8 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/css": "^0.16.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.2.0",
-		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},
@@ -32,10 +30,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "workspace:^",
-		"@af/visual-regression": "workspace:^",
-		"@atlaskit/editor-toolbar": "^0.17.0",
-		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/editor-toolbar": "^0.18.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0"
 	},
@@ -77,10 +72,13 @@
 	"platform-feature-flags": {
 		"platform_editor_toolbar_aifc_renderer_rewrite": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_aifc_overflow_menu_update": {
+			"type": "boolean"
 		}
 	},
 	"name": "@atlaskit/editor-toolbar-model",
-	"version": "0.2.7",
+	"version": "0.2.9",
 	"description": "register and render toolbar component",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",