@atlaskit/editor-common 76.25.1 → 76.25.2
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 +9 -0
- package/afm-cc/tsconfig.json +133 -0
- package/dist/cjs/card/LinkToolbarButtonGroup.js +6 -5
- package/dist/cjs/element-browser/ViewMore.js +4 -3
- package/dist/cjs/element-browser/components/CategoryList.js +5 -4
- package/dist/cjs/element-browser/components/ElementBrowserLoader.js +3 -2
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +21 -20
- package/dist/cjs/element-browser/components/ElementList/EmptyState.js +9 -8
- package/dist/cjs/element-browser/components/ElementList/NotFoundIllustration.js +16 -15
- package/dist/cjs/element-browser/components/ElementSearch.js +7 -6
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +22 -21
- package/dist/cjs/element-browser/hooks/use-container-width.js +3 -2
- package/dist/cjs/keymaps/index.js +2 -1
- package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +22 -21
- package/dist/cjs/link/LinkSearch/LinkSearchList.js +6 -5
- package/dist/cjs/link/LinkSearch/LinkSearchListItem.js +11 -9
- package/dist/cjs/media-inline/inline-image-wrapper.js +3 -1
- package/dist/cjs/media-inline/media-inline-image-card.js +22 -13
- package/dist/cjs/media-inline/types.js +5 -0
- package/dist/cjs/media-inline/views/error-view.js +6 -3
- package/dist/cjs/media-inline/views/frame.js +4 -1
- package/dist/cjs/media-inline/views/icon-wrapper.js +3 -1
- package/dist/cjs/media-inline/views/loading-view.js +5 -2
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +8 -5
- package/dist/cjs/ui/Caption/index.js +3 -2
- package/dist/cjs/ui/DropList/index.js +6 -6
- package/dist/cjs/ui/Expand/index.js +5 -3
- package/dist/cjs/ui/FloatingToolbar/Separator.js +2 -1
- package/dist/cjs/ui/FloatingToolbar/SmallerEditIcon.js +3 -2
- package/dist/cjs/ui/MediaSingle/index.js +5 -2
- package/dist/cjs/ui/MediaSingle/styled.js +3 -2
- package/dist/cjs/ui/Messages/index.js +8 -7
- package/dist/cjs/ui/PanelTextInput/index.js +3 -2
- package/dist/cjs/ui/UnsupportedBlock/index.js +5 -4
- package/dist/cjs/ui/UnsupportedInline/index.js +5 -4
- package/dist/cjs/ui/WidthProvider/index.js +4 -4
- package/dist/cjs/ui-color/ColorPalette/Color/index.js +6 -5
- package/dist/cjs/ui-color/ColorPalette/index.js +6 -3
- package/dist/cjs/ui-menu/ColorPickerButton/index.js +10 -9
- package/dist/cjs/ui-menu/DropdownContainer/index.js +3 -3
- package/dist/cjs/ui-menu/DropdownMenu/index.js +19 -18
- package/dist/cjs/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +3 -2
- package/dist/cjs/ui-menu/ToolbarButton/index.js +4 -3
- package/dist/es2019/card/LinkToolbarButtonGroup.js +7 -6
- package/dist/es2019/element-browser/ViewMore.js +5 -4
- package/dist/es2019/element-browser/components/CategoryList.js +6 -4
- package/dist/es2019/element-browser/components/ElementBrowserLoader.js +4 -3
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +22 -21
- package/dist/es2019/element-browser/components/ElementList/EmptyState.js +10 -9
- package/dist/es2019/element-browser/components/ElementList/NotFoundIllustration.js +17 -16
- package/dist/es2019/element-browser/components/ElementSearch.js +8 -7
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +23 -22
- package/dist/es2019/element-browser/hooks/use-container-width.js +4 -3
- package/dist/es2019/keymaps/index.js +3 -2
- package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +24 -22
- package/dist/es2019/link/LinkSearch/LinkSearchList.js +7 -6
- package/dist/es2019/link/LinkSearch/LinkSearchListItem.js +10 -9
- package/dist/es2019/media-inline/inline-image-wrapper.js +4 -2
- package/dist/es2019/media-inline/media-inline-image-card.js +22 -13
- package/dist/es2019/media-inline/types.js +1 -0
- package/dist/es2019/media-inline/views/error-view.js +6 -3
- package/dist/es2019/media-inline/views/frame.js +4 -1
- package/dist/es2019/media-inline/views/icon-wrapper.js +4 -2
- package/dist/es2019/media-inline/views/loading-view.js +5 -2
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +7 -5
- package/dist/es2019/ui/Caption/index.js +4 -3
- package/dist/es2019/ui/DropList/index.js +8 -6
- package/dist/es2019/ui/Expand/index.js +5 -3
- package/dist/es2019/ui/FloatingToolbar/Separator.js +3 -2
- package/dist/es2019/ui/FloatingToolbar/SmallerEditIcon.js +4 -3
- package/dist/es2019/ui/MediaSingle/index.js +4 -2
- package/dist/es2019/ui/MediaSingle/styled.js +5 -3
- package/dist/es2019/ui/Messages/index.js +10 -8
- package/dist/es2019/ui/PanelTextInput/index.js +4 -1
- package/dist/es2019/ui/UnsupportedBlock/index.js +6 -5
- package/dist/es2019/ui/UnsupportedInline/index.js +6 -5
- package/dist/es2019/ui/WidthProvider/index.js +5 -4
- package/dist/es2019/ui-color/ColorPalette/Color/index.js +6 -4
- package/dist/es2019/ui-color/ColorPalette/index.js +4 -2
- package/dist/es2019/ui-menu/ColorPickerButton/index.js +11 -10
- package/dist/es2019/ui-menu/DropdownContainer/index.js +3 -2
- package/dist/es2019/ui-menu/DropdownMenu/index.js +21 -19
- package/dist/es2019/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +4 -3
- package/dist/es2019/ui-menu/ToolbarButton/index.js +5 -5
- package/dist/esm/card/LinkToolbarButtonGroup.js +7 -6
- package/dist/esm/element-browser/ViewMore.js +5 -4
- package/dist/esm/element-browser/components/CategoryList.js +7 -5
- package/dist/esm/element-browser/components/ElementBrowserLoader.js +4 -3
- package/dist/esm/element-browser/components/ElementList/ElementList.js +22 -21
- package/dist/esm/element-browser/components/ElementList/EmptyState.js +10 -9
- package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js +17 -16
- package/dist/esm/element-browser/components/ElementSearch.js +8 -7
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +23 -22
- package/dist/esm/element-browser/hooks/use-container-width.js +4 -3
- package/dist/esm/keymaps/index.js +3 -2
- package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js +24 -22
- package/dist/esm/link/LinkSearch/LinkSearchList.js +7 -6
- package/dist/esm/link/LinkSearch/LinkSearchListItem.js +10 -9
- package/dist/esm/media-inline/inline-image-wrapper.js +4 -2
- package/dist/esm/media-inline/media-inline-image-card.js +22 -13
- package/dist/esm/media-inline/types.js +1 -0
- package/dist/esm/media-inline/views/error-view.js +6 -3
- package/dist/esm/media-inline/views/frame.js +4 -1
- package/dist/esm/media-inline/views/icon-wrapper.js +4 -2
- package/dist/esm/media-inline/views/loading-view.js +5 -2
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/react-node-view/getInlineNodeViewProducer.js +7 -5
- package/dist/esm/ui/Caption/index.js +4 -3
- package/dist/esm/ui/DropList/index.js +8 -6
- package/dist/esm/ui/Expand/index.js +5 -3
- package/dist/esm/ui/FloatingToolbar/Separator.js +3 -2
- package/dist/esm/ui/FloatingToolbar/SmallerEditIcon.js +4 -3
- package/dist/esm/ui/MediaSingle/index.js +4 -2
- package/dist/esm/ui/MediaSingle/styled.js +5 -3
- package/dist/esm/ui/Messages/index.js +10 -8
- package/dist/esm/ui/PanelTextInput/index.js +4 -1
- package/dist/esm/ui/UnsupportedBlock/index.js +6 -5
- package/dist/esm/ui/UnsupportedInline/index.js +6 -5
- package/dist/esm/ui/WidthProvider/index.js +5 -4
- package/dist/esm/ui-color/ColorPalette/Color/index.js +6 -4
- package/dist/esm/ui-color/ColorPalette/index.js +5 -3
- package/dist/esm/ui-menu/ColorPickerButton/index.js +11 -10
- package/dist/esm/ui-menu/DropdownContainer/index.js +3 -2
- package/dist/esm/ui-menu/DropdownMenu/index.js +21 -19
- package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +4 -3
- package/dist/esm/ui-menu/ToolbarButton/index.js +5 -5
- package/dist/types/media-inline/index.d.ts +1 -0
- package/dist/types/media-inline/media-inline-image-card.d.ts +4 -2
- package/dist/types/media-inline/types.d.ts +6 -0
- package/dist/types/types/floating-toolbar.d.ts +1 -0
- package/dist/types-ts4.5/media-inline/index.d.ts +1 -0
- package/dist/types-ts4.5/media-inline/media-inline-image-card.d.ts +4 -2
- package/dist/types-ts4.5/media-inline/types.d.ts +6 -0
- package/dist/types-ts4.5/types/floating-toolbar.d.ts +1 -0
- package/package.json +2 -2
|
@@ -8,9 +8,12 @@ exports.getInlineNodeViewProducer = getInlineNodeViewProducer;
|
|
|
8
8
|
exports.inlineNodeViewClassname = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _react2 = require("@emotion/react");
|
|
11
12
|
var _analytics = require("../analytics");
|
|
12
13
|
var _ErrorBoundary = require("../ui/ErrorBoundary");
|
|
13
14
|
var _utils = require("../utils");
|
|
15
|
+
/** @jsx jsx */
|
|
16
|
+
|
|
14
17
|
var inlineNodeViewClassname = exports.inlineNodeViewClassname = 'inlineNodeView';
|
|
15
18
|
function createNodeView(_ref) {
|
|
16
19
|
var nodeViewParams = _ref.nodeViewParams,
|
|
@@ -163,21 +166,21 @@ function getPortalChildren(_ref2) {
|
|
|
163
166
|
// refactor. A test suite to catch any instances of this is ideal however
|
|
164
167
|
// the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
|
|
165
168
|
|
|
166
|
-
return
|
|
169
|
+
return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
|
|
167
170
|
component: _analytics.ACTION_SUBJECT.REACT_NODE_VIEW,
|
|
168
171
|
componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 || (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
|
|
169
172
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent
|
|
170
|
-
},
|
|
173
|
+
}, (0, _react2.jsx)("span", {
|
|
171
174
|
className: "zeroWidthSpaceContainer"
|
|
172
|
-
},
|
|
175
|
+
}, (0, _react2.jsx)("span", {
|
|
173
176
|
className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
|
|
174
|
-
}), _utils.ZERO_WIDTH_SPACE),
|
|
177
|
+
}), _utils.ZERO_WIDTH_SPACE), (0, _react2.jsx)(Component, (0, _extends2.default)({
|
|
175
178
|
view: nodeViewParams.view
|
|
176
179
|
// TODO: ED-13910 - Remove the boolean to fix the prosemirror view type
|
|
177
180
|
,
|
|
178
181
|
getPos: nodeViewParams.getPos,
|
|
179
182
|
node: currentNode
|
|
180
|
-
}, extraComponentProps)),
|
|
183
|
+
}, extraComponentProps)), (0, _react2.jsx)("span", {
|
|
181
184
|
className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
|
|
182
185
|
}));
|
|
183
186
|
};
|
|
@@ -18,6 +18,7 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
18
18
|
var _colors = require("@atlaskit/theme/colors");
|
|
19
19
|
var _messages = require("./messages");
|
|
20
20
|
var _templateObject, _templateObject2;
|
|
21
|
+
/** @jsx jsx */
|
|
21
22
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
22
23
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
23
24
|
var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 8px;\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
|
|
@@ -39,12 +40,12 @@ var CaptionComponent = exports.CaptionComponent = /*#__PURE__*/function (_React$
|
|
|
39
40
|
dataAttributes = _this$props.dataAttributes,
|
|
40
41
|
formatMessage = _this$props.intl.formatMessage;
|
|
41
42
|
var showPlaceholder = !selected && !hasContent;
|
|
42
|
-
return
|
|
43
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
43
44
|
"data-media-caption": true,
|
|
44
45
|
"data-testid": "media-caption"
|
|
45
46
|
}, dataAttributes, {
|
|
46
47
|
css: captionWrapperStyle
|
|
47
|
-
}), showPlaceholder ?
|
|
48
|
+
}), showPlaceholder ? (0, _react2.jsx)("p", {
|
|
48
49
|
css: placeholderStyle
|
|
49
50
|
}, formatMessage(_messages.messages.placeholder)) : null, children);
|
|
50
51
|
}
|
|
@@ -22,9 +22,9 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
22
22
|
var _Layer = _interopRequireDefault(require("../Layer"));
|
|
23
23
|
var _templateObject, _templateObject2, _templateObject3;
|
|
24
24
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
25
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
25
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
26
26
|
var packageName = "@atlaskit/editor-common";
|
|
27
|
-
var packageVersion = "76.25.
|
|
27
|
+
var packageVersion = "76.25.2";
|
|
28
28
|
var halfFocusRing = 1;
|
|
29
29
|
var dropOffset = '0, 8';
|
|
30
30
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -132,7 +132,7 @@ var DropList = /*#__PURE__*/function (_Component) {
|
|
|
132
132
|
onPositioned = _this$props.onPositioned,
|
|
133
133
|
testId = _this$props.testId,
|
|
134
134
|
id = _this$props.id;
|
|
135
|
-
var layerContent = isOpen ?
|
|
135
|
+
var layerContent = isOpen ? (0, _react2.jsx)("div", {
|
|
136
136
|
css: function css(theme) {
|
|
137
137
|
return _this2.menuWrapper({
|
|
138
138
|
theme: theme
|
|
@@ -144,14 +144,14 @@ var DropList = /*#__PURE__*/function (_Component) {
|
|
|
144
144
|
id: id,
|
|
145
145
|
role: "presentation"
|
|
146
146
|
}, children) : null;
|
|
147
|
-
return
|
|
147
|
+
return (0, _react2.jsx)("div", {
|
|
148
148
|
css: this.wrapperStyles
|
|
149
|
-
},
|
|
149
|
+
}, (0, _react2.jsx)(_Layer.default, {
|
|
150
150
|
content: layerContent,
|
|
151
151
|
offset: dropOffset,
|
|
152
152
|
position: position,
|
|
153
153
|
onPositioned: onPositioned
|
|
154
|
-
},
|
|
154
|
+
}, (0, _react2.jsx)("div", {
|
|
155
155
|
css: this.triggerStyles,
|
|
156
156
|
ref: this.handleTriggerRef
|
|
157
157
|
}, trigger)));
|
|
@@ -17,7 +17,9 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
17
17
|
var _components = require("@atlaskit/theme/components");
|
|
18
18
|
var _constants = require("@atlaskit/theme/constants");
|
|
19
19
|
var _excluded = ["children"];
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
21
|
+
/** @jsx jsx */
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
21
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
22
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
25
|
var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
|
|
@@ -57,7 +59,7 @@ var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
|
|
|
57
59
|
var ExpandIconWrapper = exports.ExpandIconWrapper = function ExpandIconWrapper(_ref) {
|
|
58
60
|
var children = _ref.children,
|
|
59
61
|
expanded = _ref.expanded;
|
|
60
|
-
return
|
|
62
|
+
return (0, _react2.jsx)("div", {
|
|
61
63
|
css: function css(props) {
|
|
62
64
|
return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
|
|
63
65
|
}
|
|
@@ -74,7 +76,7 @@ var expandLayoutWrapperStyle = exports.expandLayoutWrapperStyle = (0, _react2.cs
|
|
|
74
76
|
var ExpandLayoutWrapperWithRef = exports.ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
75
77
|
var children = props.children,
|
|
76
78
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
77
|
-
return
|
|
79
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
78
80
|
css: expandLayoutWrapperStyle
|
|
79
81
|
}, rest, {
|
|
80
82
|
ref: ref
|
|
@@ -9,9 +9,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
11
|
var _templateObject;
|
|
12
|
+
/** @jsx jsx */
|
|
12
13
|
var separator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n width: 1px;\n height: 20px;\n margin: 0 ", ";\n align-self: center;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-space-050, 4px)");
|
|
13
14
|
var _default = exports.default = function _default() {
|
|
14
|
-
return
|
|
15
|
+
return (0, _react.jsx)("div", {
|
|
15
16
|
css: separator,
|
|
16
17
|
className: "separator"
|
|
17
18
|
});
|
|
@@ -9,13 +9,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
|
|
11
11
|
var _templateObject;
|
|
12
|
+
/** @jsx jsx */
|
|
12
13
|
var editIconStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n"])));
|
|
13
14
|
|
|
14
15
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
15
16
|
var SmallerEditIcon = exports.SmallerEditIcon = function SmallerEditIcon() {
|
|
16
|
-
return
|
|
17
|
+
return (0, _react.jsx)("div", {
|
|
17
18
|
css: editIconStyles
|
|
18
|
-
},
|
|
19
|
+
}, (0, _react.jsx)(_edit.default, {
|
|
19
20
|
label: "edit"
|
|
20
21
|
}));
|
|
21
22
|
};
|
|
@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = MediaSingle;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _react2 = require("@emotion/react");
|
|
10
11
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
12
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
13
|
var _constants = require("../../media-single/constants");
|
|
13
14
|
var _utils = require("../../media-single/utils");
|
|
14
15
|
var _richMediaUtils = require("../../utils/rich-media-utils");
|
|
15
16
|
var _styled = require("./styled");
|
|
17
|
+
/** @jsx jsx */
|
|
18
|
+
|
|
16
19
|
function MediaSingle(_ref) {
|
|
17
20
|
var layout = _ref.layout,
|
|
18
21
|
width = _ref.width,
|
|
@@ -82,7 +85,7 @@ function MediaSingle(_ref) {
|
|
|
82
85
|
var _children = (0, _slicedToArray2.default)(children, 2),
|
|
83
86
|
media = _children[0],
|
|
84
87
|
caption = _children[1];
|
|
85
|
-
return
|
|
88
|
+
return (0, _react2.jsx)("div", {
|
|
86
89
|
ref: handleMediaSingleRef,
|
|
87
90
|
css: (0, _styled.MediaSingleDimensionHelper)({
|
|
88
91
|
width: width,
|
|
@@ -100,7 +103,7 @@ function MediaSingle(_ref) {
|
|
|
100
103
|
'is-loading': isLoading,
|
|
101
104
|
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
|
|
102
105
|
})
|
|
103
|
-
},
|
|
106
|
+
}, (0, _react2.jsx)(_styled.MediaWrapper, {
|
|
104
107
|
hasFallbackContainer: hasFallbackContainer,
|
|
105
108
|
height: mediaWrapperHeight,
|
|
106
109
|
paddingBottom: paddingBottom
|
|
@@ -17,6 +17,7 @@ var _utils = require("../../utils");
|
|
|
17
17
|
var _breakout = require("../../utils/breakout");
|
|
18
18
|
var _excluded = ["children"];
|
|
19
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
20
|
+
/** @jsx jsx */
|
|
20
21
|
function float(layout) {
|
|
21
22
|
switch (layout) {
|
|
22
23
|
case 'wrap-right':
|
|
@@ -140,7 +141,7 @@ var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(p
|
|
|
140
141
|
var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
|
|
141
142
|
var children = _ref3.children,
|
|
142
143
|
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
|
|
143
|
-
return
|
|
144
|
+
return (0, _react2.jsx)("div", {
|
|
144
145
|
css: mediaWrapperStyle(rest)
|
|
145
146
|
}, children);
|
|
146
147
|
};
|
|
@@ -155,7 +156,7 @@ MediaWrapper.displayName = 'WrapperMediaSingle';
|
|
|
155
156
|
|
|
156
157
|
var MediaBorderGapFiller = exports.MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
|
|
157
158
|
var borderColor = _ref4.borderColor;
|
|
158
|
-
return
|
|
159
|
+
return (0, _react2.jsx)("div", {
|
|
159
160
|
style: {
|
|
160
161
|
position: 'absolute',
|
|
161
162
|
inset: '0px',
|
|
@@ -12,6 +12,7 @@ var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
|
|
|
12
12
|
var _colors = require("@atlaskit/theme/colors");
|
|
13
13
|
var _typography = require("@atlaskit/theme/typography");
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
15
|
+
/** @jsx jsx */
|
|
15
16
|
var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
|
|
16
17
|
var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
|
|
17
18
|
var messageStyle = function messageStyle(props) {
|
|
@@ -20,19 +21,19 @@ var messageStyle = function messageStyle(props) {
|
|
|
20
21
|
var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
|
|
21
22
|
var HelperMessage = exports.HelperMessage = function HelperMessage(_ref) {
|
|
22
23
|
var children = _ref.children;
|
|
23
|
-
return
|
|
24
|
+
return (0, _react.jsx)("div", {
|
|
24
25
|
css: messageStyle
|
|
25
26
|
}, children);
|
|
26
27
|
};
|
|
27
28
|
var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
|
|
28
29
|
var children = _ref2.children;
|
|
29
|
-
return
|
|
30
|
+
return (0, _react.jsx)("div", {
|
|
30
31
|
css: function css(theme) {
|
|
31
32
|
return [messageStyle(theme), errorColor];
|
|
32
33
|
}
|
|
33
|
-
},
|
|
34
|
+
}, (0, _react.jsx)("span", {
|
|
34
35
|
css: iconWrapperStyle
|
|
35
|
-
},
|
|
36
|
+
}, (0, _react.jsx)(_error.default, {
|
|
36
37
|
size: "small",
|
|
37
38
|
label: "error",
|
|
38
39
|
"aria-label": "error"
|
|
@@ -40,13 +41,13 @@ var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
|
|
|
40
41
|
};
|
|
41
42
|
var ValidMessage = exports.ValidMessage = function ValidMessage(_ref3) {
|
|
42
43
|
var children = _ref3.children;
|
|
43
|
-
return
|
|
44
|
+
return (0, _react.jsx)("div", {
|
|
44
45
|
css: function css(theme) {
|
|
45
46
|
return [messageStyle(theme), validColor];
|
|
46
47
|
}
|
|
47
|
-
},
|
|
48
|
+
}, (0, _react.jsx)("span", {
|
|
48
49
|
css: iconWrapperStyle
|
|
49
|
-
},
|
|
50
|
+
}, (0, _react.jsx)(_success.default, {
|
|
50
51
|
size: "small",
|
|
51
52
|
label: "success"
|
|
52
53
|
})), children);
|
|
@@ -14,10 +14,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
14
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = require("react");
|
|
17
|
+
var _react2 = require("@emotion/react");
|
|
17
18
|
var _utils = require("../../utils");
|
|
18
19
|
var _styles = require("./styles");
|
|
19
20
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
20
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
21
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
21
22
|
var KeyZCode = 90;
|
|
22
23
|
var KeyYCode = 89;
|
|
23
24
|
var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
@@ -122,7 +123,7 @@ var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
122
123
|
role = _this$props2.role,
|
|
123
124
|
inputId = _this$props2.inputId;
|
|
124
125
|
var value = this.state.value;
|
|
125
|
-
return
|
|
126
|
+
return (0, _react2.jsx)("input", {
|
|
126
127
|
css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
|
|
127
128
|
role: role,
|
|
128
129
|
"aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
|
|
@@ -20,6 +20,7 @@ var _unsupportedContent = require("../../messages/unsupportedContent");
|
|
|
20
20
|
var _trackUnsupportedContent = require("../../utils/track-unsupported-content");
|
|
21
21
|
var _unsupportedContentHelper = require("../unsupported-content-helper");
|
|
22
22
|
var _templateObject;
|
|
23
|
+
/** @jsx jsx */
|
|
23
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
25
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
26
|
var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 1px dashed ", ";\n border-radius: ", "px;\n box-sizing: border-box;\n cursor: default;\n display: flex;\n font-size: ", ";\n margin: 10px 0;\n min-height: 24px;\n padding: 10px;\n text-align: center;\n vertical-align: text-bottom;\n min-width: 120px;\n align-items: center;\n justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-border-disabled, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
|
|
@@ -37,18 +38,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
|
|
|
37
38
|
var tooltipOnShowHandler = (0, _react.useCallback)(function () {
|
|
38
39
|
return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
|
|
39
40
|
}, [dispatchAnalyticsEvent, originalNodeType]);
|
|
40
|
-
return
|
|
41
|
+
return (0, _react2.jsx)("div", {
|
|
41
42
|
css: blockNodeStyle,
|
|
42
43
|
className: "unsupported"
|
|
43
|
-
}, message,
|
|
44
|
+
}, message, (0, _react2.jsx)(_tooltip.default, {
|
|
44
45
|
content: tooltipContent,
|
|
45
46
|
hideTooltipOnClick: false,
|
|
46
47
|
position: "bottom",
|
|
47
48
|
onShow: tooltipOnShowHandler,
|
|
48
49
|
strategy: "absolute"
|
|
49
|
-
},
|
|
50
|
+
}, (0, _react2.jsx)("span", {
|
|
50
51
|
style: style
|
|
51
|
-
},
|
|
52
|
+
}, (0, _react2.jsx)(_questionCircle.default, {
|
|
52
53
|
label: "?",
|
|
53
54
|
size: "small"
|
|
54
55
|
}))));
|
|
@@ -20,6 +20,7 @@ var _unsupportedContent = require("../../messages/unsupportedContent");
|
|
|
20
20
|
var _trackUnsupportedContent = require("../../utils/track-unsupported-content");
|
|
21
21
|
var _unsupportedContentHelper = require("../unsupported-content-helper");
|
|
22
22
|
var _templateObject;
|
|
23
|
+
/** @jsx jsx */
|
|
23
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
25
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
26
|
var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n background: ", ";\n border: 1px dashed ", ";\n border-radius: ", "px;\n box-sizing: border-box;\n cursor: default;\n display: inline-flex;\n font-size: ", ";\n margin: 0 ", ";\n min-height: 24px;\n padding: 0 10px;\n vertical-align: middle;\n white-space: nowrap;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-border-disabled, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-space-025, 2px)");
|
|
@@ -37,17 +38,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
|
|
|
37
38
|
var tooltipOnShowHandler = (0, _react.useCallback)(function () {
|
|
38
39
|
return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
|
|
39
40
|
}, [dispatchAnalyticsEvent, originalNodeType]);
|
|
40
|
-
return
|
|
41
|
+
return (0, _react2.jsx)("span", {
|
|
41
42
|
css: inlineNodeStyle
|
|
42
|
-
}, message,
|
|
43
|
+
}, message, (0, _react2.jsx)(_tooltip.default, {
|
|
43
44
|
content: tooltipContent,
|
|
44
45
|
hideTooltipOnClick: false,
|
|
45
46
|
position: "bottom",
|
|
46
47
|
onShow: tooltipOnShowHandler,
|
|
47
48
|
strategy: "absolute"
|
|
48
|
-
},
|
|
49
|
+
}, (0, _react2.jsx)("span", {
|
|
49
50
|
style: style
|
|
50
|
-
},
|
|
51
|
+
}, (0, _react2.jsx)(_questionCircle.default, {
|
|
51
52
|
label: "?",
|
|
52
53
|
size: "small"
|
|
53
54
|
}))));
|
|
@@ -21,7 +21,7 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
|
21
21
|
var _widthDetector = require("@atlaskit/width-detector");
|
|
22
22
|
var _templateObject;
|
|
23
23
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
24
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
24
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
25
25
|
var SCROLLBAR_WIDTH = 30;
|
|
26
26
|
function getBreakpoint() {
|
|
27
27
|
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
@@ -71,13 +71,13 @@ var WidthProvider = exports.WidthProvider = /*#__PURE__*/function (_React$Compon
|
|
|
71
71
|
(0, _createClass2.default)(WidthProvider, [{
|
|
72
72
|
key: "render",
|
|
73
73
|
value: function render() {
|
|
74
|
-
return
|
|
74
|
+
return (0, _react2.jsx)("div", {
|
|
75
75
|
css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n "]))),
|
|
76
76
|
className: this.props.className
|
|
77
|
-
},
|
|
77
|
+
}, (0, _react2.jsx)(_widthDetector.WidthObserver, {
|
|
78
78
|
setWidth: this.setWidth,
|
|
79
79
|
offscreen: true
|
|
80
|
-
}),
|
|
80
|
+
}), (0, _react2.jsx)(Provider, {
|
|
81
81
|
value: createWidthContext(this.state.width)
|
|
82
82
|
}, this.props.children));
|
|
83
83
|
}
|
|
@@ -14,6 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
14
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
var _react2 = require("@emotion/react");
|
|
17
18
|
var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
|
|
18
19
|
var _colors = require("@atlaskit/theme/colors");
|
|
19
20
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
@@ -21,7 +22,7 @@ var _styles = require("./styles");
|
|
|
21
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
22
23
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
24
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
24
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
25
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
25
26
|
var Color = /*#__PURE__*/function (_PureComponent) {
|
|
26
27
|
(0, _inherits2.default)(Color, _PureComponent);
|
|
27
28
|
var _super = _createSuper(Color);
|
|
@@ -59,11 +60,11 @@ var Color = /*#__PURE__*/function (_PureComponent) {
|
|
|
59
60
|
checkMarkColor = _this$props2$checkMar === void 0 ? _colors.N0 : _this$props2$checkMar,
|
|
60
61
|
hexToPaletteColor = _this$props2.hexToPaletteColor;
|
|
61
62
|
var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
|
|
62
|
-
return
|
|
63
|
+
return (0, _react2.jsx)(_tooltip.default, {
|
|
63
64
|
content: label
|
|
64
|
-
},
|
|
65
|
+
}, (0, _react2.jsx)("span", {
|
|
65
66
|
css: _styles.buttonWrapperStyle
|
|
66
|
-
},
|
|
67
|
+
}, (0, _react2.jsx)("button", {
|
|
67
68
|
css: _styles.buttonStyle,
|
|
68
69
|
"aria-label": label,
|
|
69
70
|
role: "radio",
|
|
@@ -77,7 +78,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
|
|
|
77
78
|
border: "1px solid ".concat(borderColor)
|
|
78
79
|
},
|
|
79
80
|
autoFocus: autoFocus
|
|
80
|
-
}, isSelected &&
|
|
81
|
+
}, isSelected && (0, _react2.jsx)(_done.default, {
|
|
81
82
|
primaryColor: checkMarkColor,
|
|
82
83
|
label: ""
|
|
83
84
|
}))));
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _react2 = require("@emotion/react");
|
|
9
10
|
var _chromatism = _interopRequireDefault(require("chromatism"));
|
|
10
11
|
var _reactIntlNext = require("react-intl-next");
|
|
11
12
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -14,6 +15,8 @@ var _Color = _interopRequireDefault(require("./Color"));
|
|
|
14
15
|
var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
|
|
15
16
|
var _styles = require("./styles");
|
|
16
17
|
var _utils = require("./utils");
|
|
18
|
+
/** @jsx jsx */
|
|
19
|
+
|
|
17
20
|
/**
|
|
18
21
|
* For a given color pick the color from a list of colors with
|
|
19
22
|
* the highest contrast
|
|
@@ -57,8 +60,8 @@ var ColorPalette = function ColorPalette(props) {
|
|
|
57
60
|
var colorsPerRow = _react.default.useMemo(function () {
|
|
58
61
|
return (0, _utils.getColorsPerRowFromPalette)(palette, cols);
|
|
59
62
|
}, [palette, cols]);
|
|
60
|
-
return
|
|
61
|
-
return
|
|
63
|
+
return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row) {
|
|
64
|
+
return (0, _react2.jsx)("div", {
|
|
62
65
|
css: _styles.colorPaletteWrapper,
|
|
63
66
|
className: className,
|
|
64
67
|
key: "row-first-color-".concat(row[0].value),
|
|
@@ -76,7 +79,7 @@ var ColorPalette = function ColorPalette(props) {
|
|
|
76
79
|
message = (0, _getColorMessage.default)(paletteColorTooltipMessages.light, value.toUpperCase());
|
|
77
80
|
}
|
|
78
81
|
}
|
|
79
|
-
return
|
|
82
|
+
return (0, _react2.jsx)(_Color.default, {
|
|
80
83
|
key: value,
|
|
81
84
|
value: value,
|
|
82
85
|
borderColor: border,
|
|
@@ -23,6 +23,7 @@ var _withOuterListeners = _interopRequireDefault(require("../../ui/with-outer-li
|
|
|
23
23
|
var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
|
|
24
24
|
var _types = require("../ArrowKeyNavigationProvider/types");
|
|
25
25
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
26
|
+
/** @jsx jsx */
|
|
26
27
|
// helps adjusts position of popup
|
|
27
28
|
var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
|
|
28
29
|
var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
|
|
@@ -122,7 +123,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
122
123
|
var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(props.colorPalette, selectedColor, props.cols),
|
|
123
124
|
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
|
|
124
125
|
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
125
|
-
return
|
|
126
|
+
return (0, _react2.jsx)(_Popup.default, {
|
|
126
127
|
target: buttonRef.current,
|
|
127
128
|
fitHeight: 350,
|
|
128
129
|
fitWidth: 350,
|
|
@@ -136,10 +137,10 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
136
137
|
zIndex: props.setDisableParentScroll ? 600 : undefined,
|
|
137
138
|
ariaLabel: "Color picker popup",
|
|
138
139
|
onPositionCalculated: onPositionCalculated
|
|
139
|
-
},
|
|
140
|
+
}, (0, _react2.jsx)("div", {
|
|
140
141
|
css: colorPickerWrapper,
|
|
141
142
|
"data-test-id": "color-picker-menu"
|
|
142
|
-
},
|
|
143
|
+
}, (0, _react2.jsx)(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, {
|
|
143
144
|
type: _types.ArrowKeyNavigationType.COLOR,
|
|
144
145
|
selectedRowIndex: selectedRowIndex,
|
|
145
146
|
selectedColumnIndex: selectedColumnIndex,
|
|
@@ -149,7 +150,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
149
150
|
},
|
|
150
151
|
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
151
152
|
isPopupPositioned: isPopupPositioned
|
|
152
|
-
},
|
|
153
|
+
}, (0, _react2.jsx)(ColorPaletteWithListeners, {
|
|
153
154
|
cols: props.cols,
|
|
154
155
|
selectedColor: selectedColor,
|
|
155
156
|
onClick: onColorSelected,
|
|
@@ -172,12 +173,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
172
173
|
dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
|
|
173
174
|
})(theme));
|
|
174
175
|
};
|
|
175
|
-
return
|
|
176
|
+
return (0, _react2.jsx)("div", {
|
|
176
177
|
css: colorPickerButtonWrapper
|
|
177
|
-
},
|
|
178
|
+
}, (0, _react2.jsx)(_tooltip.default, {
|
|
178
179
|
content: title,
|
|
179
180
|
position: "top"
|
|
180
|
-
},
|
|
181
|
+
}, (0, _react2.jsx)(_button.default, {
|
|
181
182
|
ref: buttonRef,
|
|
182
183
|
"aria-label": title,
|
|
183
184
|
spacing: "compact",
|
|
@@ -190,9 +191,9 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
190
191
|
}
|
|
191
192
|
},
|
|
192
193
|
css: buttonStyle,
|
|
193
|
-
iconAfter:
|
|
194
|
+
iconAfter: (0, _react2.jsx)("span", {
|
|
194
195
|
css: colorPickerExpandContainer
|
|
195
|
-
},
|
|
196
|
+
}, (0, _react2.jsx)(_chevronDown.default, {
|
|
196
197
|
label: ""
|
|
197
198
|
}))
|
|
198
199
|
})), renderPopup());
|
|
@@ -9,13 +9,14 @@ exports.DropdownContainer = void 0;
|
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _react2 = require("@emotion/react");
|
|
12
13
|
var _types = require("../ArrowKeyNavigationProvider/types");
|
|
13
14
|
var _Dropdown = _interopRequireDefault(require("../Dropdown"));
|
|
14
15
|
var _ToolbarArrowKeyNavigationProvider = require("../ToolbarArrowKeyNavigationProvider");
|
|
15
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
18
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
|
|
19
20
|
var DropdownContainer = exports.DropdownContainer = /*#__PURE__*/_react.default.memo(function DropdownContainer(props) {
|
|
20
21
|
var keyDownHandlerContext = (0, _react.useContext)(_ToolbarArrowKeyNavigationProvider.KeyDownHandlerContext);
|
|
21
22
|
var newArrowKeyNavigationProviderOptions = props.arrowKeyNavigationProviderOptions;
|
|
@@ -26,10 +27,9 @@ var DropdownContainer = exports.DropdownContainer = /*#__PURE__*/_react.default.
|
|
|
26
27
|
});
|
|
27
28
|
}
|
|
28
29
|
return (
|
|
29
|
-
/*#__PURE__*/
|
|
30
30
|
//This context is to handle the tab, Arrow Right/Left key events for dropdown.
|
|
31
31
|
//Default context has the void callbacks for above key events
|
|
32
|
-
|
|
32
|
+
(0, _react2.jsx)(_Dropdown.default, (0, _extends2.default)({}, props, {
|
|
33
33
|
arrowKeyNavigationProviderOptions: newArrowKeyNavigationProviderOptions
|
|
34
34
|
}))
|
|
35
35
|
);
|