@atlaskit/editor-toolbar-model 0.2.1 → 0.2.3

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

@@ -1,178 +1,21 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-var NoOp = function NoOp(props) {
-  return null;
-};
-var isSection = function isSection(component) {
-  return component.type === 'section';
-};
-var isGroup = function isGroup(component) {
-  return component.type === 'group';
-};
-var isToolbarItem = function isToolbarItem(component) {
-  return component.type === 'button' || component.type === 'menu';
-};
-var isToolbarMenuSection = function isToolbarMenuSection(component) {
-  return component.type === 'menu-section';
-};
-var isToolbarMenuItem = function isToolbarMenuItem(component) {
-  return component.type === 'menu-item' || component.type === 'menu-section';
-};
-var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
-  return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
-};
-var getSortedChildren = function getSortedChildren(components, parentKey) {
-  return components.filter(function (component) {
-    return component.parents.some(function (parent) {
-      return parent.key === parentKey;
-    });
-  }).sort(function (a, b) {
-    var _a$parents$find, _b$parents$find;
-    return (((_a$parents$find = a.parents.find(function (p) {
-      return p.key === parentKey;
-    })) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
-      return p.key === parentKey;
-    })) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
-  });
-};
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ToolbarModelRenderer as ToolbarModelRendererNew } from './ToolbarRendererNew';
+import { ToolbarModelRenderer as ToolbarModelRendererOld } from './ToolbarRendererOld';
 export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
   var toolbar = _ref.toolbar,
     components = _ref.components,
     fallbacks = _ref.fallbacks;
-  var sections = getSortedChildren(components.filter(isSection), toolbar.key);
-  var groups = components.filter(isGroup);
-  var toolbarItems = components.filter(isToolbarItem);
-  var menuSections = components.filter(isToolbarMenuSection);
-  var menuItems = components.filter(isToolbarMenuItem);
-  var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
-  var renderToolbarItem = function renderToolbarItem(_ref2) {
-    var item = _ref2.item,
-      index = _ref2.index,
-      parents = _ref2.parents;
-    if (item.type === 'menu') {
-      var menuComponents = getSortedChildren(menuSections, item.key);
-      if (menuComponents.length === 0) {
-        return null;
-      }
-      var Menu = item.component || NoOp;
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: item.key,
-        parents: parents
-      }, menuComponents.map(function (menuSection) {
-        var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
-        var MenuSection = menuSection.component || fallbacks.menuSection;
-        return /*#__PURE__*/React.createElement(MenuSection, {
-          key: menuSection.key,
-          parents: [].concat(_toConsumableArray(parents), [{
-            key: item.key,
-            type: item.type
-          }])
-        }, menuItemsInSection.map(function (menuItem) {
-          if (menuItem.type === 'nested-menu') {
-            var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
-            var NestedMenu = menuItem.component;
-            return /*#__PURE__*/React.createElement(NestedMenu, {
-              key: menuItem.key,
-              parents: [].concat(_toConsumableArray(parents), [{
-                key: item.key,
-                type: item.type
-              }, {
-                key: menuSection.key,
-                type: menuSection.type
-              }])
-            }, nestedMenuComponents.map(function (nestedMenuSection) {
-              var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
-              var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
-              return /*#__PURE__*/React.createElement(NestedMenuSection, {
-                key: nestedMenuSection.key,
-                parents: [].concat(_toConsumableArray(parents), [{
-                  key: item.key,
-                  type: item.type
-                }, {
-                  key: menuSection.key,
-                  type: menuSection.type
-                }, {
-                  key: menuItem.key,
-                  type: menuItem.type
-                }])
-              }, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
-                var NestedMenuItem = nestedMenuItem.component || NoOp;
-                return /*#__PURE__*/React.createElement(NestedMenuItem, {
-                  key: nestedMenuItem.key,
-                  parents: [].concat(_toConsumableArray(parents), [{
-                    key: item.key,
-                    type: item.type
-                  }, {
-                    key: menuSection.key,
-                    type: menuSection.type
-                  }, {
-                    key: menuItem.key,
-                    type: menuItem.type
-                  }, {
-                    key: nestedMenuSection.key,
-                    type: nestedMenuSection.type
-                  }])
-                });
-              }));
-            }));
-          }
-          var MenuItem = menuItem.component || NoOp;
-          return /*#__PURE__*/React.createElement(MenuItem, {
-            key: menuItem.key,
-            parents: [].concat(_toConsumableArray(parents), [{
-              key: item.key,
-              type: item.type
-            }, {
-              key: menuSection.key,
-              type: menuSection.type
-            }])
-          });
-        }));
-      }));
-    }
-    var Button = item.component || NoOp;
-    return /*#__PURE__*/React.createElement(Button, {
-      key: item.key,
-      parents: parents
+  if (fg('platform_editor_toolbar_aifc_renderer_rewrite')) {
+    return /*#__PURE__*/React.createElement(ToolbarModelRendererNew, {
+      toolbar: toolbar,
+      components: components,
+      fallbacks: fallbacks
     });
-  };
-  var renderGroup = function renderGroup(group, parents) {
-    var groupItems = getSortedChildren(toolbarItems, group.key);
-    if (groupItems.length === 0) {
-      return null;
-    }
-    var Group = group.component || fallbacks.group;
-    return /*#__PURE__*/React.createElement(Group, {
-      key: group.key,
-      parents: parents
-    }, groupItems.map(function (item, index) {
-      return renderToolbarItem({
-        item: item,
-        index: index,
-        parents: [].concat(_toConsumableArray(parents), [{
-          key: group.key,
-          type: group.type
-        }])
-      });
-    }));
-  };
-  var renderSection = function renderSection(section) {
-    var sectionGroups = getSortedChildren(groups, section.key);
-    var Section = section.component || fallbacks.section;
-    var parents = [{
-      key: toolbar.key,
-      type: toolbar.type
-    }];
-    return /*#__PURE__*/React.createElement(Section, {
-      key: section.key,
-      parents: parents
-    }, sectionGroups.map(function (group) {
-      return renderGroup(group, [].concat(parents, [{
-        key: section.key,
-        type: section.type
-      }]));
-    }));
-  };
-  var ToolbarComponent = toolbar.component || NoOp;
-  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
+  }
+  return /*#__PURE__*/React.createElement(ToolbarModelRendererOld, {
+    toolbar: toolbar,
+    components: components,
+    fallbacks: fallbacks
+  });
 };

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

@@ -0,0 +1 @@
+export {};

package/dist/types/ui/toolbar-model-renderer/ToolbarRendererNew.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarProps } from './types';
+export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;

package/dist/types/ui/toolbar-model-renderer/ToolbarRendererOld.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarProps } from './types';
+export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;

package/dist/types/ui/toolbar-model-renderer/common.d.ts

@@ -0,0 +1,9 @@
+import type { RegisterComponent, RegisterToolbarSection } from '../../types';
+export declare const getSortedChildren: <T extends {
+    parents: Array<{
+        key: string;
+        rank: number;
+    }>;
+}>(components: T[], parentKey: string) => T[];
+export declare const NoOp: <T extends Record<string, unknown> = Record<string, unknown>>(props: T) => React.ReactNode;
+export declare const isSection: (component: RegisterComponent) => component is RegisterToolbarSection;

package/dist/types/ui/toolbar-model-renderer/index.d.ts

@@ -1,22 +1,3 @@
 import React from 'react';
-import type { RegisterToolbar, RegisterComponent, ToolbarGroupComponent, ToolbarMenuSectionComponent, ToolbarSectionComponent } from '../../types';
-type ToolbarProps = {
-    /**
-     * Every registered toolbar component
-     */
-    components: RegisterComponent[];
-    /**
-     * Fallback components used in rendering
-     */
-    fallbacks: {
-        group: ToolbarGroupComponent;
-        menuSection: ToolbarMenuSectionComponent;
-        section: ToolbarSectionComponent;
-    };
-    /**
-     * Toolbar component
-     */
-    toolbar: RegisterToolbar;
-};
+import type { ToolbarProps } from './types';
 export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;
-export {};

package/dist/types/ui/toolbar-model-renderer/types.d.ts

@@ -0,0 +1,19 @@
+import type { RegisterComponent, RegisterToolbar, ToolbarGroupComponent, ToolbarMenuSectionComponent, ToolbarSectionComponent } from '../../types';
+export type ToolbarProps = {
+    /**
+     * Every registered toolbar component
+     */
+    components: RegisterComponent[];
+    /**
+     * Fallback components used in rendering
+     */
+    fallbacks: {
+        group: ToolbarGroupComponent;
+        menuSection: ToolbarMenuSectionComponent;
+        section: ToolbarSectionComponent;
+    };
+    /**
+     * Toolbar component
+     */
+    toolbar: RegisterToolbar;
+};

package/dist/types-ts4.5/ui/toolbar-model-renderer/ToolbarRendererNew.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarProps } from './types';
+export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/toolbar-model-renderer/ToolbarRendererOld.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ToolbarProps } from './types';
+export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/toolbar-model-renderer/common.d.ts

@@ -0,0 +1,9 @@
+import type { RegisterComponent, RegisterToolbarSection } from '../../types';
+export declare const getSortedChildren: <T extends {
+    parents: Array<{
+        key: string;
+        rank: number;
+    }>;
+}>(components: T[], parentKey: string) => T[];
+export declare const NoOp: <T extends Record<string, unknown> = Record<string, unknown>>(props: T) => React.ReactNode;
+export declare const isSection: (component: RegisterComponent) => component is RegisterToolbarSection;

package/dist/types-ts4.5/ui/toolbar-model-renderer/index.d.ts

@@ -1,22 +1,3 @@
 import React from 'react';
-import type { RegisterToolbar, RegisterComponent, ToolbarGroupComponent, ToolbarMenuSectionComponent, ToolbarSectionComponent } from '../../types';
-type ToolbarProps = {
-    /**
-     * Every registered toolbar component
-     */
-    components: RegisterComponent[];
-    /**
-     * Fallback components used in rendering
-     */
-    fallbacks: {
-        group: ToolbarGroupComponent;
-        menuSection: ToolbarMenuSectionComponent;
-        section: ToolbarSectionComponent;
-    };
-    /**
-     * Toolbar component
-     */
-    toolbar: RegisterToolbar;
-};
+import type { ToolbarProps } from './types';
 export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;
-export {};

package/dist/types-ts4.5/ui/toolbar-model-renderer/types.d.ts

@@ -0,0 +1,19 @@
+import type { RegisterComponent, RegisterToolbar, ToolbarGroupComponent, ToolbarMenuSectionComponent, ToolbarSectionComponent } from '../../types';
+export type ToolbarProps = {
+    /**
+     * Every registered toolbar component
+     */
+    components: RegisterComponent[];
+    /**
+     * Fallback components used in rendering
+     */
+    fallbacks: {
+        group: ToolbarGroupComponent;
+        menuSection: ToolbarMenuSectionComponent;
+        section: ToolbarSectionComponent;
+    };
+    /**
+     * Toolbar component
+     */
+    toolbar: RegisterToolbar;
+};

package/package.json

@@ -21,9 +21,10 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/css": "^0.13.0",
-		"@atlaskit/primitives": "^14.13.0",
-		"@atlaskit/tokens": "^6.2.0",
+		"@atlaskit/css": "^0.15.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^15.0.0",
+		"@atlaskit/tokens": "^6.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -33,7 +34,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/editor-toolbar": "^0.8.0",
+		"@atlaskit/editor-toolbar": "^0.15.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0"
@@ -73,8 +74,13 @@
 			]
 		}
 	},
+	"platform-feature-flags": {
+		"platform_editor_toolbar_aifc_renderer_rewrite": {
+			"type": "boolean"
+		}
+	},
 	"name": "@atlaskit/editor-toolbar-model",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"description": "register and render toolbar component",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",