@atlaskit/jql-editor 5.4.5 → 5.5.0

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
@@ -54,6 +56,9 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
   var _useIntl = useIntl(),
     _useIntl2 = _slicedToArray(_useIntl, 1),
     intl = _useIntl2[0];
+  var _useEditorView = useEditorView(),
+    _useEditorView2 = _slicedToArray(_useEditorView, 1),
+    editorView = _useEditorView2[0];
   var _useStoreActions = useStoreActions(),
     _useStoreActions2 = _slicedToArray(_useStoreActions, 2),
     _useStoreActions2$ = _useStoreActions2[1],
@@ -80,10 +85,42 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
   var _useScopedId = useScopedId(JQL_EDITOR_AUTOCOMPLETE_ID),
     _useScopedId2 = _slicedToArray(_useScopedId, 1),
     autocompleteId = _useScopedId2[0];
+  var isPopperPositioningEnabled = fg('jql_editor_autocomplete_use_popper');
+
+  // Create virtual reference element positioned at cursor location (for popper implementation)
+  var virtualReferenceElement = 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 = useCallback(function (container) {
     containerRef.current = container;
-    setAutocompleteContainer(container);
-  }, [containerRef, setAutocompleteContainer]);
+    if (!isPopperPositioningEnabled) {
+      setAutocompleteContainer(container);
+    }
+  }, [setAutocompleteContainer, isPopperPositioningEnabled]);
   var onScrollContainerRef = useCallback(function (container) {
     scrollContainerRef.current = container;
   }, [scrollContainerRef]);
@@ -190,13 +227,15 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
     }
   }, [isAutocompleteOpen, options, selectedOptionId, setSelectedAutocompleteOptionId]);
   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]);
   useLayoutEffect(function () {
     if (navigatingWithKeyboard) {
       var _selectedItemRef$curr;
@@ -222,45 +261,82 @@ var AutocompleteDropdown = function AutocompleteDropdown(_ref) {
     }
     return intl.formatMessage(messages.optionsFound);
   }, [isAutocompleteOpen, intl, options]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutocompleteContainer, {
+  var renderAutocompleteContent = function renderAutocompleteContent() {
+    return /*#__PURE__*/React.createElement(AutocompleteOptionsContainer, {
+      ref: onScrollContainerRef,
+      onMouseMove: onMouseMove
+    }, /*#__PURE__*/React.createElement(OptionList, {
+      role: "listbox",
+      id: autocompleteId
+    }, options.map(function (option, index) {
+      var isSelected = option.id === selectedOptionId;
+      return /*#__PURE__*/React.createElement(AutocompleteOption, _extends({
+        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.createElement(AutocompleteLoadingFooter, {
+      "data-testid": "jql-editor-autocomplete-loading",
+      hasOptions: !!options.length
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    }));
+  };
+
+  // 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
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return /*#__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
-  }, /*#__PURE__*/React.createElement(AutocompleteOptionsContainer, {
-    ref: onScrollContainerRef,
-    onMouseMove: onMouseMove
-  }, /*#__PURE__*/React.createElement(OptionList, {
-    role: "listbox",
-    id: autocompleteId
-  }, options.map(function (option, index) {
-    var isSelected = option.id === selectedOptionId;
-    return /*#__PURE__*/React.createElement(AutocompleteOption, _extends({
-      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.createElement(AutocompleteLoadingFooter, {
-    "data-testid": "jql-editor-autocomplete-loading",
-    hasOptions: !!options.length
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    size: "small"
-  }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+  }, renderAutocompleteContent(), renderLoadingFooter()), /*#__PURE__*/React.createElement(ScreenReaderText, {
     role: "status",
     "aria-live": "polite"
   }, announcedMessage));

package/dist/esm/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,18 @@ export var 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
 function (_ref) {
   var isOpen = _ref.isOpen;
-  return isOpen ? css({
+  return 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
+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
@@ -54,8 +59,8 @@ export var AutocompleteLoadingFooter = styled.div({
   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(N40, ")")),
     marginTop: "var(--ds-space-075, 6px)",

package/dist/types/accessibility/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/common/styled.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const hiddenMixin: import("@emotion/react").SerializedStyles;
 export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/hooks/use-editor-theme/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type EditorTheme = {
     /**
      * The maximum number of rows that are visible in the default editor view.
@@ -32,7 +31,7 @@ export declare const EditorThemeContext: import("react").Context<EditorTheme>;
  * Hook to manage the theming state of the editor.
  */
 export declare const useEditorTheme: ({ isSearch, isCompact, }: {
-    isSearch?: boolean | undefined;
-    isCompact?: boolean | undefined;
+    isSearch?: boolean;
+    isCompact?: boolean;
 }) => EditorTheme;
 export declare const useEditorThemeContext: () => EditorTheme;

package/dist/types/plugins/autocomplete/components/autocomplete-dropdown/index.d.ts

@@ -7,5 +7,5 @@ type Props = {
     keymap: PluginKeymap;
     onClick: (option: SelectableAutocompleteOption, analyticsAttributes: AutocompleteAnalyticsAttributes) => void;
 };
-declare const AutocompleteDropdown: ({ options, loading, keymap, onClick }: Props) => React.JSX.Element;
+declare const AutocompleteDropdown: ({ options, loading, keymap, onClick }: Props) => React.JSX.Element | null;
 export default AutocompleteDropdown;

package/dist/types/plugins/autocomplete/components/autocomplete-dropdown/styled.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="react" />
 export declare const AutocompleteContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     isOpen: boolean;
+    usePopper?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AutocompleteOptionsContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OptionList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const AutocompleteLoadingFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     hasOptions: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/plugins/autocomplete/components/autocomplete-option/styled.d.ts

@@ -1,32 +1,31 @@
-/// <reference types="react" />
 export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OptionListItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     isSelected: boolean;
     isDeprecated: boolean;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const OptionName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DeprecatedOptionContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OptionHighlight: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FieldType: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FieldTypeIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types/plugins/rich-inline-nodes/nodes/user/styled.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
 export declare const UserContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     selected: boolean;
     error: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const NameContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/state/util.d.ts

@@ -8,9 +8,9 @@ export declare const getAutocompleteOptionId: (value: string) => any;
 export declare const tokensToAutocompleteOptions: (tokens: ContextAwareTokenSuggestions) => SelectableAutocompleteOptions;
 export declare const getReplacePositionStart: ({ rules, tokens }: JQLSuggestions) => number;
 export declare const getAutocompletePosition: (editorView: EditorView, replacePositionStart: number) => AutocompletePosition;
-export declare const sendDebugMessage: (message: string, editorView: EditorView, editorState: EditorState, onDebugUnsafeMessage?: ((message: string, event: {
+export declare const sendDebugMessage: (message: string, editorView: EditorView, editorState: EditorState, onDebugUnsafeMessage?: (message: string, event: {
     [key: string]: DebugMessageEventAttribute;
-}) => void) | undefined, eventAttributes?: {
+}) => void, eventAttributes?: {
     [key: string]: DebugMessageEventAttribute;
-} | undefined) => void;
+}) => void;
 export declare const getFieldNodes: (ast: Jast) => Set<string>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type JQLEditorProps } from './types';
 declare const _default: (props: JQLEditorProps) => import("react").JSX.Element;
 export default _default;

package/dist/types/ui/intl-provider/index.d.ts

@@ -6,5 +6,5 @@ type WithIntlProviderProps = {
      */
     locale?: string;
 };
-export declare const withIntlProvider: <Props extends WithIntlProviderProps>(WrappedComponent: FunctionComponent<Omit<Props, 'locale'>> | ComponentClass<Omit<Props, 'locale'>>) => (props: Props) => React.JSX.Element;
+export declare const withIntlProvider: <Props extends WithIntlProviderProps>(WrappedComponent: FunctionComponent<Omit<Props, "locale">> | ComponentClass<Omit<Props, "locale">>) => (props: Props) => React.JSX.Element;
 export {};

package/dist/types/ui/jql-editor-controls-content/base-expand-toggle/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const ExpandToggleContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/ui/jql-editor-controls-content/base-syntax-help/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const SyntaxHelpContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/ui/jql-editor-footer-content/jql-editor-help/styled.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 type HelpContainerProps = {
     isVisible: boolean;
 };
 export declare const HelpContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & HelpContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types/ui/jql-editor-footer-content/jql-messages/format/styled.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 export declare const MessageContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     isSearch: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MessageList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/dist/types/ui/jql-editor-layout/index.d.ts

@@ -58,7 +58,7 @@ type ReadOnlyProps = {
     query: string;
 };
 export declare const JQLEditorReadOnly: ({ isSearch, isCompact, ...props }: ReadOnlyProps & {
-    isSearch?: boolean | undefined;
-    isCompact?: boolean | undefined;
+    isSearch?: boolean;
+    isCompact?: boolean;
 }) => React.JSX.Element;
 export default JQLEditorLayout;

package/dist/types/ui/jql-editor-layout/styled.d.ts

@@ -1,29 +1,28 @@
-/// <reference types="react" />
 export declare const EditorMain: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const EditorFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type EditorViewContainerProps = {
     editorViewHasFocus?: boolean;
     editorViewIsInvalid?: boolean;
 };
 export declare const EditorViewContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & EditorViewContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ReadOnlyEditorViewContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & EditorViewContainerProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const LineNumberToolbar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     lineNumbersVisible: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -31,8 +30,8 @@ export declare const LineNumberToolbar: import("@emotion/styled").StyledComponen
  * The main div which the Prosemirror editor will be rendered into.
  */
 export declare const EditorView: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     defaultMaxRows: number;
     expandedRows: number;
@@ -40,22 +39,22 @@ export declare const EditorView: import("@emotion/styled").StyledComponent<{
     isCompact: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ReadOnlyEditorView: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     defaultMaxRows: number;
     expandedRows: number;
     lineNumbersVisible: boolean;
     isCompact: boolean;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const EditorControls: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     isSearch: boolean;
     isCompact: boolean;
-    isVisualRefresh?: boolean | undefined;
+    isVisualRefresh?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types/ui/jql-editor-portal-provider/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type PortalActions } from './types';
 export declare const PortalActionsContext: import("react").Context<PortalActions>;
 export declare const usePortalActionsContext: () => PortalActions;

package/dist/types/ui/jql-editor-view/index.d.ts

@@ -5,6 +5,6 @@ import React from 'react';
 declare const JQLEditorView: ({ inputRef }: {
     inputRef?: React.Ref<{
         focus: () => void;
-    }> | undefined;
+    }>;
 }) => React.JSX.Element;
 export default JQLEditorView;

package/dist/types/ui/tooltip-tag/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const StyledTooltipTag: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types-ts4.5/accessibility/styled.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types-ts4.5/common/styled.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const hiddenMixin: import("@emotion/react").SerializedStyles;
 export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types-ts4.5/hooks/use-editor-theme/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type EditorTheme = {
     /**
      * The maximum number of rows that are visible in the default editor view.
@@ -32,7 +31,7 @@ export declare const EditorThemeContext: import("react").Context<EditorTheme>;
  * Hook to manage the theming state of the editor.
  */
 export declare const useEditorTheme: ({ isSearch, isCompact, }: {
-    isSearch?: boolean | undefined;
-    isCompact?: boolean | undefined;
+    isSearch?: boolean;
+    isCompact?: boolean;
 }) => EditorTheme;
 export declare const useEditorThemeContext: () => EditorTheme;