@atlaskit/editor-plugin-floating-toolbar 4.1.16 → 4.1.17

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 4.1.17
+
+### Patch Changes
+
+- [#165950](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165950)
+  [`39b41cc2930ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39b41cc2930ca) -
+  [ux] [ED-28185] Force panel emoji picker to go below toolbar when there isn't enough space above
+  or below to fit whole picker
+
 ## 4.1.16
 
 ### Patch Changes

package/dist/cjs/ui/EmojiPickerButton.js

@@ -82,6 +82,12 @@ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
     onPickerRef: setOutsideClickTargetRef
   });
 };
+
+// Note: These are based on the height and width of the emoji picker at the time
+// of writing (2025-05-05). It is 100% prone to change but at least it's vaguely
+// written down.
+var EMOJI_PICKER_MAX_HEIGHT = 431;
+var EMOJI_PICKER_MAX_WIDTH = 352;
 var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPickerWithProvider);
 var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
@@ -135,15 +141,17 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ,
       mountTo: props.setDisableParentScroll ? props.mountPoint : buttonRef.current.parentElement,
-      fitHeight: 350,
-      fitWidth: 350,
+      fitHeight: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_HEIGHT : 350,
+      fitWidth: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_WIDTH : 350,
       offset: [0, 10]
       // Confluence inline comment editor has z-index: 500
       // if the toolbar is scrollable, this will be mounted in the root editor
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      focusTrap: true
+      focusTrap: true,
+      preventOverflow: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12'),
+      boundariesElement: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12') ? props.popupsBoundariesElement : undefined
     }, (0, _react2.jsx)(EmojiPickerWithListener, {
       handleEscapeKeydown: handleEmojiPressEscape,
       handleClickOutside: handleEmojiClickOutside,

package/dist/cjs/ui/Toolbar.js

@@ -315,6 +315,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
               return dispatchCommand(item.onChange(selected));
             },
             mountPoint: emojiAndColourPickerMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
             setDisableParentScroll: scrollable ? setDisableScroll : undefined,
             pluginInjectionApi: api
           });

package/dist/es2019/ui/EmojiPickerButton.js

@@ -73,6 +73,12 @@ const EmojiPickerWithProvider = props => {
     onPickerRef: setOutsideClickTargetRef
   });
 };
+
+// Note: These are based on the height and width of the emoji picker at the time
+// of writing (2025-05-05). It is 100% prone to change but at least it's vaguely
+// written down.
+const EMOJI_PICKER_MAX_HEIGHT = 431;
+const EMOJI_PICKER_MAX_WIDTH = 352;
 const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -121,15 +127,17 @@ export const EmojiPickerButton = props => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ,
       mountTo: props.setDisableParentScroll ? props.mountPoint : buttonRef.current.parentElement,
-      fitHeight: 350,
-      fitWidth: 350,
+      fitHeight: fg('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_HEIGHT : 350,
+      fitWidth: fg('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_WIDTH : 350,
       offset: [0, 10]
       // Confluence inline comment editor has z-index: 500
       // if the toolbar is scrollable, this will be mounted in the root editor
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      focusTrap: true
+      focusTrap: true,
+      preventOverflow: fg('platform_editor_controls_patch_12'),
+      boundariesElement: fg('platform_editor_controls_patch_12') ? props.popupsBoundariesElement : undefined
     }, jsx(EmojiPickerWithListener, {
       handleEscapeKeydown: handleEmojiPressEscape,
       handleClickOutside: handleEmojiClickOutside,

package/dist/es2019/ui/Toolbar.js

@@ -289,6 +289,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             isSelected: item.selected,
             onChange: selected => dispatchCommand(item.onChange(selected)),
             mountPoint: emojiAndColourPickerMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
             setDisableParentScroll: scrollable ? setDisableScroll : undefined,
             pluginInjectionApi: api
           });

package/dist/esm/ui/EmojiPickerButton.js

@@ -73,6 +73,12 @@ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
     onPickerRef: setOutsideClickTargetRef
   });
 };
+
+// Note: These are based on the height and width of the emoji picker at the time
+// of writing (2025-05-05). It is 100% prone to change but at least it's vaguely
+// written down.
+var EMOJI_PICKER_MAX_HEIGHT = 431;
+var EMOJI_PICKER_MAX_WIDTH = 352;
 var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
@@ -126,15 +132,17 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       ,
       mountTo: props.setDisableParentScroll ? props.mountPoint : buttonRef.current.parentElement,
-      fitHeight: 350,
-      fitWidth: 350,
+      fitHeight: fg('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_HEIGHT : 350,
+      fitWidth: fg('platform_editor_controls_patch_12') ? EMOJI_PICKER_MAX_WIDTH : 350,
       offset: [0, 10]
       // Confluence inline comment editor has z-index: 500
       // if the toolbar is scrollable, this will be mounted in the root editor
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
-      focusTrap: true
+      focusTrap: true,
+      preventOverflow: fg('platform_editor_controls_patch_12'),
+      boundariesElement: fg('platform_editor_controls_patch_12') ? props.popupsBoundariesElement : undefined
     }, jsx(EmojiPickerWithListener, {
       handleEscapeKeydown: handleEmojiPressEscape,
       handleClickOutside: handleEmojiClickOutside,

package/dist/esm/ui/Toolbar.js

@@ -309,6 +309,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
               return dispatchCommand(item.onChange(selected));
             },
             mountPoint: emojiAndColourPickerMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
             setDisableParentScroll: scrollable ? setDisableScroll : undefined,
             pluginInjectionApi: api
           });

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

@@ -13,6 +13,7 @@ type EmojiPickerButtonReturnType = (props: {
     onChange?: (emoji: EmojiId) => void;
     isSelected?: boolean;
     mountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
     setDisableParentScroll?: (disable: boolean) => void;
     pluginInjectionApi?: ExtractInjectionAPI<FloatingToolbarPlugin>;
 }) => JSX.Element;

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

@@ -13,6 +13,7 @@ type EmojiPickerButtonReturnType = (props: {
     onChange?: (emoji: EmojiId) => void;
     isSelected?: boolean;
     mountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
     setDisableParentScroll?: (disable: boolean) => void;
     pluginInjectionApi?: ExtractInjectionAPI<FloatingToolbarPlugin>;
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "4.1.16",
+	"version": "4.1.17",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 		"@atlaskit/adf-utils": "^19.20.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/editor-common": "^106.1.0",
+		"@atlaskit/editor-common": "^106.3.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.1.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/editor-plugin-table": "^10.11.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/emoji": "^69.2.0",
+		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
@@ -50,9 +50,9 @@
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/select": "^20.6.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.8.0",
+		"@atlaskit/tmp-editor-statsig": "^5.13.0",
 		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -151,6 +151,9 @@
 		},
 		"platform_editor_interaction_api_refactor": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_12": {
+			"type": "boolean"
 		}
 	}
 }