@atlaskit/editor-toolbar 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-toolbar
 
+## 0.8.0
+
+### Minor Changes
+
+- [`cb4decb701766`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb4decb701766) -
+  [ux] Enable max height on block menu flyout menu
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/cjs/ui/ToolbarNestedDropdownMenu.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/cjs/ui/ToolbarNestedDropdownMenu.js

@@ -1,24 +1,37 @@
+/* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarNestedDropdownMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./ToolbarNestedDropdownMenu.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _react2 = require("@compiled/react");
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _ToolbarDropdownItem = require("./ToolbarDropdownItem");
+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); }
+var styles = {
+  scrollContainer: "_c71lnklw _18m91wug"
+};
 var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
   var elemBefore = _ref.elemBefore,
     text = _ref.text,
     elemAfter = _ref.elemAfter,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
-    testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    testId = _ref.testId,
+    _ref$enableMaxHeight = _ref.enableMaxHeight,
+    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
+  return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
     placement: "right-start",
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownItem.ToolbarDropdownItem, {
+      return /*#__PURE__*/React.createElement(_ToolbarDropdownItem.ToolbarDropdownItem, {
         elemBefore: elemBefore,
         elemAfter: elemAfter,
         isSelected: triggerProps.isSelected,
@@ -29,5 +42,7 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
         isDisabled: isDisabled
       }, text);
     }
-  }, children);
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _react2.cx)(enableMaxHeight && styles.scrollContainer)
+  }, children));
 };

package/dist/es2019/ui/ToolbarNestedDropdownMenu.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/es2019/ui/ToolbarNestedDropdownMenu.js

@@ -1,13 +1,23 @@
-import React from 'react';
+/* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./ToolbarNestedDropdownMenu.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { Box } from '@atlaskit/primitives/compiled';
 import { ToolbarDropdownItem } from './ToolbarDropdownItem';
+const styles = {
+  scrollContainer: "_c71lnklw _18m91wug"
+};
 export const ToolbarNestedDropdownMenu = ({
   elemBefore,
   text,
   elemAfter,
   children,
   isDisabled,
-  testId
+  testId,
+  enableMaxHeight = false
 }) => {
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     placement: "right-start",
@@ -21,5 +31,7 @@ export const ToolbarNestedDropdownMenu = ({
       hasNestedDropdownMenu: true,
       isDisabled: isDisabled
     }, text)
-  }, children);
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(enableMaxHeight && styles.scrollContainer)
+  }, children));
 };

package/dist/esm/ui/ToolbarNestedDropdownMenu.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/esm/ui/ToolbarNestedDropdownMenu.js

@@ -1,13 +1,24 @@
-import React from 'react';
+/* ToolbarNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./ToolbarNestedDropdownMenu.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { Box } from '@atlaskit/primitives/compiled';
 import { ToolbarDropdownItem } from './ToolbarDropdownItem';
+var styles = {
+  scrollContainer: "_c71lnklw _18m91wug"
+};
 export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
   var elemBefore = _ref.elemBefore,
     text = _ref.text,
     elemAfter = _ref.elemAfter,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$enableMaxHeight = _ref.enableMaxHeight,
+    enableMaxHeight = _ref$enableMaxHeight === void 0 ? false : _ref$enableMaxHeight;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     placement: "right-start",
     trigger: function trigger(triggerProps) {
@@ -22,5 +33,7 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
         isDisabled: isDisabled
       }, text);
     }
-  }, children);
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(enableMaxHeight && styles.scrollContainer)
+  }, children));
 };

package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts

@@ -1,11 +1,19 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     elemAfter: ReactNode;
     elemBefore: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     isDisabled?: boolean;
     testId?: string;
     text?: string;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts

@@ -1,11 +1,19 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     elemAfter: ReactNode;
     elemBefore: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     isDisabled?: boolean;
     testId?: string;
     text?: string;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, enableMaxHeight, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.7.2",
+	"version": "0.8.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -23,16 +23,16 @@
 	"dependencies": {
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/button": "^23.4.0",
-		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/css": "^0.13.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
-		"@atlaskit/primitives": "^14.12.0",
-		"@atlaskit/tmp-editor-statsig": "^12.2.0",
-		"@atlaskit/tokens": "^6.1.0",
+		"@atlaskit/primitives": "^14.13.0",
+		"@atlaskit/tmp-editor-statsig": "^12.4.0",
+		"@atlaskit/tokens": "^6.2.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",