@atlaskit/editor-toolbar 0.7.1 → 0.8.0

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 (16) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/ui/ToolbarDropdownItem.compiled.css +1 -1
  3. package/dist/cjs/ui/ToolbarDropdownItem.js +1 -1
  4. package/dist/cjs/ui/ToolbarNestedDropdownMenu.compiled.css +2 -0
  5. package/dist/cjs/ui/ToolbarNestedDropdownMenu.js +20 -5
  6. package/dist/es2019/ui/ToolbarDropdownItem.compiled.css +1 -1
  7. package/dist/es2019/ui/ToolbarDropdownItem.js +1 -1
  8. package/dist/es2019/ui/ToolbarNestedDropdownMenu.compiled.css +2 -0
  9. package/dist/es2019/ui/ToolbarNestedDropdownMenu.js +15 -3
  10. package/dist/esm/ui/ToolbarDropdownItem.compiled.css +1 -1
  11. package/dist/esm/ui/ToolbarDropdownItem.js +1 -1
  12. package/dist/esm/ui/ToolbarNestedDropdownMenu.compiled.css +2 -0
  13. package/dist/esm/ui/ToolbarNestedDropdownMenu.js +16 -3
  14. package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts +10 -2
  15. package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts +10 -2
  16. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`cb4decb701766`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb4decb701766) -
8
+ [ux] Enable max height on block menu flyout menu
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 0.7.2
15
+
16
+ ### Patch Changes
17
+
18
+ - [`255837cfba315`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255837cfba315) -
19
+ Internal changes to how border radius is applied.
20
+ - Updated dependencies
21
+
3
22
  ## 0.7.1
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/ui/ToolbarDropdownItem.compiled.css CHANGED
@@ -10,7 +10,7 @@
10
10
  ._kqswh2mm{position:relative}
11
11
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
12
12
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
13
- ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
13
+ ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
14
14
  ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
15
15
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
16
16
  ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
package/dist/cjs/ui/ToolbarDropdownItem.js CHANGED
@@ -16,7 +16,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
16
16
  var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
17
17
  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); }
18
18
  var styles = {
19
- toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
19
+ toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
20
20
  enabled: "_irr3166n _1di61dty",
21
21
  disabled: "_syaz1lh4 _80om13gf",
22
22
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
package/dist/cjs/ui/ToolbarNestedDropdownMenu.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18m91wug{overflow-y:auto}
2
+ ._c71lnklw{max-height:20pc}
package/dist/cjs/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -1,24 +1,37 @@
1
+ /* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
1
3
  "use strict";
2
4
 
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
7
  Object.defineProperty(exports, "__esModule", {
5
8
  value: true
6
9
  });
7
10
  exports.ToolbarNestedDropdownMenu = void 0;
8
- var _react = _interopRequireDefault(require("react"));
11
+ require("./ToolbarNestedDropdownMenu.compiled.css");
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _runtime = require("@compiled/react/runtime");
14
+ var _react2 = require("@compiled/react");
9
15
  var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
16
+ var _compiled = require("@atlaskit/primitives/compiled");
10
17
  var _ToolbarDropdownItem = require("./ToolbarDropdownItem");
18
+ 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); }
19
+ var styles = {
20
+ scrollContainer: "_c71lnklw _18m91wug"
21
+ };
11
22
  var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
12
23
  var elemBefore = _ref.elemBefore,
13
24
  text = _ref.text,
14
25
  elemAfter = _ref.elemAfter,
15
26
  children = _ref.children,
16
27
  isDisabled = _ref.isDisabled,
17
- testId = _ref.testId;
18
- return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
28
+ testId = _ref.testId,
29
+ _ref$enableMaxHeight = _ref.enableMaxHeight,
30
+ enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
31
+ return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
19
32
  placement: "right-start",
20
33
  trigger: function trigger(triggerProps) {
21
- return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownItem.ToolbarDropdownItem, {
34
+ return /*#__PURE__*/React.createElement(_ToolbarDropdownItem.ToolbarDropdownItem, {
22
35
  elemBefore: elemBefore,
23
36
  elemAfter: elemAfter,
24
37
  isSelected: triggerProps.isSelected,
@@ -29,5 +42,7 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
29
42
  isDisabled: isDisabled
30
43
  }, text);
31
44
  }
32
- }, children);
45
+ }, /*#__PURE__*/React.createElement(_compiled.Box, {
46
+ xcss: (0, _react2.cx)(enableMaxHeight && styles.scrollContainer)
47
+ }, children));
33
48
  };
package/dist/es2019/ui/ToolbarDropdownItem.compiled.css CHANGED
@@ -10,7 +10,7 @@
10
10
  ._kqswh2mm{position:relative}
11
11
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
12
12
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
13
- ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
13
+ ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
14
14
  ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
15
15
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
16
16
  ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
package/dist/es2019/ui/ToolbarDropdownItem.js CHANGED
@@ -8,7 +8,7 @@ import { Pressable } from '@atlaskit/primitives/compiled';
8
8
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
9
  import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
10
10
  const styles = {
11
- toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
11
+ toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
12
12
  enabled: "_irr3166n _1di61dty",
13
13
  disabled: "_syaz1lh4 _80om13gf",
14
14
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
package/dist/es2019/ui/ToolbarNestedDropdownMenu.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18m91wug{overflow-y:auto}
2
+ ._c71lnklw{max-height:20pc}
package/dist/es2019/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -1,13 +1,23 @@
1
- import React from 'react';
1
+ /* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
+ import "./ToolbarNestedDropdownMenu.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
+ import { cx } from '@compiled/react';
2
7
  import DropdownMenu from '@atlaskit/dropdown-menu';
8
+ import { Box } from '@atlaskit/primitives/compiled';
3
9
  import { ToolbarDropdownItem } from './ToolbarDropdownItem';
10
+ const styles = {
11
+ scrollContainer: "_c71lnklw _18m91wug"
12
+ };
4
13
  export const ToolbarNestedDropdownMenu = ({
5
14
  elemBefore,
6
15
  text,
7
16
  elemAfter,
8
17
  children,
9
18
  isDisabled,
10
- testId
19
+ testId,
20
+ enableMaxHeight = false
11
21
  }) => {
12
22
  return /*#__PURE__*/React.createElement(DropdownMenu, {
13
23
  placement: "right-start",
@@ -21,5 +31,7 @@ export const ToolbarNestedDropdownMenu = ({
21
31
  hasNestedDropdownMenu: true,
22
32
  isDisabled: isDisabled
23
33
  }, text)
24
- }, children);
34
+ }, /*#__PURE__*/React.createElement(Box, {
35
+ xcss: cx(enableMaxHeight && styles.scrollContainer)
36
+ }, children));
25
37
  };
package/dist/esm/ui/ToolbarDropdownItem.compiled.css CHANGED
@@ -10,7 +10,7 @@
10
10
  ._kqswh2mm{position:relative}
11
11
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
12
12
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
13
- ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
13
+ ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
14
14
  ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
15
15
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
16
16
  ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
package/dist/esm/ui/ToolbarDropdownItem.js CHANGED
@@ -8,7 +8,7 @@ import { Pressable } from '@atlaskit/primitives/compiled';
8
8
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
9
  import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
10
10
  var styles = {
11
- toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
11
+ toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
12
12
  enabled: "_irr3166n _1di61dty",
13
13
  disabled: "_syaz1lh4 _80om13gf",
14
14
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
package/dist/esm/ui/ToolbarNestedDropdownMenu.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18m91wug{overflow-y:auto}
2
+ ._c71lnklw{max-height:20pc}
package/dist/esm/ui/ToolbarNestedDropdownMenu.js CHANGED
@@ -1,13 +1,24 @@
1
- import React from 'react';
1
+ /* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
+ import "./ToolbarNestedDropdownMenu.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
+ import { cx } from '@compiled/react';
2
7
  import DropdownMenu from '@atlaskit/dropdown-menu';
8
+ import { Box } from '@atlaskit/primitives/compiled';
3
9
  import { ToolbarDropdownItem } from './ToolbarDropdownItem';
10
+ var styles = {
11
+ scrollContainer: "_c71lnklw _18m91wug"
12
+ };
4
13
  export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
5
14
  var elemBefore = _ref.elemBefore,
6
15
  text = _ref.text,
7
16
  elemAfter = _ref.elemAfter,
8
17
  children = _ref.children,
9
18
  isDisabled = _ref.isDisabled,
10
- testId = _ref.testId;
19
+ testId = _ref.testId,
20
+ _ref$enableMaxHeight = _ref.enableMaxHeight,
21
+ enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
11
22
  return /*#__PURE__*/React.createElement(DropdownMenu, {
12
23
  placement: "right-start",
13
24
  trigger: function trigger(triggerProps) {
@@ -22,5 +33,7 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
22
33
  isDisabled: isDisabled
23
34
  }, text);
24
35
  }
25
- }, children);
36
+ }, /*#__PURE__*/React.createElement(Box, {
37
+ xcss: cx(enableMaxHeight && styles.scrollContainer)
38
+ }, children));
26
39
  };
package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts CHANGED
@@ -1,11 +1,19 @@
1
- import React, { type ReactNode } from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
2
6
  type ToolbarNestedDropdownMenuProps = {
3
7
  children?: ReactNode;
4
8
  elemAfter: ReactNode;
5
9
  elemBefore: ReactNode;
10
+ /**
11
+ * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
12
+ */
13
+ enableMaxHeight?: boolean;
6
14
  isDisabled?: boolean;
7
15
  testId?: string;
8
16
  text?: string;
9
17
  };
10
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
18
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
11
19
  export {};
package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts CHANGED
@@ -1,11 +1,19 @@
1
- import React, { type ReactNode } from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
2
6
  type ToolbarNestedDropdownMenuProps = {
3
7
  children?: ReactNode;
4
8
  elemAfter: ReactNode;
5
9
  elemBefore: ReactNode;
10
+ /**
11
+ * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
12
+ */
13
+ enableMaxHeight?: boolean;
6
14
  isDisabled?: boolean;
7
15
  testId?: string;
8
16
  text?: string;
9
17
  };
10
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
18
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
11
19
  export {};
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.7.1",
6
+ "version": "0.8.0",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "team": "Editor: Jenga",
@@ -23,16 +23,16 @@
23
23
  "dependencies": {
24
24
  "@atlaskit/badge": "^18.1.0",
25
25
  "@atlaskit/button": "^23.4.0",
26
- "@atlaskit/css": "^0.12.0",
26
+ "@atlaskit/css": "^0.13.0",
27
27
  "@atlaskit/dropdown-menu": "^16.3.0",
28
28
  "@atlaskit/icon": "^28.1.0",
29
29
  "@atlaskit/icon-lab": "^5.7.0",
30
30
  "@atlaskit/logo": "^19.7.0",
31
31
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
32
32
  "@atlaskit/popup": "^4.3.0",
33
- "@atlaskit/primitives": "^14.12.0",
34
- "@atlaskit/tmp-editor-statsig": "^12.2.0",
35
- "@atlaskit/tokens": "^6.1.0",
33
+ "@atlaskit/primitives": "^14.13.0",
34
+ "@atlaskit/tmp-editor-statsig": "^12.4.0",
35
+ "@atlaskit/tokens": "^6.2.0",
36
36
  "@atlaskit/tooltip": "^20.4.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "@compiled/react": "^0.18.3",