@atlaskit/jql-editor 5.4.6 → 5.5.1

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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/i18n/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/i18n/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/i18n/index.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "5.4.6",
+	"version": "5.5.1",
 	"description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,10 +39,10 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/form": "^12.1.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^3.0.0",
@@ -50,6 +50,7 @@
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^19.0.0",
@@ -80,12 +81,11 @@
 		"@atlaskit/jql-editor-autocomplete-rest": "^3.0.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@storybook/addon-actions": "^6.4.0",
+		"@storybook/addon-actions": "^8.6.14",
 		"@storybook/addon-knobs": "^6.4.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {
@@ -139,6 +139,9 @@
 		},
 		"should-render-to-parent-should-be-true-jira-platfo": {
 			"type": "boolean"
+		},
+		"jql_editor_autocomplete_use_popper": {
+			"type": "boolean"
 		}
 	}
 }