@atlaskit/editor-toolbar-model 0.0.1

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-toolbar-model

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1,42 @@
+# Editor Toolbar Mode
+
+This package enforces a toolbar structure by exposing a simple registry API for components, and providing a react based toolbar model used for rendering an entire toolbar.
+
+## Usage
+
+Register toolbar components
+
+```ts
+import { createComponentRegistry, type RegisterToolbar } from '@atlaskit/editor-toolbar-model';
+
+const registry = createComponentRegistry()
+
+registry.register([
+    {
+        type: 'toolbar'
+        key: 'inline-toolbar'
+    } as RegisterToolbar
+])
+
+```
+
+Get all registered components
+
+```ts
+import { createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+
+const { components } = registry;
+
+console.log(components)
+
+```
+
+Process all toolbar components
+
+```ts
+import { ToolbarModel, createComponentRegistry } from '@atlaskit/editor-toolbar-model';
+
+
+return <ToolbarModel components={registry.components} item={{ type: 'toolbar', key: 'inline-toolbar' }} />
+
+```

package/dist/cjs/create-registry.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createComponentRegistry = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * Create a simple registry for toolbar components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createToolbarRegistry();
+ *
+ * registry.register([
+ * 	{
+ * 		type: 'toolbar',
+ * 		key: 'primary-toolbar',
+ * 		component: ({ children }) => <div>{children}</div>,
+ * 	},
+ *  {
+ *      type: 'section',
+ *      key: 'section-1',
+ *      rank: 1,
+ *      parents: [{ type: 'toolbar', key: 'primary-toolbar' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ *  {
+ *      type: 'group',
+ *      key: 'group-1',
+ *      rank: 1,
+ *      parents: [{ type: 'section', key: 'section-1' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ * ]);
+ */
+var createComponentRegistry = exports.createComponentRegistry = function createComponentRegistry() {
+  var components = [];
+  var register = function register(newComponents) {
+    components.push.apply(components, (0, _toConsumableArray2.default)(newComponents));
+  };
+  return {
+    register: register,
+    components: components
+  };
+};

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToolbarModelRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _toolbarModelRenderer.ToolbarModelRenderer;
+  }
+});
+Object.defineProperty(exports, "createComponentRegistry", {
+  enumerable: true,
+  get: function get() {
+    return _createRegistry.createComponentRegistry;
+  }
+});
+var _toolbarModelRenderer = require("./ui/toolbar-model-renderer");
+var _createRegistry = require("./create-registry");

package/dist/cjs/types/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarModelRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("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 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);
+  });
+};
+var ToolbarModelRenderer = exports.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 renderToolbarItem = function renderToolbarItem(_ref2) {
+    var item = _ref2.item,
+      index = _ref2.index,
+      groupLocation = _ref2.groupLocation,
+      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.default.createElement(Menu, {
+        key: item.key,
+        groupLocation: groupLocation,
+        parents: parents
+      }, menuComponents.map(function (menuSection) {
+        var menuItemsInSection = getSortedChildren(menuItems, menuSection.key);
+        var MenuSection = menuSection.component || fallbacks.menuSection;
+        return /*#__PURE__*/_react.default.createElement(MenuSection, {
+          key: menuSection.key,
+          parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+            key: item.key,
+            type: item.type
+          }])
+        }, menuItemsInSection.map(function (menuItem) {
+          var MenuItem = menuItem.component || NoOp;
+          return /*#__PURE__*/_react.default.createElement(MenuItem, {
+            key: menuItem.key,
+            parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+              key: item.key,
+              type: item.type
+            }, {
+              key: menuSection.key,
+              type: menuSection.type
+            }])
+          });
+        }));
+      }));
+    }
+    var Button = item.component || NoOp;
+    return /*#__PURE__*/_react.default.createElement(Button, {
+      key: item.key,
+      groupLocation: groupLocation,
+      parents: parents
+    });
+  };
+  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.default.createElement(Group, {
+      key: group.key,
+      parents: parents
+    }, groupItems.map(function (item, index) {
+      var isSingleItem = groupItems.length === 1;
+      var groupLocation = isSingleItem ? undefined : index === 0 ? 'start' : index === groupItems.length - 1 ? 'end' : 'middle';
+      return renderToolbarItem({
+        item: item,
+        index: index,
+        groupLocation: groupLocation,
+        parents: [].concat((0, _toConsumableArray2.default)(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.default.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.default.createElement(ToolbarComponent, null, sections.map(renderSection));
+};

package/dist/es2019/create-registry.js

@@ -0,0 +1,41 @@
+/**
+ * Create a simple registry for toolbar components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createToolbarRegistry();
+ *
+ * registry.register([
+ * 	{
+ * 		type: 'toolbar',
+ * 		key: 'primary-toolbar',
+ * 		component: ({ children }) => <div>{children}</div>,
+ * 	},
+ *  {
+ *      type: 'section',
+ *      key: 'section-1',
+ *      rank: 1,
+ *      parents: [{ type: 'toolbar', key: 'primary-toolbar' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ *  {
+ *      type: 'group',
+ *      key: 'group-1',
+ *      rank: 1,
+ *      parents: [{ type: 'section', key: 'section-1' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ * ]);
+ */
+export const createComponentRegistry = () => {
+  const components = [];
+  const register = newComponents => {
+    components.push(...newComponents);
+  };
+  return {
+    register,
+    components
+  };
+};

package/dist/es2019/index.js

@@ -0,0 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
+export { createComponentRegistry } from './create-registry';

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

@@ -0,0 +1,119 @@
+import React from 'react';
+const NoOp = props => null;
+const isSection = component => {
+  return component.type === 'section';
+};
+const isGroup = component => {
+  return component.type === 'group';
+};
+const isToolbarItem = component => {
+  return component.type === 'button' || component.type === 'menu';
+};
+const isToolbarMenuSection = component => {
+  return component.type === 'menu-section';
+};
+const isToolbarMenuItem = component => {
+  return component.type === 'menu-item' || component.type === 'menu-section';
+};
+const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
+  var _a$parents$find, _b$parents$find;
+  return (((_a$parents$find = a.parents.find(p => p.key === parentKey)) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(p => p.key === parentKey)) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
+});
+export const ToolbarModelRenderer = ({
+  toolbar,
+  components,
+  fallbacks
+}) => {
+  const sections = getSortedChildren(components.filter(isSection), toolbar.key);
+  const groups = components.filter(isGroup);
+  const toolbarItems = components.filter(isToolbarItem);
+  const menuSections = components.filter(isToolbarMenuSection);
+  const menuItems = components.filter(isToolbarMenuItem);
+  const renderToolbarItem = ({
+    item,
+    index,
+    groupLocation,
+    parents
+  }) => {
+    if (item.type === 'menu') {
+      const menuComponents = getSortedChildren(menuSections, item.key);
+      if (menuComponents.length === 0) {
+        return null;
+      }
+      const Menu = item.component || NoOp;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: item.key,
+        groupLocation: groupLocation,
+        parents: parents
+      }, menuComponents.map(menuSection => {
+        const menuItemsInSection = getSortedChildren(menuItems, menuSection.key);
+        const MenuSection = menuSection.component || fallbacks.menuSection;
+        return /*#__PURE__*/React.createElement(MenuSection, {
+          key: menuSection.key,
+          parents: [...parents, {
+            key: item.key,
+            type: item.type
+          }]
+        }, menuItemsInSection.map(menuItem => {
+          const MenuItem = menuItem.component || NoOp;
+          return /*#__PURE__*/React.createElement(MenuItem, {
+            key: menuItem.key,
+            parents: [...parents, {
+              key: item.key,
+              type: item.type
+            }, {
+              key: menuSection.key,
+              type: menuSection.type
+            }]
+          });
+        }));
+      }));
+    }
+    const Button = item.component || NoOp;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: item.key,
+      groupLocation: groupLocation,
+      parents: parents
+    });
+  };
+  const renderGroup = (group, parents) => {
+    const groupItems = getSortedChildren(toolbarItems, group.key);
+    if (groupItems.length === 0) {
+      return null;
+    }
+    const Group = group.component || fallbacks.group;
+    return /*#__PURE__*/React.createElement(Group, {
+      key: group.key,
+      parents: parents
+    }, groupItems.map((item, index) => {
+      const isSingleItem = groupItems.length === 1;
+      const groupLocation = isSingleItem ? undefined : index === 0 ? 'start' : index === groupItems.length - 1 ? 'end' : 'middle';
+      return renderToolbarItem({
+        item,
+        index,
+        groupLocation,
+        parents: [...parents, {
+          key: group.key,
+          type: group.type
+        }]
+      });
+    }));
+  };
+  const renderSection = section => {
+    const sectionGroups = getSortedChildren(groups, section.key);
+    const Section = section.component || fallbacks.section;
+    const parents = [{
+      key: toolbar.key,
+      type: toolbar.type
+    }];
+    return /*#__PURE__*/React.createElement(Section, {
+      key: section.key,
+      parents: parents
+    }, sectionGroups.map(group => renderGroup(group, [...parents, {
+      key: section.key,
+      type: section.type
+    }])));
+  };
+  const ToolbarComponent = toolbar.component || NoOp;
+  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
+};

package/dist/esm/create-registry.js

@@ -0,0 +1,42 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Create a simple registry for toolbar components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createToolbarRegistry();
+ *
+ * registry.register([
+ * 	{
+ * 		type: 'toolbar',
+ * 		key: 'primary-toolbar',
+ * 		component: ({ children }) => <div>{children}</div>,
+ * 	},
+ *  {
+ *      type: 'section',
+ *      key: 'section-1',
+ *      rank: 1,
+ *      parents: [{ type: 'toolbar', key: 'primary-toolbar' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ *  {
+ *      type: 'group',
+ *      key: 'group-1',
+ *      rank: 1,
+ *      parents: [{ type: 'section', key: 'section-1' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ * ]);
+ */
+export var createComponentRegistry = function createComponentRegistry() {
+  var components = [];
+  var register = function register(newComponents) {
+    components.push.apply(components, _toConsumableArray(newComponents));
+  };
+  return {
+    register: register,
+    components: components
+  };
+};

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
+export { createComponentRegistry } from './create-registry';

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

@@ -0,0 +1,132 @@
+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 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);
+  });
+};
+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 renderToolbarItem = function renderToolbarItem(_ref2) {
+    var item = _ref2.item,
+      index = _ref2.index,
+      groupLocation = _ref2.groupLocation,
+      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,
+        groupLocation: groupLocation,
+        parents: parents
+      }, menuComponents.map(function (menuSection) {
+        var menuItemsInSection = getSortedChildren(menuItems, 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) {
+          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,
+      groupLocation: groupLocation,
+      parents: parents
+    });
+  };
+  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) {
+      var isSingleItem = groupItems.length === 1;
+      var groupLocation = isSingleItem ? undefined : index === 0 ? 'start' : index === groupItems.length - 1 ? 'end' : 'middle';
+      return renderToolbarItem({
+        item: item,
+        index: index,
+        groupLocation: groupLocation,
+        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));
+};

package/dist/types/create-registry.d.ts

@@ -0,0 +1,36 @@
+import type { RegisterComponent } from './types';
+/**
+ * Create a simple registry for toolbar components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createToolbarRegistry();
+ *
+ * registry.register([
+ * 	{
+ * 		type: 'toolbar',
+ * 		key: 'primary-toolbar',
+ * 		component: ({ children }) => <div>{children}</div>,
+ * 	},
+ *  {
+ *      type: 'section',
+ *      key: 'section-1',
+ *      rank: 1,
+ *      parents: [{ type: 'toolbar', key: 'primary-toolbar' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ *  {
+ *      type: 'group',
+ *      key: 'group-1',
+ *      rank: 1,
+ *      parents: [{ type: 'section', key: 'section-1' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ * ]);
+ */
+export declare const createComponentRegistry: () => {
+    register: (newComponents: RegisterComponent[]) => void;
+    components: RegisterComponent[];
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
+export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
+export { createComponentRegistry } from './create-registry';

package/dist/types/types/index.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+type WithRank<T> = T & {
+    rank: number;
+};
+type Parents<T> = Array<WithRank<T>>;
+type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarMenuSection | ToolbarMenuItem;
+export type ComponentTypes = Array<ComponentType>;
+type CommonComponentProps = {
+    /**
+     * Array of parent information including both keys and types
+     * Ordered from immediate parent to root parent
+     */
+    parents: ComponentTypes;
+};
+export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
+export type ToolbarComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export type ToolbarSectionComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarGroupComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuComponent = (props: {
+    groupLocation?: ToolbarButtonGroupLocation;
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarButtonComponent = (props: {
+    groupLocation?: ToolbarButtonGroupLocation;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuSectionComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuItemComponent = (props: {} & CommonComponentProps) => React.ReactNode;
+type Toolbar = {
+    type: 'toolbar';
+    key: string;
+};
+type ToolbarSection = {
+    key: string;
+    type: 'section';
+};
+type ToolbarGroup = {
+    key: string;
+    type: 'group';
+};
+type ToolbarButton = {
+    key: string;
+    type: 'button';
+};
+type ToolbarMenuItem = {
+    key: string;
+    type: 'menu-item';
+};
+type ToolbarMenuSection = {
+    key: string;
+    type: 'menu-section';
+};
+type ToolbarMenu = {
+    key: string;
+    type: 'menu';
+};
+export type RegisterToolbar = Toolbar & {
+    component?: ToolbarComponent;
+};
+export type RegisterToolbarSection = ToolbarSection & {
+    parents: Parents<Toolbar>;
+    component?: ToolbarSectionComponent;
+};
+export type RegisterToolbarGroup = ToolbarGroup & {
+    parents: Parents<ToolbarSection>;
+    component?: ToolbarGroupComponent;
+};
+export type RegisterToolbarButton = ToolbarButton & {
+    parents: Parents<ToolbarGroup>;
+    component?: ToolbarButtonComponent;
+};
+export type RegisterToolbarMenu = ToolbarMenu & {
+    parents: Parents<ToolbarGroup>;
+    component?: ToolbarMenuComponent;
+};
+export type RegisterToolbarMenuSection = ToolbarMenuSection & {
+    parents: Parents<ToolbarMenu>;
+    component?: ToolbarMenuSectionComponent;
+};
+export type RegisterToolbarMenuItem = ToolbarMenuItem & {
+    parents: Parents<ToolbarMenuSection>;
+    component?: ToolbarMenuItemComponent;
+};
+export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
+export {};

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

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

package/dist/types-ts4.5/create-registry.d.ts

@@ -0,0 +1,36 @@
+import type { RegisterComponent } from './types';
+/**
+ * Create a simple registry for toolbar components.
+ *
+ * @returns A registry object with a `register` method and a `components` array.
+ *
+ * @example
+ * ```ts
+ * const registry = createToolbarRegistry();
+ *
+ * registry.register([
+ * 	{
+ * 		type: 'toolbar',
+ * 		key: 'primary-toolbar',
+ * 		component: ({ children }) => <div>{children}</div>,
+ * 	},
+ *  {
+ *      type: 'section',
+ *      key: 'section-1',
+ *      rank: 1,
+ *      parents: [{ type: 'toolbar', key: 'primary-toolbar' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ *  {
+ *      type: 'group',
+ *      key: 'group-1',
+ *      rank: 1,
+ *      parents: [{ type: 'section', key: 'section-1' }],
+ *      component: ({ children }) => <div>{children}</div>,
+ *  },
+ * ]);
+ */
+export declare const createComponentRegistry: () => {
+    register: (newComponents: RegisterComponent[]) => void;
+    components: RegisterComponent[];
+};

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,3 @@
+export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
+export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
+export { createComponentRegistry } from './create-registry';

package/dist/types-ts4.5/types/index.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+type WithRank<T> = T & {
+    rank: number;
+};
+type Parents<T> = Array<WithRank<T>>;
+type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarMenuSection | ToolbarMenuItem;
+export type ComponentTypes = Array<ComponentType>;
+type CommonComponentProps = {
+    /**
+     * Array of parent information including both keys and types
+     * Ordered from immediate parent to root parent
+     */
+    parents: ComponentTypes;
+};
+export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
+export type ToolbarComponent = (props: {
+    children: React.ReactNode;
+}) => React.ReactNode;
+export type ToolbarSectionComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarGroupComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuComponent = (props: {
+    groupLocation?: ToolbarButtonGroupLocation;
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarButtonComponent = (props: {
+    groupLocation?: ToolbarButtonGroupLocation;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuSectionComponent = (props: {
+    children: React.ReactNode;
+} & CommonComponentProps) => React.ReactNode;
+export type ToolbarMenuItemComponent = (props: {} & CommonComponentProps) => React.ReactNode;
+type Toolbar = {
+    type: 'toolbar';
+    key: string;
+};
+type ToolbarSection = {
+    key: string;
+    type: 'section';
+};
+type ToolbarGroup = {
+    key: string;
+    type: 'group';
+};
+type ToolbarButton = {
+    key: string;
+    type: 'button';
+};
+type ToolbarMenuItem = {
+    key: string;
+    type: 'menu-item';
+};
+type ToolbarMenuSection = {
+    key: string;
+    type: 'menu-section';
+};
+type ToolbarMenu = {
+    key: string;
+    type: 'menu';
+};
+export type RegisterToolbar = Toolbar & {
+    component?: ToolbarComponent;
+};
+export type RegisterToolbarSection = ToolbarSection & {
+    parents: Parents<Toolbar>;
+    component?: ToolbarSectionComponent;
+};
+export type RegisterToolbarGroup = ToolbarGroup & {
+    parents: Parents<ToolbarSection>;
+    component?: ToolbarGroupComponent;
+};
+export type RegisterToolbarButton = ToolbarButton & {
+    parents: Parents<ToolbarGroup>;
+    component?: ToolbarButtonComponent;
+};
+export type RegisterToolbarMenu = ToolbarMenu & {
+    parents: Parents<ToolbarGroup>;
+    component?: ToolbarMenuComponent;
+};
+export type RegisterToolbarMenuSection = ToolbarMenuSection & {
+    parents: Parents<ToolbarMenu>;
+    component?: ToolbarMenuSectionComponent;
+};
+export type RegisterToolbarMenuItem = ToolbarMenuItem & {
+    parents: Parents<ToolbarMenuSection>;
+    component?: ToolbarMenuItemComponent;
+};
+export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
+export {};

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

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

package/package.json

@@ -0,0 +1,89 @@
+{
+	"atlassian": {
+		"team": "Editor: Jenga",
+		"releaseModel": "continuous"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <5.4": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": [
+		"*.compiled.css"
+	],
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/primitives": "^14.11.0",
+		"@atlaskit/tokens": "^5.6.0",
+		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/editor-toolbar": "^0.0.5",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
+		"@testing-library/react": "^13.4.0",
+		"react-dom": "^18.2.0",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	},
+	"name": "@atlaskit/editor-toolbar-model",
+	"version": "0.0.1",
+	"description": "register and render toolbar component",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	}
+}