@atlaskit/editor-toolbar 0.3.4 → 0.3.6
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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/hooks/ui-context.js +6 -3
- package/dist/cjs/ui/Toolbar.compiled.css +3 -6
- package/dist/cjs/ui/Toolbar.js +2 -2
- package/dist/cjs/ui/ToolbarButtonGroup.compiled.css +1 -2
- package/dist/cjs/ui/ToolbarButtonGroup.js +1 -1
- package/dist/cjs/ui/ToolbarSection.compiled.css +6 -1
- package/dist/cjs/ui/ToolbarSection.js +13 -7
- package/dist/es2019/hooks/ui-context.js +6 -3
- package/dist/es2019/ui/Toolbar.compiled.css +3 -6
- package/dist/es2019/ui/Toolbar.js +2 -2
- package/dist/es2019/ui/ToolbarButtonGroup.compiled.css +1 -2
- package/dist/es2019/ui/ToolbarButtonGroup.js +1 -1
- package/dist/es2019/ui/ToolbarSection.compiled.css +6 -1
- package/dist/es2019/ui/ToolbarSection.js +10 -5
- package/dist/esm/hooks/ui-context.js +6 -3
- package/dist/esm/ui/Toolbar.compiled.css +3 -6
- package/dist/esm/ui/Toolbar.js +2 -2
- package/dist/esm/ui/ToolbarButtonGroup.compiled.css +1 -2
- package/dist/esm/ui/ToolbarButtonGroup.js +1 -1
- package/dist/esm/ui/ToolbarSection.compiled.css +6 -1
- package/dist/esm/ui/ToolbarSection.js +10 -5
- package/dist/types/hooks/ui-context.d.ts +3 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/ui/Toolbar.d.ts +5 -0
- package/dist/types/ui/ToolbarSection.d.ts +10 -2
- package/dist/types-ts4.5/hooks/ui-context.d.ts +3 -2
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/ui/Toolbar.d.ts +5 -0
- package/dist/types-ts4.5/ui/ToolbarSection.d.ts +10 -2
- package/package.json +1 -1
- package/afm-cc/tsconfig.json +0 -54
- package/afm-dev-agents/tsconfig.json +0 -54
- package/afm-jira/tsconfig.json +0 -54
- package/afm-passionfruit/tsconfig.json +0 -54
- package/afm-post-office/tsconfig.json +0 -54
- package/afm-rovo-extension/tsconfig.json +0 -54
- package/afm-townsquare/tsconfig.json +0 -54
- package/afm-volt/tsconfig.json +0 -54
- package/build/tsconfig.json +0 -17
- package/examples/basic.tsx +0 -3
- package/examples/config.jsonc +0 -8
- package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx +0 -638
- package/examples/toolbar/examples/useExampleToolbarState.tsx +0 -86
- package/examples/toolbar-ui.tsx +0 -26
- package/src/hooks/ui-context.tsx +0 -60
- package/src/index.ts +0 -74
- package/src/types.ts +0 -3
- package/src/ui/ColorPalette/Color.tsx +0 -118
- package/src/ui/ColorPalette/getColorMessage.ts +0 -27
- package/src/ui/ColorPalette/index.tsx +0 -125
- package/src/ui/ColorPalette/types.ts +0 -96
- package/src/ui/ColorPalette/utils.ts +0 -102
- package/src/ui/Toolbar.tsx +0 -55
- package/src/ui/ToolbarButton.tsx +0 -120
- package/src/ui/ToolbarButtonGroup.tsx +0 -57
- package/src/ui/ToolbarColorSwatch.tsx +0 -37
- package/src/ui/ToolbarDropdownItem.tsx +0 -142
- package/src/ui/ToolbarDropdownItemSection.tsx +0 -21
- package/src/ui/ToolbarDropdownMenu.tsx +0 -112
- package/src/ui/ToolbarDropdownMenuContext.tsx +0 -44
- package/src/ui/ToolbarKeyboardShortcutHint.tsx +0 -11
- package/src/ui/ToolbarNestedDropdownMenu.tsx +0 -45
- package/src/ui/ToolbarSection.tsx +0 -24
- package/src/ui/ToolbarTooltip.tsx +0 -18
- package/src/ui/icons/AIAdjustLengthIcon.tsx +0 -2
- package/src/ui/icons/AICasualIcon.tsx +0 -2
- package/src/ui/icons/AIChangeToneIcon.tsx +0 -2
- package/src/ui/icons/AIChatIcon.tsx +0 -50
- package/src/ui/icons/AICommandIcon.tsx +0 -2
- package/src/ui/icons/AIHeartIcon.tsx +0 -2
- package/src/ui/icons/AILengthenIcon.tsx +0 -2
- package/src/ui/icons/AIProfessionalIcon.tsx +0 -2
- package/src/ui/icons/AIShortenIcon.tsx +0 -2
- package/src/ui/icons/AISpellcheckIcon.tsx +0 -2
- package/src/ui/icons/AISummarizeIcon.tsx +0 -2
- package/src/ui/icons/AITranslateIcon.tsx +0 -2
- package/src/ui/icons/AddIcon.tsx +0 -2
- package/src/ui/icons/AlignTextCenterIcon.tsx +0 -2
- package/src/ui/icons/AlignTextLeftIcon.tsx +0 -2
- package/src/ui/icons/AlignTextRightIcon.tsx +0 -2
- package/src/ui/icons/AppsIcon.tsx +0 -2
- package/src/ui/icons/BoldIcon.tsx +0 -2
- package/src/ui/icons/ClearFormattingIcon.tsx +0 -2
- package/src/ui/icons/CodeIcon.tsx +0 -2
- package/src/ui/icons/CommentIcon.tsx +0 -2
- package/src/ui/icons/EmojiIcon.tsx +0 -2
- package/src/ui/icons/HeadingFiveIcon.tsx +0 -2
- package/src/ui/icons/HeadingFourIcon.tsx +0 -2
- package/src/ui/icons/HeadingOneIcon.tsx +0 -2
- package/src/ui/icons/HeadingSixIcon.tsx +0 -2
- package/src/ui/icons/HeadingThreeIcon.tsx +0 -2
- package/src/ui/icons/HeadingTwoIcon.tsx +0 -2
- package/src/ui/icons/HistoryIcon.tsx +0 -2
- package/src/ui/icons/ImageIcon.tsx +0 -2
- package/src/ui/icons/IndentIcon.tsx +0 -2
- package/src/ui/icons/ItalicIcon.tsx +0 -2
- package/src/ui/icons/LayoutIcon.tsx +0 -2
- package/src/ui/icons/LinkIcon.tsx +0 -2
- package/src/ui/icons/ListBulletedIcon.tsx +0 -2
- package/src/ui/icons/ListNumberedIcon.tsx +0 -2
- package/src/ui/icons/MentionIcon.tsx +0 -2
- package/src/ui/icons/MoreItemsIcon.tsx +0 -22
- package/src/ui/icons/NestedDropdownRightIcon.tsx +0 -22
- package/src/ui/icons/OutdentIcon.tsx +0 -2
- package/src/ui/icons/PinIcon.tsx +0 -2
- package/src/ui/icons/PinnedIcon.tsx +0 -2
- package/src/ui/icons/QuoteIcon.tsx +0 -2
- package/src/ui/icons/RedoIcon.tsx +0 -2
- package/src/ui/icons/ShowMoreHorizontal.tsx +0 -22
- package/src/ui/icons/StrikeThroughIcon.tsx +0 -2
- package/src/ui/icons/SubscriptIcon.tsx +0 -31
- package/src/ui/icons/SuperscriptIcon.tsx +0 -31
- package/src/ui/icons/TableIcon.tsx +0 -2
- package/src/ui/icons/TaskIcon.tsx +0 -2
- package/src/ui/icons/TextColorIcon.tsx +0 -43
- package/src/ui/icons/TextIcon.tsx +0 -2
- package/src/ui/icons/UnderlineIcon.tsx +0 -2
- package/src/ui/icons/UndoIcon.tsx +0 -2
- package/tsconfig.app.json +0 -65
- package/tsconfig.dev.json +0 -56
- package/tsconfig.json +0 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.3.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`098cfbb01dc36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/098cfbb01dc36) -
|
|
8
|
+
Add missing npmignore files to remove unnecessary files from published package
|
|
9
|
+
|
|
10
|
+
## 0.3.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`286abb4d35eba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/286abb4d35eba) -
|
|
15
|
+
[ux] [ED-28960] Finish full page primary toolbar migration
|
|
16
|
+
|
|
17
|
+
- Align with design update (separator, gap, height, icon size)
|
|
18
|
+
- Add keyboard shortcut to focus toolbar and arrow key navigation
|
|
19
|
+
- Address accessibility
|
|
20
|
+
|
|
3
21
|
## 0.3.4
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -10,7 +10,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
10
10
|
var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
|
|
11
11
|
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
12
12
|
preventDefaultOnMouseDown: false,
|
|
13
|
-
isDisabled: false
|
|
13
|
+
isDisabled: false,
|
|
14
|
+
popupsMountPoint: undefined
|
|
14
15
|
});
|
|
15
16
|
|
|
16
17
|
/**
|
|
@@ -27,12 +28,14 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
|
|
|
27
28
|
var children = _ref.children,
|
|
28
29
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
29
30
|
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
30
|
-
isDisabled = _ref.isDisabled
|
|
31
|
+
isDisabled = _ref.isDisabled,
|
|
32
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
31
33
|
return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
|
|
32
34
|
value: {
|
|
33
35
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
34
36
|
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
35
|
-
isDisabled: isDisabled
|
|
37
|
+
isDisabled: isDisabled,
|
|
38
|
+
popupsMountPoint: popupsMountPoint
|
|
36
39
|
}
|
|
37
40
|
}, children);
|
|
38
41
|
};
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
._2rkoi2wt{border-radius:6px}
|
|
2
|
+
._2rkoi2wt{border-radius:6px}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
|
|
3
4
|
._19bv1b66{padding-left:var(--ds-space-050,4px)}
|
|
4
|
-
._19bvutpp{padding-left:var(--ds-space-150,9pt)}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
6
6
|
._1tkezwfg{min-height:2pc}
|
|
7
7
|
._4cvr1h6o{align-items:center}
|
|
8
8
|
._4t3i14no{height:36px}
|
|
9
9
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
10
|
-
.
|
|
11
|
-
._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
|
|
12
|
-
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
13
|
-
._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
|
|
10
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
package/dist/cjs/ui/Toolbar.js
CHANGED
|
@@ -12,9 +12,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
12
12
|
var _css = require("@atlaskit/css");
|
|
13
13
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
14
14
|
var styles = {
|
|
15
|
-
toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
15
|
+
toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
16
16
|
toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
|
|
17
|
-
primaryToolbar: "_bfhkvuon _1tkezwfg
|
|
17
|
+
primaryToolbar: "_bfhkvuon _1tkezwfg"
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
|
|
2
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
|
|
4
3
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
5
4
|
._t1diidpf button{border-top-right-radius:0}
|
|
6
5
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
|
|
|
14
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
15
|
var styles = {
|
|
16
16
|
container: "_1e0c1txw",
|
|
17
|
-
firstChild: "
|
|
17
|
+
firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
|
|
18
18
|
lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
|
|
19
19
|
};
|
|
20
20
|
var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
|
|
3
|
+
._1bsbt94y{width:1px}
|
|
1
4
|
._1e0c1txw{display:flex}
|
|
2
|
-
._4cvr1h6o{align-items:center}
|
|
5
|
+
._4cvr1h6o{align-items:center}
|
|
6
|
+
._4t3igktf{height:20px}
|
|
7
|
+
._bfhkmuej{background-color:var(--ds-border,#091e4224)}
|
|
@@ -1,23 +1,29 @@
|
|
|
1
1
|
/* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.ToolbarSection = void 0;
|
|
9
9
|
require("./ToolbarSection.compiled.css");
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
11
|
var _runtime = require("@compiled/react/runtime");
|
|
11
|
-
var
|
|
12
|
+
var _css = require("@atlaskit/css");
|
|
12
13
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
13
15
|
var styles = {
|
|
14
|
-
container: "_1e0c1txw _4cvr1h6o"
|
|
16
|
+
container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
|
|
15
17
|
};
|
|
18
|
+
var separator = null;
|
|
16
19
|
var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
|
|
17
20
|
var children = _ref.children,
|
|
18
|
-
testId = _ref.testId
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
testId = _ref.testId,
|
|
22
|
+
hasSeparator = _ref.hasSeparator;
|
|
23
|
+
return /*#__PURE__*/React.createElement(_compiled.Box, {
|
|
24
|
+
xcss: (0, _css.cx)(styles.container),
|
|
21
25
|
testId: testId
|
|
22
|
-
},
|
|
26
|
+
}, hasSeparator && /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
|
|
28
|
+
}), children);
|
|
23
29
|
};
|
|
@@ -2,7 +2,8 @@ import React, { createContext, useContext } from 'react';
|
|
|
2
2
|
const ToolbarUIContext = /*#__PURE__*/createContext({
|
|
3
3
|
onDropdownOpenChanged: () => {},
|
|
4
4
|
preventDefaultOnMouseDown: false,
|
|
5
|
-
isDisabled: false
|
|
5
|
+
isDisabled: false,
|
|
6
|
+
popupsMountPoint: undefined
|
|
6
7
|
});
|
|
7
8
|
|
|
8
9
|
/**
|
|
@@ -19,13 +20,15 @@ export const ToolbarUIProvider = ({
|
|
|
19
20
|
children,
|
|
20
21
|
onDropdownOpenChanged,
|
|
21
22
|
preventDefaultOnMouseDown,
|
|
22
|
-
isDisabled
|
|
23
|
+
isDisabled,
|
|
24
|
+
popupsMountPoint
|
|
23
25
|
}) => {
|
|
24
26
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
25
27
|
value: {
|
|
26
28
|
onDropdownOpenChanged,
|
|
27
29
|
preventDefaultOnMouseDown,
|
|
28
|
-
isDisabled
|
|
30
|
+
isDisabled,
|
|
31
|
+
popupsMountPoint
|
|
29
32
|
}
|
|
30
33
|
}, children);
|
|
31
34
|
};
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
._2rkoi2wt{border-radius:6px}
|
|
2
|
+
._2rkoi2wt{border-radius:6px}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
|
|
3
4
|
._19bv1b66{padding-left:var(--ds-space-050,4px)}
|
|
4
|
-
._19bvutpp{padding-left:var(--ds-space-150,9pt)}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
6
6
|
._1tkezwfg{min-height:2pc}
|
|
7
7
|
._4cvr1h6o{align-items:center}
|
|
8
8
|
._4t3i14no{height:36px}
|
|
9
9
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
10
|
-
.
|
|
11
|
-
._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
|
|
12
|
-
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
13
|
-
._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
|
|
10
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
@@ -5,9 +5,9 @@ import React from 'react';
|
|
|
5
5
|
import { cx } from '@atlaskit/css';
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
7
|
const styles = {
|
|
8
|
-
toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
8
|
+
toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
9
9
|
toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
|
|
10
|
-
primaryToolbar: "_bfhkvuon _1tkezwfg
|
|
10
|
+
primaryToolbar: "_bfhkvuon _1tkezwfg"
|
|
11
11
|
};
|
|
12
12
|
/**
|
|
13
13
|
* A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
|
|
2
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
|
|
4
3
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
5
4
|
._t1diidpf button{border-top-right-radius:0}
|
|
6
5
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
@@ -6,7 +6,7 @@ import { Children, Fragment } from 'react';
|
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
7
|
const styles = {
|
|
8
8
|
container: "_1e0c1txw",
|
|
9
|
-
firstChild: "
|
|
9
|
+
firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
|
|
10
10
|
lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
|
|
11
11
|
};
|
|
12
12
|
export const ToolbarButtonGroup = ({
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
|
|
3
|
+
._1bsbt94y{width:1px}
|
|
1
4
|
._1e0c1txw{display:flex}
|
|
2
|
-
._4cvr1h6o{align-items:center}
|
|
5
|
+
._4cvr1h6o{align-items:center}
|
|
6
|
+
._4t3igktf{height:20px}
|
|
7
|
+
._bfhkmuej{background-color:var(--ds-border,#091e4224)}
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
/* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import "./ToolbarSection.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
3
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import
|
|
5
|
+
import { cx } from '@atlaskit/css';
|
|
5
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
6
7
|
const styles = {
|
|
7
|
-
container: "_1e0c1txw _4cvr1h6o"
|
|
8
|
+
container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
|
|
8
9
|
};
|
|
10
|
+
const separator = null;
|
|
9
11
|
export const ToolbarSection = ({
|
|
10
12
|
children,
|
|
11
|
-
testId
|
|
13
|
+
testId,
|
|
14
|
+
hasSeparator
|
|
12
15
|
}) => {
|
|
13
16
|
return /*#__PURE__*/React.createElement(Box, {
|
|
14
|
-
xcss: styles.container,
|
|
17
|
+
xcss: cx(styles.container),
|
|
15
18
|
testId: testId
|
|
16
|
-
},
|
|
19
|
+
}, hasSeparator && /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
|
|
21
|
+
}), children);
|
|
17
22
|
};
|
|
@@ -2,7 +2,8 @@ import React, { createContext, useContext } from 'react';
|
|
|
2
2
|
var ToolbarUIContext = /*#__PURE__*/createContext({
|
|
3
3
|
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
4
4
|
preventDefaultOnMouseDown: false,
|
|
5
|
-
isDisabled: false
|
|
5
|
+
isDisabled: false,
|
|
6
|
+
popupsMountPoint: undefined
|
|
6
7
|
});
|
|
7
8
|
|
|
8
9
|
/**
|
|
@@ -19,12 +20,14 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
|
|
|
19
20
|
var children = _ref.children,
|
|
20
21
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
21
22
|
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
22
|
-
isDisabled = _ref.isDisabled
|
|
23
|
+
isDisabled = _ref.isDisabled,
|
|
24
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
23
25
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
24
26
|
value: {
|
|
25
27
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
26
28
|
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
27
|
-
isDisabled: isDisabled
|
|
29
|
+
isDisabled: isDisabled,
|
|
30
|
+
popupsMountPoint: popupsMountPoint
|
|
28
31
|
}
|
|
29
32
|
}, children);
|
|
30
33
|
};
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
._2rkoi2wt{border-radius:6px}
|
|
2
|
+
._2rkoi2wt{border-radius:6px}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
|
|
3
4
|
._19bv1b66{padding-left:var(--ds-space-050,4px)}
|
|
4
|
-
._19bvutpp{padding-left:var(--ds-space-150,9pt)}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
6
6
|
._1tkezwfg{min-height:2pc}
|
|
7
7
|
._4cvr1h6o{align-items:center}
|
|
8
8
|
._4t3i14no{height:36px}
|
|
9
9
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
10
|
-
.
|
|
11
|
-
._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
|
|
12
|
-
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
13
|
-
._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
|
|
10
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
package/dist/esm/ui/Toolbar.js
CHANGED
|
@@ -5,9 +5,9 @@ import React from 'react';
|
|
|
5
5
|
import { cx } from '@atlaskit/css';
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
7
|
var styles = {
|
|
8
|
-
toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
8
|
+
toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
|
|
9
9
|
toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
|
|
10
|
-
primaryToolbar: "_bfhkvuon _1tkezwfg
|
|
10
|
+
primaryToolbar: "_bfhkvuon _1tkezwfg"
|
|
11
11
|
};
|
|
12
12
|
/**
|
|
13
13
|
* A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
|
|
2
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
|
|
4
3
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
5
4
|
._t1diidpf button{border-top-right-radius:0}
|
|
6
5
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
@@ -6,7 +6,7 @@ import { Children, Fragment } from 'react';
|
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
7
|
var styles = {
|
|
8
8
|
container: "_1e0c1txw",
|
|
9
|
-
firstChild: "
|
|
9
|
+
firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
|
|
10
10
|
lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
|
|
11
11
|
};
|
|
12
12
|
export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
|
|
3
|
+
._1bsbt94y{width:1px}
|
|
1
4
|
._1e0c1txw{display:flex}
|
|
2
|
-
._4cvr1h6o{align-items:center}
|
|
5
|
+
._4cvr1h6o{align-items:center}
|
|
6
|
+
._4t3igktf{height:20px}
|
|
7
|
+
._bfhkmuej{background-color:var(--ds-border,#091e4224)}
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
/* ToolbarSection.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import "./ToolbarSection.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
3
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import
|
|
5
|
+
import { cx } from '@atlaskit/css';
|
|
5
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
6
7
|
var styles = {
|
|
7
|
-
container: "_1e0c1txw _4cvr1h6o"
|
|
8
|
+
container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
|
|
8
9
|
};
|
|
10
|
+
var separator = null;
|
|
9
11
|
export var ToolbarSection = function ToolbarSection(_ref) {
|
|
10
12
|
var children = _ref.children,
|
|
11
|
-
testId = _ref.testId
|
|
13
|
+
testId = _ref.testId,
|
|
14
|
+
hasSeparator = _ref.hasSeparator;
|
|
12
15
|
return /*#__PURE__*/React.createElement(Box, {
|
|
13
|
-
xcss: styles.container,
|
|
16
|
+
xcss: cx(styles.container),
|
|
14
17
|
testId: testId
|
|
15
|
-
},
|
|
18
|
+
}, hasSeparator && /*#__PURE__*/React.createElement("div", {
|
|
19
|
+
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
|
|
20
|
+
}), children);
|
|
16
21
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
|
|
3
|
-
type ToolbarUIContextType = {
|
|
3
|
+
export type ToolbarUIContextType = {
|
|
4
4
|
/**
|
|
5
5
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
6
6
|
*
|
|
@@ -15,6 +15,7 @@ type ToolbarUIContextType = {
|
|
|
15
15
|
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
16
|
*/
|
|
17
17
|
isDisabled?: boolean;
|
|
18
|
+
popupsMountPoint?: HTMLElement;
|
|
18
19
|
};
|
|
19
20
|
/**
|
|
20
21
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -23,5 +24,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
23
24
|
type ToolbarUIProviderProps = {
|
|
24
25
|
children: React.ReactNode;
|
|
25
26
|
} & ToolbarUIContextType;
|
|
26
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
27
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
27
28
|
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -66,4 +66,4 @@ export { RedoIcon } from './ui/icons/RedoIcon';
|
|
|
66
66
|
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
67
67
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
68
68
|
export type { IconComponent } from './types';
|
|
69
|
-
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
69
|
+
export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
type ToolbarProps = {
|
|
3
3
|
children?: ReactNode;
|
|
4
|
+
/**
|
|
5
|
+
* aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
|
|
6
|
+
*
|
|
7
|
+
* use case: query select the toolbar to position floating toolbar
|
|
8
|
+
*/
|
|
4
9
|
label: string;
|
|
5
10
|
};
|
|
6
11
|
/**
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
2
6
|
type ToolbarSectionProps = {
|
|
3
7
|
children?: ReactNode;
|
|
4
8
|
testId?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to add a separator at the start of the section
|
|
11
|
+
*/
|
|
12
|
+
hasSeparator?: boolean;
|
|
5
13
|
};
|
|
6
|
-
export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) =>
|
|
14
|
+
export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
|
|
7
15
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
|
|
3
|
-
type ToolbarUIContextType = {
|
|
3
|
+
export type ToolbarUIContextType = {
|
|
4
4
|
/**
|
|
5
5
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
6
6
|
*
|
|
@@ -15,6 +15,7 @@ type ToolbarUIContextType = {
|
|
|
15
15
|
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
16
|
*/
|
|
17
17
|
isDisabled?: boolean;
|
|
18
|
+
popupsMountPoint?: HTMLElement;
|
|
18
19
|
};
|
|
19
20
|
/**
|
|
20
21
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -23,5 +24,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
23
24
|
type ToolbarUIProviderProps = {
|
|
24
25
|
children: React.ReactNode;
|
|
25
26
|
} & ToolbarUIContextType;
|
|
26
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
27
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
27
28
|
export {};
|
|
@@ -66,4 +66,4 @@ export { RedoIcon } from './ui/icons/RedoIcon';
|
|
|
66
66
|
export { HistoryIcon } from './ui/icons/HistoryIcon';
|
|
67
67
|
export { default as ColorPalette } from './ui/ColorPalette';
|
|
68
68
|
export type { IconComponent } from './types';
|
|
69
|
-
export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
|
|
69
|
+
export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
type ToolbarProps = {
|
|
3
3
|
children?: ReactNode;
|
|
4
|
+
/**
|
|
5
|
+
* aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
|
|
6
|
+
*
|
|
7
|
+
* use case: query select the toolbar to position floating toolbar
|
|
8
|
+
*/
|
|
4
9
|
label: string;
|
|
5
10
|
};
|
|
6
11
|
/**
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
2
6
|
type ToolbarSectionProps = {
|
|
3
7
|
children?: ReactNode;
|
|
4
8
|
testId?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to add a separator at the start of the section
|
|
11
|
+
*/
|
|
12
|
+
hasSeparator?: boolean;
|
|
5
13
|
};
|
|
6
|
-
export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) =>
|
|
14
|
+
export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
|
|
7
15
|
export {};
|
package/package.json
CHANGED
package/afm-cc/tsconfig.json
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.confluence.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"declaration": true,
|
|
5
|
-
"target": "es5",
|
|
6
|
-
"composite": true,
|
|
7
|
-
"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-toolbar",
|
|
8
|
-
"rootDir": "../"
|
|
9
|
-
},
|
|
10
|
-
"include": [
|
|
11
|
-
"../src/**/*.ts",
|
|
12
|
-
"../src/**/*.tsx"
|
|
13
|
-
],
|
|
14
|
-
"exclude": [
|
|
15
|
-
"../src/**/__tests__/*",
|
|
16
|
-
"../src/**/*.test.*",
|
|
17
|
-
"../src/**/test.*"
|
|
18
|
-
],
|
|
19
|
-
"references": [
|
|
20
|
-
{
|
|
21
|
-
"path": "../../../design-system/badge/afm-cc/tsconfig.json"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"path": "../../../design-system/button/afm-cc/tsconfig.json"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"path": "../../../design-system/css/afm-cc/tsconfig.json"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"path": "../../../design-system/icon/afm-cc/tsconfig.json"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"path": "../../../design-system/logo/afm-cc/tsconfig.json"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"path": "../../../design-system/popup/afm-cc/tsconfig.json"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
|
|
52
|
-
}
|
|
53
|
-
]
|
|
54
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.dev-agents.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"declaration": true,
|
|
5
|
-
"target": "es5",
|
|
6
|
-
"outDir": "../../../../../dev-agents/tsDist/@atlaskit__editor-toolbar/app",
|
|
7
|
-
"rootDir": "../",
|
|
8
|
-
"composite": true
|
|
9
|
-
},
|
|
10
|
-
"include": [
|
|
11
|
-
"../src/**/*.ts",
|
|
12
|
-
"../src/**/*.tsx"
|
|
13
|
-
],
|
|
14
|
-
"exclude": [
|
|
15
|
-
"../src/**/__tests__/*",
|
|
16
|
-
"../src/**/*.test.*",
|
|
17
|
-
"../src/**/test.*"
|
|
18
|
-
],
|
|
19
|
-
"references": [
|
|
20
|
-
{
|
|
21
|
-
"path": "../../../design-system/badge/afm-dev-agents/tsconfig.json"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"path": "../../../design-system/button/afm-dev-agents/tsconfig.json"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"path": "../../../design-system/css/afm-dev-agents/tsconfig.json"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"path": "../../../design-system/dropdown-menu/afm-dev-agents/tsconfig.json"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"path": "../../../design-system/icon/afm-dev-agents/tsconfig.json"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"path": "../../../design-system/icon-lab/afm-dev-agents/tsconfig.json"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"path": "../../../design-system/logo/afm-dev-agents/tsconfig.json"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"path": "../../../design-system/popup/afm-dev-agents/tsconfig.json"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"path": "../../../design-system/primitives/afm-dev-agents/tsconfig.json"
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"path": "../../../design-system/tokens/afm-dev-agents/tsconfig.json"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"path": "../../../design-system/tooltip/afm-dev-agents/tsconfig.json"
|
|
52
|
-
}
|
|
53
|
-
]
|
|
54
|
-
}
|