@atlaskit/jql-editor 5.4.6 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/jql-editor
 
+## 5.5.0
+
+### Minor Changes
+
+- [`32bfbde8f1bc0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/32bfbde8f1bc0) -
+  [ux] Fix visual bug where auto select dropdown would go off screen, creating scrollbar, when
+  window was too small
+
 ## 5.4.6
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.4.5", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.4.6", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/plugins/autocomplete/components/autocomplete-dropdown/index.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _popper = require("@atlaskit/popper");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _accessibility = require("../../../../accessibility");
 var _constants = require("../../../../common/constants");
@@ -63,6 +65,9 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
   var _useIntl = (0, _state.useIntl)(),
     _useIntl2 = (0, _slicedToArray2.default)(_useIntl, 1),
     intl = _useIntl2[0];
+  var _useEditorView = (0, _state.useEditorView)(),
+    _useEditorView2 = (0, _slicedToArray2.default)(_useEditorView, 1),
+    editorView = _useEditorView2[0];
   var _useStoreActions = (0, _state.useStoreActions)(),
     _useStoreActions2 = (0, _slicedToArray2.default)(_useStoreActions, 2),
     _useStoreActions2$ = _useStoreActions2[1],
@@ -89,10 +94,42 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
   var _useScopedId = (0, _state.useScopedId)(_constants.JQL_EDITOR_AUTOCOMPLETE_ID),
     _useScopedId2 = (0, _slicedToArray2.default)(_useScopedId, 1),
     autocompleteId = _useScopedId2[0];
+  var isPopperPositioningEnabled = (0, _platformFeatureFlags.fg)('jql_editor_autocomplete_use_popper');
+
+  // Create virtual reference element positioned at cursor location (for popper implementation)
+  var virtualReferenceElement = (0, _react.useMemo)(function () {
+    if (!isPopperPositioningEnabled || !editorView || !isAutocompleteOpen) {
+      return null;
+    }
+
+    // Create a virtual element that uses the same positioning logic as the old implementation
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        // Use the same top/left values that the old manual positioning uses
+        // This ensures consistency between old and new positioning
+        var rect = {
+          width: 0,
+          height: 0,
+          top: top,
+          left: left,
+          right: left,
+          bottom: top,
+          x: left,
+          y: top,
+          toJSON: function toJSON() {
+            return rect;
+          }
+        };
+        return rect;
+      }
+    };
+  }, [isPopperPositioningEnabled, editorView, isAutocompleteOpen, top, left]);
   var onContainerRef = (0, _react.useCallback)(function (container) {
     containerRef.current = container;
-    setAutocompleteContainer(container);
-  }, [containerRef, setAutocompleteContainer]);
+    if (!isPopperPositioningEnabled) {
+      setAutocompleteContainer(container);
+    }
+  }, [setAutocompleteContainer, isPopperPositioningEnabled]);
   var onScrollContainerRef = (0, _react.useCallback)(function (container) {
     scrollContainerRef.current = container;
   }, [scrollContainerRef]);
@@ -199,13 +236,15 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
     }
   }, [isAutocompleteOpen, options, selectedOptionId, setSelectedAutocompleteOptionId]);
   (0, _react.useLayoutEffect)(function () {
-    requestAnimationFrame(function () {
-      if (containerRef.current) {
-        containerRef.current.style.top = "".concat(top, "px");
-        containerRef.current.style.left = "".concat(left, "px");
-      }
-    });
-  }, [top, left]);
+    if (!isPopperPositioningEnabled) {
+      requestAnimationFrame(function () {
+        if (containerRef.current) {
+          containerRef.current.style.top = "".concat(top, "px");
+          containerRef.current.style.left = "".concat(left, "px");
+        }
+      });
+    }
+  }, [top, left, isPopperPositioningEnabled]);
   (0, _react.useLayoutEffect)(function () {
     if (navigatingWithKeyboard) {
       var _selectedItemRef$curr;
@@ -231,45 +270,82 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
     }
     return intl.formatMessage(_messages.messages.optionsFound);
   }, [isAutocompleteOpen, intl, options]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.AutocompleteContainer, {
+  var renderAutocompleteContent = function renderAutocompleteContent() {
+    return /*#__PURE__*/_react.default.createElement(_styled.AutocompleteOptionsContainer, {
+      ref: onScrollContainerRef,
+      onMouseMove: onMouseMove
+    }, /*#__PURE__*/_react.default.createElement(_styled.OptionList, {
+      role: "listbox",
+      id: autocompleteId
+    }, options.map(function (option, index) {
+      var isSelected = option.id === selectedOptionId;
+      return /*#__PURE__*/_react.default.createElement(_autocompleteOption.default, (0, _extends2.default)({
+        key: option.value,
+        isSelected: isSelected
+      }, isSelected && {
+        ref: selectedItemRef
+      }, {
+        option: option,
+        onClick: function onClick() {
+          return handleClick(option, index, false);
+        },
+        onMouseMove: function onMouseMove() {
+          var _options$index;
+          if (((_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.id) !== selectedOptionId) {
+            var _options$index2;
+            setSelectedAutocompleteOptionId((_options$index2 = options[index]) === null || _options$index2 === void 0 ? void 0 : _options$index2.id);
+          }
+        }
+      }));
+    })));
+  };
+  var renderLoadingFooter = function renderLoadingFooter() {
+    return loading && /*#__PURE__*/_react.default.createElement(_styled.AutocompleteLoadingFooter, {
+      "data-testid": "jql-editor-autocomplete-loading",
+      hasOptions: !!options.length
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      size: "small"
+    }));
+  };
+
+  // Early return if popper positioning is enabled but virtual reference element is not available
+  if (isPopperPositioningEnabled && !virtualReferenceElement) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPopperPositioningEnabled ?
+  /*#__PURE__*/
+  // New popper-based positioning
+  _react.default.createElement(_popper.Popper, {
+    referenceElement: virtualReferenceElement,
+    placement: "bottom-start",
+    shouldFitViewport: true
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return /*#__PURE__*/_react.default.createElement(_styled.AutocompleteContainer, {
+      "data-testid": "jql-editor-autocomplete",
+      tabIndex: -1,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Popper requires dynamic positioning via style prop
+      ,
+      style: style,
+      isOpen: isAutocompleteOpen,
+      usePopper: true,
+      onBlur: onEditorViewBlur,
+      onFocus: onEditorViewFocus
+    }, renderAutocompleteContent(), renderLoadingFooter());
+  }) :
+  /*#__PURE__*/
+  // Old manual positioning
+  _react.default.createElement(_styled.AutocompleteContainer, {
     "data-testid": "jql-editor-autocomplete",
     tabIndex: -1,
     ref: onContainerRef,
     isOpen: isAutocompleteOpen,
+    usePopper: false,
     onBlur: onEditorViewBlur,
     onFocus: onEditorViewFocus
-  }, /*#__PURE__*/_react.default.createElement(_styled.AutocompleteOptionsContainer, {
-    ref: onScrollContainerRef,
-    onMouseMove: onMouseMove
-  }, /*#__PURE__*/_react.default.createElement(_styled.OptionList, {
-    role: "listbox",
-    id: autocompleteId
-  }, options.map(function (option, index) {
-    var isSelected = option.id === selectedOptionId;
-    return /*#__PURE__*/_react.default.createElement(_autocompleteOption.default, (0, _extends2.default)({
-      key: option.value,
-      isSelected: isSelected
-    }, isSelected && {
-      ref: selectedItemRef
-    }, {
-      option: option,
-      onClick: function onClick() {
-        return handleClick(option, index, false);
-      },
-      onMouseMove: function onMouseMove() {
-        var _options$index;
-        if (((_options$index = options[index]) === null || _options$index === void 0 ? void 0 : _options$index.id) !== selectedOptionId) {
-          var _options$index2;
-          setSelectedAutocompleteOptionId((_options$index2 = options[index]) === null || _options$index2 === void 0 ? void 0 : _options$index2.id);
-        }
-      }
-    }));
-  }))), loading && /*#__PURE__*/_react.default.createElement(_styled.AutocompleteLoadingFooter, {
-    "data-testid": "jql-editor-autocomplete-loading",
-    hasOptions: !!options.length
-  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(_accessibility.ScreenReaderText, {
+  }, renderAutocompleteContent(), renderLoadingFooter()), /*#__PURE__*/_react.default.createElement(_accessibility.ScreenReaderText, {
     role: "status",
     "aria-live": "polite"
   }, announcedMessage));

package/dist/cjs/plugins/autocomplete/components/autocomplete-dropdown/styled.js

@@ -5,14 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionList = exports.AutocompleteOptionsContainer = exports.AutocompleteLoadingFooter = exports.AutocompleteContainer = void 0;
-var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var AutocompleteContainer = exports.AutocompleteContainer = _styled.default.div({
   position: 'absolute',
@@ -33,11 +30,18 @@ var AutocompleteContainer = exports.AutocompleteContainer = _styled.default.div(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 function (_ref) {
   var isOpen = _ref.isOpen;
-  return isOpen ? (0, _react.css)({
+  return isOpen ? {
     visibility: 'visible'
-  }) : (0, _react.css)({
+  } : {
     visibility: 'hidden'
-  });
+  };
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+function (_ref2) {
+  var usePopper = _ref2.usePopper;
+  return usePopper && {
+    marginTop: "var(--ds-space-100, 8px)"
+  };
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -63,8 +67,8 @@ var AutocompleteLoadingFooter = exports.AutocompleteLoadingFooter = _styled.defa
   textAlign: 'center'
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-function (_ref2) {
-  var hasOptions = _ref2.hasOptions;
+function (_ref3) {
+  var hasOptions = _ref3.hasOptions;
   return hasOptions && {
     borderTop: "solid 1px ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
     marginTop: "var(--ds-space-075, 6px)",

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.4.5", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.4.6", ANALYTICS_CHANNEL);
 };

package/dist/es2019/plugins/autocomplete/components/autocomplete-dropdown/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Popper } from '@atlaskit/popper';
 import Spinner from '@atlaskit/spinner';
 import { ScreenReaderText } from '../../../../accessibility';
 import { JQL_EDITOR_AUTOCOMPLETE_ID } from '../../../../common/constants';
-import { useAutocomplete, useAutocompleteIsOpen, useAutocompletePosition, useIntl, useRichInlineNodesEnabled, useScopedId, useStoreActions } from '../../../../state';
+import { useAutocomplete, useAutocompleteIsOpen, useAutocompletePosition, useEditorView, useIntl, useRichInlineNodesEnabled, useScopedId, useStoreActions } from '../../../../state';
 import { ARROW_DOWN_KEY, ARROW_UP_KEY, CMD_ARROW_DOWN_KEY, CMD_ARROW_UP_KEY, END_KEY, ENTER_KEY, ESCAPE_KEY, HOME_KEY, TAB_KEY } from '../../constants';
 import { messages } from '../../messages';
 import AutocompleteOption from '../autocomplete-option';
@@ -45,6 +47,7 @@ const AutocompleteDropdown = ({
   const selectedItemRef = useRef(null);
   const [navigatingWithKeyboard, setNavigatingWithKeyboard] = useState(false);
   const [intl] = useIntl();
+  const [editorView] = useEditorView();
   const [, {
     onEditorViewFocus,
     onEditorViewBlur
@@ -63,10 +66,40 @@ const AutocompleteDropdown = ({
   }] = useAutocompletePosition();
   const [areRichInlineNodesEnabled] = useRichInlineNodesEnabled();
   const [autocompleteId] = useScopedId(JQL_EDITOR_AUTOCOMPLETE_ID);
+  const isPopperPositioningEnabled = fg('jql_editor_autocomplete_use_popper');
+
+  // Create virtual reference element positioned at cursor location (for popper implementation)
+  const virtualReferenceElement = useMemo(() => {
+    if (!isPopperPositioningEnabled || !editorView || !isAutocompleteOpen) {
+      return null;
+    }
+
+    // Create a virtual element that uses the same positioning logic as the old implementation
+    return {
+      getBoundingClientRect: () => {
+        // Use the same top/left values that the old manual positioning uses
+        // This ensures consistency between old and new positioning
+        const rect = {
+          width: 0,
+          height: 0,
+          top: top,
+          left: left,
+          right: left,
+          bottom: top,
+          x: left,
+          y: top,
+          toJSON: () => rect
+        };
+        return rect;
+      }
+    };
+  }, [isPopperPositioningEnabled, editorView, isAutocompleteOpen, top, left]);
   const onContainerRef = useCallback(container => {
     containerRef.current = container;
-    setAutocompleteContainer(container);
-  }, [containerRef, setAutocompleteContainer]);
+    if (!isPopperPositioningEnabled) {
+      setAutocompleteContainer(container);
+    }
+  }, [setAutocompleteContainer, isPopperPositioningEnabled]);
   const onScrollContainerRef = useCallback(container => {
     scrollContainerRef.current = container;
   }, [scrollContainerRef]);
@@ -169,13 +202,15 @@ const AutocompleteDropdown = ({
     }
   }, [isAutocompleteOpen, options, selectedOptionId, setSelectedAutocompleteOptionId]);
   useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      if (containerRef.current) {
-        containerRef.current.style.top = `${top}px`;
-        containerRef.current.style.left = `${left}px`;
-      }
-    });
-  }, [top, left]);
+    if (!isPopperPositioningEnabled) {
+      requestAnimationFrame(() => {
+        if (containerRef.current) {
+          containerRef.current.style.top = `${top}px`;
+          containerRef.current.style.left = `${left}px`;
+        }
+      });
+    }
+  }, [top, left, isPopperPositioningEnabled]);
   useLayoutEffect(() => {
     if (navigatingWithKeyboard) {
       var _selectedItemRef$curr;
@@ -201,14 +236,7 @@ const AutocompleteDropdown = ({
     }
     return intl.formatMessage(messages.optionsFound);
   }, [isAutocompleteOpen, intl, options]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutocompleteContainer, {
-    "data-testid": "jql-editor-autocomplete",
-    tabIndex: -1,
-    ref: onContainerRef,
-    isOpen: isAutocompleteOpen,
-    onBlur: onEditorViewBlur,
-    onFocus: onEditorViewFocus
-  }, /*#__PURE__*/React.createElement(AutocompleteOptionsContainer, {
+  const renderAutocompleteContent = () => /*#__PURE__*/React.createElement(AutocompleteOptionsContainer, {
     ref: onScrollContainerRef,
     onMouseMove: onMouseMove
   }, /*#__PURE__*/React.createElement(OptionList, {
@@ -232,12 +260,51 @@ const AutocompleteDropdown = ({
         }
       }
     }));
-  }))), loading && /*#__PURE__*/React.createElement(AutocompleteLoadingFooter, {
+  })));
+  const renderLoadingFooter = () => loading && /*#__PURE__*/React.createElement(AutocompleteLoadingFooter, {
     "data-testid": "jql-editor-autocomplete-loading",
     hasOptions: !!options.length
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "small"
-  }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+  }));
+
+  // Early return if popper positioning is enabled but virtual reference element is not available
+  if (isPopperPositioningEnabled && !virtualReferenceElement) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isPopperPositioningEnabled ?
+  /*#__PURE__*/
+  // New popper-based positioning
+  React.createElement(Popper, {
+    referenceElement: virtualReferenceElement,
+    placement: "bottom-start",
+    shouldFitViewport: true
+  }, ({
+    ref,
+    style
+  }) => /*#__PURE__*/React.createElement(AutocompleteContainer, {
+    "data-testid": "jql-editor-autocomplete",
+    tabIndex: -1,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Popper requires dynamic positioning via style prop
+    ,
+    style: style,
+    isOpen: isAutocompleteOpen,
+    usePopper: true,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus
+  }, renderAutocompleteContent(), renderLoadingFooter())) :
+  /*#__PURE__*/
+  // Old manual positioning
+  React.createElement(AutocompleteContainer, {
+    "data-testid": "jql-editor-autocomplete",
+    tabIndex: -1,
+    ref: onContainerRef,
+    isOpen: isAutocompleteOpen,
+    usePopper: false,
+    onBlur: onEditorViewBlur,
+    onFocus: onEditorViewFocus
+  }, renderAutocompleteContent(), renderLoadingFooter()), /*#__PURE__*/React.createElement(ScreenReaderText, {
     role: "status",
     "aria-live": "polite"
   }, announcedMessage));

package/dist/es2019/plugins/autocomplete/components/autocomplete-dropdown/styled.js

@@ -1,6 +1,4 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { N200, N40, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -24,11 +22,17 @@ export const AutocompleteContainer = styled.div({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 ({
   isOpen
-}) => isOpen ? css({
+}) => isOpen ? {
   visibility: 'visible'
-}) : css({
+} : {
   visibility: 'hidden'
-}));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+({
+  usePopper
+}) => usePopper && {
+  marginTop: "var(--ds-space-100, 8px)"
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const AutocompleteOptionsContainer = styled.div({

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.4.5", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.4.6", ANALYTICS_CHANNEL);
 };