@atlaskit/editor-toolbar-model 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/toolbar-model-renderer/index.js +53 -1
  3. package/dist/es2019/ui/toolbar-model-renderer/index.js +53 -1
  4. package/dist/esm/ui/toolbar-model-renderer/index.js +53 -1
  5. package/dist/types/index.d.ts +1 -1
  6. package/dist/types/types/index.d.ts +14 -3
  7. package/dist/types-ts4.5/index.d.ts +1 -1
  8. package/dist/types-ts4.5/types/index.d.ts +14 -3
  9. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1 +1,16 @@
1
1
  # @atlaskit/editor-toolbar-model
2
+
3
+ ## 0.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#195460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195460)
8
+ [`dd320dee34d9f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd320dee34d9f) -
9
+ [ux] ED-28684 register ai components to the new toolbar behind platform_editor_toolbar_aifc
10
+ experiment
11
+
12
+ ## 0.0.2
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
package/dist/cjs/ui/toolbar-model-renderer/index.js CHANGED
@@ -25,6 +25,9 @@ var isToolbarMenuSection = function isToolbarMenuSection(component) {
25
25
  var isToolbarMenuItem = function isToolbarMenuItem(component) {
26
26
  return component.type === 'menu-item' || component.type === 'menu-section';
27
27
  };
28
+ var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
29
+ return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
30
+ };
28
31
  var getSortedChildren = function getSortedChildren(components, parentKey) {
29
32
  return components.filter(function (component) {
30
33
  return component.parents.some(function (parent) {
@@ -48,6 +51,7 @@ var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelR
48
51
  var toolbarItems = components.filter(isToolbarItem);
49
52
  var menuSections = components.filter(isToolbarMenuSection);
50
53
  var menuItems = components.filter(isToolbarMenuItem);
54
+ var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
51
55
  var renderToolbarItem = function renderToolbarItem(_ref2) {
52
56
  var item = _ref2.item,
53
57
  index = _ref2.index,
@@ -64,7 +68,7 @@ var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelR
64
68
  groupLocation: groupLocation,
65
69
  parents: parents
66
70
  }, menuComponents.map(function (menuSection) {
67
- var menuItemsInSection = getSortedChildren(menuItems, menuSection.key);
71
+ var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
68
72
  var MenuSection = menuSection.component || fallbacks.menuSection;
69
73
  return /*#__PURE__*/_react.default.createElement(MenuSection, {
70
74
  key: menuSection.key,
@@ -73,6 +77,54 @@ var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelR
73
77
  type: item.type
74
78
  }])
75
79
  }, menuItemsInSection.map(function (menuItem) {
80
+ if (menuItem.type === 'nested-menu') {
81
+ var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
82
+ var NestedMenu = menuItem.component;
83
+ return /*#__PURE__*/_react.default.createElement(NestedMenu, {
84
+ key: menuItem.key,
85
+ parents: [].concat((0, _toConsumableArray2.default)(parents), [{
86
+ key: item.key,
87
+ type: item.type
88
+ }, {
89
+ key: menuSection.key,
90
+ type: menuSection.type
91
+ }])
92
+ }, nestedMenuComponents.map(function (nestedMenuSection) {
93
+ var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
94
+ var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
95
+ return /*#__PURE__*/_react.default.createElement(NestedMenuSection, {
96
+ key: nestedMenuSection.key,
97
+ parents: [].concat((0, _toConsumableArray2.default)(parents), [{
98
+ key: item.key,
99
+ type: item.type
100
+ }, {
101
+ key: menuSection.key,
102
+ type: menuSection.type
103
+ }, {
104
+ key: menuItem.key,
105
+ type: menuItem.type
106
+ }])
107
+ }, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
108
+ var NestedMenuItem = nestedMenuItem.component || NoOp;
109
+ return /*#__PURE__*/_react.default.createElement(NestedMenuItem, {
110
+ key: nestedMenuItem.key,
111
+ parents: [].concat((0, _toConsumableArray2.default)(parents), [{
112
+ key: item.key,
113
+ type: item.type
114
+ }, {
115
+ key: menuSection.key,
116
+ type: menuSection.type
117
+ }, {
118
+ key: menuItem.key,
119
+ type: menuItem.type
120
+ }, {
121
+ key: nestedMenuSection.key,
122
+ type: nestedMenuSection.type
123
+ }])
124
+ });
125
+ }));
126
+ }));
127
+ }
76
128
  var MenuItem = menuItem.component || NoOp;
77
129
  return /*#__PURE__*/_react.default.createElement(MenuItem, {
78
130
  key: menuItem.key,
package/dist/es2019/ui/toolbar-model-renderer/index.js CHANGED
@@ -15,6 +15,9 @@ const isToolbarMenuSection = component => {
15
15
  const isToolbarMenuItem = component => {
16
16
  return component.type === 'menu-item' || component.type === 'menu-section';
17
17
  };
18
+ const isToolbarMenuItemOrNestedMenu = component => {
19
+ return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
20
+ };
18
21
  const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
19
22
  var _a$parents$find, _b$parents$find;
20
23
  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);
@@ -29,6 +32,7 @@ export const ToolbarModelRenderer = ({
29
32
  const toolbarItems = components.filter(isToolbarItem);
30
33
  const menuSections = components.filter(isToolbarMenuSection);
31
34
  const menuItems = components.filter(isToolbarMenuItem);
35
+ const menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
32
36
  const renderToolbarItem = ({
33
37
  item,
34
38
  index,
@@ -46,7 +50,7 @@ export const ToolbarModelRenderer = ({
46
50
  groupLocation: groupLocation,
47
51
  parents: parents
48
52
  }, menuComponents.map(menuSection => {
49
- const menuItemsInSection = getSortedChildren(menuItems, menuSection.key);
53
+ const menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
50
54
  const MenuSection = menuSection.component || fallbacks.menuSection;
51
55
  return /*#__PURE__*/React.createElement(MenuSection, {
52
56
  key: menuSection.key,
@@ -55,6 +59,54 @@ export const ToolbarModelRenderer = ({
55
59
  type: item.type
56
60
  }]
57
61
  }, menuItemsInSection.map(menuItem => {
62
+ if (menuItem.type === 'nested-menu') {
63
+ const nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
64
+ const NestedMenu = menuItem.component;
65
+ return /*#__PURE__*/React.createElement(NestedMenu, {
66
+ key: menuItem.key,
67
+ parents: [...parents, {
68
+ key: item.key,
69
+ type: item.type
70
+ }, {
71
+ key: menuSection.key,
72
+ type: menuSection.type
73
+ }]
74
+ }, nestedMenuComponents.map(nestedMenuSection => {
75
+ const menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
76
+ const NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
77
+ return /*#__PURE__*/React.createElement(NestedMenuSection, {
78
+ key: nestedMenuSection.key,
79
+ parents: [...parents, {
80
+ key: item.key,
81
+ type: item.type
82
+ }, {
83
+ key: menuSection.key,
84
+ type: menuSection.type
85
+ }, {
86
+ key: menuItem.key,
87
+ type: menuItem.type
88
+ }]
89
+ }, menuItemsInNestedMenuSection.map(nestedMenuItem => {
90
+ const NestedMenuItem = nestedMenuItem.component || NoOp;
91
+ return /*#__PURE__*/React.createElement(NestedMenuItem, {
92
+ key: nestedMenuItem.key,
93
+ parents: [...parents, {
94
+ key: item.key,
95
+ type: item.type
96
+ }, {
97
+ key: menuSection.key,
98
+ type: menuSection.type
99
+ }, {
100
+ key: menuItem.key,
101
+ type: menuItem.type
102
+ }, {
103
+ key: nestedMenuSection.key,
104
+ type: nestedMenuSection.type
105
+ }]
106
+ });
107
+ }));
108
+ }));
109
+ }
58
110
  const MenuItem = menuItem.component || NoOp;
59
111
  return /*#__PURE__*/React.createElement(MenuItem, {
60
112
  key: menuItem.key,
package/dist/esm/ui/toolbar-model-renderer/index.js CHANGED
@@ -18,6 +18,9 @@ var isToolbarMenuSection = function isToolbarMenuSection(component) {
18
18
  var isToolbarMenuItem = function isToolbarMenuItem(component) {
19
19
  return component.type === 'menu-item' || component.type === 'menu-section';
20
20
  };
21
+ var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
22
+ return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
23
+ };
21
24
  var getSortedChildren = function getSortedChildren(components, parentKey) {
22
25
  return components.filter(function (component) {
23
26
  return component.parents.some(function (parent) {
@@ -41,6 +44,7 @@ export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
41
44
  var toolbarItems = components.filter(isToolbarItem);
42
45
  var menuSections = components.filter(isToolbarMenuSection);
43
46
  var menuItems = components.filter(isToolbarMenuItem);
47
+ var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
44
48
  var renderToolbarItem = function renderToolbarItem(_ref2) {
45
49
  var item = _ref2.item,
46
50
  index = _ref2.index,
@@ -57,7 +61,7 @@ export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
57
61
  groupLocation: groupLocation,
58
62
  parents: parents
59
63
  }, menuComponents.map(function (menuSection) {
60
- var menuItemsInSection = getSortedChildren(menuItems, menuSection.key);
64
+ var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
61
65
  var MenuSection = menuSection.component || fallbacks.menuSection;
62
66
  return /*#__PURE__*/React.createElement(MenuSection, {
63
67
  key: menuSection.key,
@@ -66,6 +70,54 @@ export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
66
70
  type: item.type
67
71
  }])
68
72
  }, menuItemsInSection.map(function (menuItem) {
73
+ if (menuItem.type === 'nested-menu') {
74
+ var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
75
+ var NestedMenu = menuItem.component;
76
+ return /*#__PURE__*/React.createElement(NestedMenu, {
77
+ key: menuItem.key,
78
+ parents: [].concat(_toConsumableArray(parents), [{
79
+ key: item.key,
80
+ type: item.type
81
+ }, {
82
+ key: menuSection.key,
83
+ type: menuSection.type
84
+ }])
85
+ }, nestedMenuComponents.map(function (nestedMenuSection) {
86
+ var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
87
+ var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
88
+ return /*#__PURE__*/React.createElement(NestedMenuSection, {
89
+ key: nestedMenuSection.key,
90
+ parents: [].concat(_toConsumableArray(parents), [{
91
+ key: item.key,
92
+ type: item.type
93
+ }, {
94
+ key: menuSection.key,
95
+ type: menuSection.type
96
+ }, {
97
+ key: menuItem.key,
98
+ type: menuItem.type
99
+ }])
100
+ }, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
101
+ var NestedMenuItem = nestedMenuItem.component || NoOp;
102
+ return /*#__PURE__*/React.createElement(NestedMenuItem, {
103
+ key: nestedMenuItem.key,
104
+ parents: [].concat(_toConsumableArray(parents), [{
105
+ key: item.key,
106
+ type: item.type
107
+ }, {
108
+ key: menuSection.key,
109
+ type: menuSection.type
110
+ }, {
111
+ key: menuItem.key,
112
+ type: menuItem.type
113
+ }, {
114
+ key: nestedMenuSection.key,
115
+ type: nestedMenuSection.type
116
+ }])
117
+ });
118
+ }));
119
+ }));
120
+ }
69
121
  var MenuItem = menuItem.component || NoOp;
70
122
  return /*#__PURE__*/React.createElement(MenuItem, {
71
123
  key: menuItem.key,
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
2
- export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
2
+ export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarNestedMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
3
3
  export { createComponentRegistry } from './create-registry';
package/dist/types/types/index.d.ts CHANGED
@@ -3,7 +3,7 @@ type WithRank<T> = T & {
3
3
  rank: number;
4
4
  };
5
5
  type Parents<T> = Array<WithRank<T>>;
6
- type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarMenuSection | ToolbarMenuItem;
6
+ type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarNestedMenu | ToolbarMenuSection | ToolbarMenuItem;
7
7
  export type ComponentTypes = Array<ComponentType>;
8
8
  type CommonComponentProps = {
9
9
  /**
@@ -26,6 +26,9 @@ export type ToolbarMenuComponent = (props: {
26
26
  groupLocation?: ToolbarButtonGroupLocation;
27
27
  children: React.ReactNode;
28
28
  } & CommonComponentProps) => React.ReactNode;
29
+ export type ToolbarNestedMenuComponent = (props: {
30
+ children: React.ReactNode;
31
+ } & CommonComponentProps) => React.ReactNode;
29
32
  export type ToolbarButtonComponent = (props: {
30
33
  groupLocation?: ToolbarButtonGroupLocation;
31
34
  } & CommonComponentProps) => React.ReactNode;
@@ -61,6 +64,10 @@ type ToolbarMenu = {
61
64
  key: string;
62
65
  type: 'menu';
63
66
  };
67
+ type ToolbarNestedMenu = {
68
+ key: string;
69
+ type: 'nested-menu';
70
+ };
64
71
  export type RegisterToolbar = Toolbar & {
65
72
  component?: ToolbarComponent;
66
73
  };
@@ -80,13 +87,17 @@ export type RegisterToolbarMenu = ToolbarMenu & {
80
87
  parents: Parents<ToolbarGroup>;
81
88
  component?: ToolbarMenuComponent;
82
89
  };
90
+ export type RegisterToolbarNestedMenu = ToolbarNestedMenu & {
91
+ parents: Parents<ToolbarMenuSection>;
92
+ component: ToolbarNestedMenuComponent;
93
+ };
83
94
  export type RegisterToolbarMenuSection = ToolbarMenuSection & {
84
- parents: Parents<ToolbarMenu>;
95
+ parents: Parents<ToolbarMenu | ToolbarNestedMenu>;
85
96
  component?: ToolbarMenuSectionComponent;
86
97
  };
87
98
  export type RegisterToolbarMenuItem = ToolbarMenuItem & {
88
99
  parents: Parents<ToolbarMenuSection>;
89
100
  component?: ToolbarMenuItemComponent;
90
101
  };
91
- export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
102
+ export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarNestedMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
92
103
  export {};
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { ToolbarModelRenderer } from './ui/toolbar-model-renderer';
2
- export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
2
+ export type { ToolbarMenuComponent, ToolbarButtonComponent, ToolbarMenuItemComponent, ToolbarGroupComponent, RegisterToolbar, RegisterToolbarSection, RegisterToolbarGroup, RegisterToolbarButton, RegisterToolbarMenu, RegisterToolbarNestedMenu, RegisterToolbarMenuSection, RegisterToolbarMenuItem, RegisterComponent, } from './types';
3
3
  export { createComponentRegistry } from './create-registry';
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -3,7 +3,7 @@ type WithRank<T> = T & {
3
3
  rank: number;
4
4
  };
5
5
  type Parents<T> = Array<WithRank<T>>;
6
- type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarMenuSection | ToolbarMenuItem;
6
+ type ComponentType = Toolbar | ToolbarSection | ToolbarGroup | ToolbarButton | ToolbarMenu | ToolbarNestedMenu | ToolbarMenuSection | ToolbarMenuItem;
7
7
  export type ComponentTypes = Array<ComponentType>;
8
8
  type CommonComponentProps = {
9
9
  /**
@@ -26,6 +26,9 @@ export type ToolbarMenuComponent = (props: {
26
26
  groupLocation?: ToolbarButtonGroupLocation;
27
27
  children: React.ReactNode;
28
28
  } & CommonComponentProps) => React.ReactNode;
29
+ export type ToolbarNestedMenuComponent = (props: {
30
+ children: React.ReactNode;
31
+ } & CommonComponentProps) => React.ReactNode;
29
32
  export type ToolbarButtonComponent = (props: {
30
33
  groupLocation?: ToolbarButtonGroupLocation;
31
34
  } & CommonComponentProps) => React.ReactNode;
@@ -61,6 +64,10 @@ type ToolbarMenu = {
61
64
  key: string;
62
65
  type: 'menu';
63
66
  };
67
+ type ToolbarNestedMenu = {
68
+ key: string;
69
+ type: 'nested-menu';
70
+ };
64
71
  export type RegisterToolbar = Toolbar & {
65
72
  component?: ToolbarComponent;
66
73
  };
@@ -80,13 +87,17 @@ export type RegisterToolbarMenu = ToolbarMenu & {
80
87
  parents: Parents<ToolbarGroup>;
81
88
  component?: ToolbarMenuComponent;
82
89
  };
90
+ export type RegisterToolbarNestedMenu = ToolbarNestedMenu & {
91
+ parents: Parents<ToolbarMenuSection>;
92
+ component: ToolbarNestedMenuComponent;
93
+ };
83
94
  export type RegisterToolbarMenuSection = ToolbarMenuSection & {
84
- parents: Parents<ToolbarMenu>;
95
+ parents: Parents<ToolbarMenu | ToolbarNestedMenu>;
85
96
  component?: ToolbarMenuSectionComponent;
86
97
  };
87
98
  export type RegisterToolbarMenuItem = ToolbarMenuItem & {
88
99
  parents: Parents<ToolbarMenuSection>;
89
100
  component?: ToolbarMenuItemComponent;
90
101
  };
91
- export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
102
+ export type RegisterComponent = RegisterToolbar | RegisterToolbarSection | RegisterToolbarGroup | RegisterToolbarButton | RegisterToolbarMenu | RegisterToolbarNestedMenu | RegisterToolbarMenuSection | RegisterToolbarMenuItem;
92
103
  export {};
package/package.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "dependencies": {
27
27
  "@atlaskit/css": "^0.12.0",
28
28
  "@atlaskit/primitives": "^14.11.0",
29
- "@atlaskit/tokens": "^5.6.0",
29
+ "@atlaskit/tokens": "^6.0.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@compiled/react": "^0.18.3"
32
32
  },
@@ -36,7 +36,7 @@
36
36
  "devDependencies": {
37
37
  "@af/integration-testing": "workspace:^",
38
38
  "@af/visual-regression": "workspace:^",
39
- "@atlaskit/editor-toolbar": "^0.0.5",
39
+ "@atlaskit/editor-toolbar": "^0.0.8",
40
40
  "@atlaskit/ssr": "workspace:^",
41
41
  "@atlaskit/visual-regression": "workspace:^",
42
42
  "@testing-library/react": "^13.4.0",
@@ -79,7 +79,7 @@
79
79
  }
80
80
  },
81
81
  "name": "@atlaskit/editor-toolbar-model",
82
- "version": "0.0.1",
82
+ "version": "0.0.3",
83
83
  "description": "register and render toolbar component",
84
84
  "author": "Atlassian Pty Ltd",
85
85
  "license": "Apache-2.0",