@atlaskit/jql-editor 5.5.1 → 5.5.3

package/dist/types-ts4.5/state/types.d.ts

@@ -13,8 +13,8 @@ export type ContextAwareTokenSuggestions = TokenSuggestions & {
     context?: JQLRuleContext;
 };
 export type ContextAwareJQLSuggestions = {
-    tokens: ContextAwareTokenSuggestions;
     rules: JQLRuleSuggestions;
+    tokens: ContextAwareTokenSuggestions;
 };
 /**
  * Analytic attributes emitted whenever external JQL errors are viewed in the UI.
@@ -32,44 +32,44 @@ export type ExternalErrorAttributes = {
  */
 export type ExternalError = {
     /**
-     * Type of the message.
+     * Optional identifying error type when a syntax error has occurred. This should be one of the types defined in the
+     * `JqlSyntaxQueryErrorExtension` node of the Atlassian GraphQL schema.
      */
-    type: 'error';
+    errorType?: string;
     /**
      * Message to display.
      */
     message: ReactNode;
     /**
-     * Optional identifying error type when a syntax error has occurred. This should be one of the types defined in the
-     * `JqlSyntaxQueryErrorExtension` node of the Atlassian GraphQL schema.
+     * Type of the message.
      */
-    errorType?: string;
+    type: 'error';
 };
 export type ExternalWarning = {
+    /**
+     * Message to display.
+     */
+    message: ReactNode;
     /**
      * Type of the message.
      */
     type: 'warning';
+};
+export type ExternalInfo = {
     /**
      * Message to display.
      */
     message: ReactNode;
-};
-export type ExternalInfo = {
     /**
      * Type of the message.
      */
     type: 'info';
-    /**
-     * Message to display.
-     */
-    message: ReactNode;
 };
 export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
-    testId: string;
-    editorTheme: EditorTheme;
     editorId: string;
+    editorTheme: EditorTheme;
     errorMessages: React.ReactElement[];
+    testId: string;
     validationId: string;
 }>>;
 export type CustomErrorMessageProps = Omit<React.ComponentProps<CustomErrorComponent>, 'editorTheme'> & {
@@ -81,77 +81,81 @@ export type CustomComponents = {
 export type ExternalMessage = ExternalError | ExternalWarning | ExternalInfo;
 export type ExternalMessagesNormalized = {
     errors: ExternalError[];
-    warnings: ExternalWarning[];
     infos: ExternalInfo[];
+    warnings: ExternalWarning[];
 };
 export type AutocompletePosition = {
-    top: number;
     left: number;
+    top: number;
 };
 export type OptionsKey = keyof Omit<AutocompleteOptionGroup, 'tokens'>;
 export type AutocompleteState = {
     /**
-     * ID of the currently selected autocomplete option, or `undefined` if no option is selected.
-     */
-    selectedOptionId: string | undefined;
-    /**
-     * Forces autocomplete to stay closed on next update, which is the desired behavior when:
-     * - we select an autocomplete option
-     * - we navigate the query with arrow keys
+     * Subscription for a debounced autocomplete analytics event. This allows the event to be cancelled upon a new request.
      */
-    shouldStayClosedOnNextUpdate: boolean;
+    analyticsSubscription: Subscription | null;
     /**
-     * Manages current autocomplete visibility state, derived from `shouldStayClosedOnNextUpdate`.
+     * Reference to the autocomplete container DOM element.
      */
-    shouldStayClosed: boolean;
+    container: HTMLElement | null;
     /**
      * Determines if autocomplete options are currently being loaded.
      */
     loading: boolean;
+    /**
+     * Provides information about autocomplete offset parent's size and its position relative to the viewport.
+     * This is used to calculate autocomplete dropdown position.
+     */
+    offsetParentRect: DOMRectReadOnly | undefined;
     /**
      * Autocomplete options returned by autocomplete provider functions.
      */
     options: AutocompleteOptionGroup;
     /**
-     * Autocomplete provider is an Observable based API. This references any in-flight subscription so we can cancel it
-     * upon a new request.
+     * Computed replace position start for the current set of autocomplete options.
+     * We use this position to derive autocomplete dropdown coordinates.
      */
-    subscription: Subscription | null;
+    replacePositionStart: number;
     /**
-     * Subscription for a debounced autocomplete analytics event. This allows the event to be cancelled upon a new request.
+     * ID of the currently selected autocomplete option, or `undefined` if no option is selected.
      */
-    analyticsSubscription: Subscription | null;
+    selectedOptionId: string | undefined;
     /**
-     * Reference to the autocomplete container DOM element.
+     * Manages current autocomplete visibility state, derived from `shouldStayClosedOnNextUpdate`.
      */
-    container: HTMLElement | null;
+    shouldStayClosed: boolean;
     /**
-     * Provides information about autocomplete offset parent's size and its position relative to the viewport.
-     * This is used to calculate autocomplete dropdown position.
+     * Forces autocomplete to stay closed on next update, which is the desired behavior when:
+     * - we select an autocomplete option
+     * - we navigate the query with arrow keys
      */
-    offsetParentRect: DOMRectReadOnly | undefined;
+    shouldStayClosedOnNextUpdate: boolean;
     /**
-     * Computed replace position start for the current set of autocomplete options.
-     * We use this position to derive autocomplete dropdown coordinates.
+     * Autocomplete provider is an Observable based API. This references any in-flight subscription so we can cancel it
+     * upon a new request.
      */
-    replacePositionStart: number;
+    subscription: Subscription | null;
 };
 export type HydratedValuesMap = {
     [fieldName: string]: Map<string, HydratedValue>;
 };
 export type State = {
     /**
-     * The controlled query prop passed to the container.
+     * State managed by the autocomplete plugin.
      */
-    controlledQuery: string;
+    autocomplete: AutocompleteState;
     /**
-     * The current query string in the JQL editor.
+     * Provider object to fetch autocomplete data.
      */
-    query: string;
+    autocompleteProvider: AutocompleteProvider;
     /**
-     * Custom messages to display.
+     * The controlled query prop passed to the container.
      */
-    externalMessages: ExternalMessage[];
+    controlledQuery: string;
+    /**
+     * Custom components to take over the rendering of certain parts of the jql editor
+     */
+    customComponents?: CustomComponents;
     /**
      * The current Prosemirror editor state.
      */
@@ -160,68 +164,60 @@ export type State = {
      * The Prosemirror editor view mounted to the DOM, or `undefined` if the view has not been initialised.
      */
     editorView: EditorView | undefined;
-    /**
-     * Flag to enable the searching indicator when a JQL search is in progress.
-     */
-    isSearching: boolean | undefined;
-    /**
-     * Mutable reference to a react-intl object.
-     */
-    intlRef: MutableRefObject<IntlShape>;
-    /**
-     * Provider object to fetch autocomplete data.
-     */
-    autocompleteProvider: AutocompleteProvider;
-    /**
-     * Prefix to use when computing id's for DOM elements (to allow multiple editors rendered on the same page).
-     */
-    idPrefix: string;
     /**
      * ID of the timeout used before setting `editorViewHasFocus=false`. This gives an opportunity for the timeout to be
      * cleared if another element within the context receives focus.
      */
     editorViewBlurTimeout: number | null;
     /**
-     * Flag to determine whether the editor view (or autocomplete dropdown) currently has focus.
+     * Reference to the editor view container (scrollable element that contains line numbers and editor view).
      */
-    editorViewHasFocus: boolean;
+    editorViewContainer: HTMLElement | undefined;
     /**
-     * Flag to determine whether line numbers should be shown in the editor.
+     * Provides information about editor view container size and its position relative to the viewport.
+     * Can be used to position portals in relation to the editor, ensure they don't exceed its dimensions, etc.
      */
-    lineNumbersVisible: boolean;
+    editorViewContainerRect: DOMRectReadOnly | undefined;
     /**
-     * The first JQL parse error of the last submitted query, or {@code null} if there were no errors.
+     * Number of pixels that the editor view container is currently scrolled vertically (Y axis).
      */
-    jqlError: JQLParseError | null;
+    editorViewContainerScroll: number;
     /**
-     * State managed by the autocomplete plugin.
+     * Flag to determine whether the editor view (or autocomplete dropdown) currently has focus.
      */
-    autocomplete: AutocompleteState;
+    editorViewHasFocus: boolean;
     /**
      * Whether rich inline nodes feature should be enabled.
      */
     enableRichInlineNodes: boolean;
+    /**
+     * Custom messages to display.
+     */
+    externalMessages: ExternalMessage[];
     /**
      * Map of hydrated values.
      */
     hydratedValues: HydratedValuesMap;
     /**
-     * Reference to the ResizeObserver object used to process size changes within the editor.
+     * Prefix to use when computing id's for DOM elements (to allow multiple editors rendered on the same page).
      */
-    resizeObserver: ResizeObserver | undefined;
+    idPrefix: string;
     /**
-     * Reference to the editor view container (scrollable element that contains line numbers and editor view).
+     * Mutable reference to a react-intl object.
      */
-    editorViewContainer: HTMLElement | undefined;
+    intlRef: MutableRefObject<IntlShape>;
     /**
-     * Provides information about editor view container size and its position relative to the viewport.
-     * Can be used to position portals in relation to the editor, ensure they don't exceed its dimensions, etc.
+     * Flag to enable the searching indicator when a JQL search is in progress.
      */
-    editorViewContainerRect: DOMRectReadOnly | undefined;
+    isSearching: boolean | undefined;
     /**
-     * Number of pixels that the editor view container is currently scrolled vertically (Y axis).
+     * The first JQL parse error of the last submitted query, or {@code null} if there were no errors.
      */
-    editorViewContainerScroll: number;
+    jqlError: JQLParseError | null;
+    /**
+     * Flag to determine whether line numbers should be shown in the editor.
+     */
+    lineNumbersVisible: boolean;
     /**
      * Called when we want to debug a particular error or action that has occurred within the editor. The message may
      * contain PII, and as such consumers should treat as a privacy unsafe error.
@@ -235,27 +231,31 @@ export type State = {
      */
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
     /**
-     * Custom components to take over the rendering of certain parts of the jql editor
+     * The current query string in the JQL editor.
      */
-    customComponents?: CustomComponents;
+    query: string;
+    /**
+     * Reference to the ResizeObserver object used to process size changes within the editor.
+     */
+    resizeObserver: ResizeObserver | undefined;
 };
 export type DebugMessageEventAttribute = string | number | boolean | void | null;
 export type Props = {
-    query: string;
+    autocompleteProvider: AutocompleteProvider;
+    createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => void;
+    customComponents?: CustomComponents;
+    enableRichInlineNodes: boolean;
     externalMessages: ExternalMessage[];
-    isSearching: boolean | undefined;
     intlRef: MutableRefObject<IntlShape>;
-    createAndFireAnalyticsEvent: (payload: JqlEditorAnalyticsEvent) => void;
-    onEditorMounted?: () => void;
+    isSearching: boolean | undefined;
     onDebugUnsafeMessage?: (message: string, event: {
         [key: string]: DebugMessageEventAttribute;
     }) => void;
+    onEditorMounted?: () => void;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
     onHydrate?: (query: string) => Promise<HydratedValues>;
-    onUpdate?: (query: string, jast: Jast) => void;
     onSearch?: (query: string, jast: Jast) => void;
-    autocompleteProvider: AutocompleteProvider;
-    enableRichInlineNodes: boolean;
     onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
-    onFocus?: (e: FocusEvent<HTMLElement>) => void;
-    customComponents?: CustomComponents;
+    onUpdate?: (query: string, jast: Jast) => void;
+    query: string;
 };

package/dist/types-ts4.5/ui/error-boundary/index.d.ts

@@ -2,24 +2,24 @@ import React, { type ComponentClass, type FunctionComponent } from 'react';
 import { type JQLEditorUIProps } from '../jql-editor/types';
 type WithErrorBoundaryProps = {
     /**
-     * Called if an unexpected error is thrown while rendering the editor.
+     * To adjust size of the editor
+     * `false` matches AK's default field styling
+     * `true` matches AK's compact field styling, used for search purposes
      */
-    onRenderError?: (error: Error) => void;
+    isCompact?: boolean;
     /**
-     * The query to render in the editor.
+     * Called if an unexpected error is thrown while rendering the editor.
      */
-    query: string;
+    onRenderError?: (error: Error) => void;
     /**
      * Called every time the search command is given in the editor with the current query value and respective Jast object.
      * If not passed, hides the search button/other search related functionality, allowing this to be usable as a form field.
      */
     onSearch?: JQLEditorUIProps['onSearch'];
     /**
-     * To adjust size of the editor
-     * `false` matches AK's default field styling
-     * `true` matches AK's compact field styling, used for search purposes
+     * The query to render in the editor.
      */
-    isCompact?: boolean;
+    query: string;
 };
 export declare const withErrorBoundary: <Props extends WithErrorBoundaryProps>(WrappedComponent: FunctionComponent<Props> | ComponentClass<Props>) => (props: Props) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/jql-editor/types.d.ts

@@ -3,18 +3,18 @@ import { type Jast } from '@atlaskit/jql-ast';
 import { type AutocompleteProvider } from '../../plugins/autocomplete/types';
 import { type CustomComponents, type ExternalMessage } from '../../state/types';
 export type HydratedUser = {
-    type: 'user';
+    avatarUrl: string;
     id: string;
     name: string;
-    avatarUrl: string;
+    type: 'user';
 };
 export type HydratedDeprecatedField = {
-    type: 'deprecated-field';
+    deprecatedSearcherKey: string;
     /**
      * The jqlTerm of the field.
      */
     id: string;
-    deprecatedSearcherKey: string;
+    type: 'deprecated-field';
 };
 export type HydratedValue = HydratedUser | HydratedDeprecatedField;
 export type HydratedValues = {
@@ -26,38 +26,41 @@ export type JQLEditorUIProps = {
      */
     analyticsSource: string;
     /**
-     * The query to render in the editor.
-     */
-    query: string;
-    /**
-     * Custom messages to display.
+     * Provider object to fetch autocomplete data.
      */
-    messages?: ExternalMessage[];
+    autocompleteProvider: AutocompleteProvider;
     /**
-     * Flag to enable the searching indicator when a JQL search is in progress.
+     * Custom components to take over the rendering of certain parts of JQL editor
      */
-    isSearching?: boolean;
+    customComponents?: CustomComponents;
     /**
-     * Called when the JQL editor has been initialised.
+     * Enables rich inline nodes feature, which will replace user identifiers with a lozenge containing name and avatar.
+     * Note that you must specify an `onHydrate` prop which will return user data for a given query in order to see the
+     * following behaviour:
+     *  - Loading of user avatars
+     *  - Rendering of user lozenges on component initialisation
+     *  - Rendering of user lozenges on paste
      */
-    onEditorMounted?: () => void;
+    enableRichInlineNodes?: boolean;
     /**
-     * Called every time the editor needs to hydrate values for the current query.
+     * Ref callback to force the focus event
      */
-    onHydrate?: (query: string) => Promise<HydratedValues>;
+    inputRef?: Ref<{
+        focus: () => void;
+    }>;
     /**
-     * Called every time the editor is updated with the current query value and respective Jast object.
+     * `false` matches the Atlaskit default field styling
+     * `true` matches the Atlaskit compact field styling, generally used for search purposes.
      */
-    onUpdate?: (query: string, jast: Jast) => void;
+    isCompact?: boolean;
     /**
-     * Called every time the search command is given in the editor with the current query value and respective Jast object.
-     * If not passed, hides the search button/other search related functionality, allowing this to be usable as a form field.
+     * Flag to enable the searching indicator when a JQL search is in progress.
      */
-    onSearch?: (query: string, jast: Jast) => void;
+    isSearching?: boolean;
     /**
-     * Called if an unexpected error is thrown while rendering the editor.
+     * Custom messages to display.
      */
-    onRenderError?: (error: Error) => void;
+    messages?: ExternalMessage[];
     /**
      * Called when we want to debug a particular error or action that has occurred within the editor. The message may
      * contain PII, and as such consumers should treat as a privacy unsafe error.
@@ -66,40 +69,37 @@ export type JQLEditorUIProps = {
         [key: string]: string | number | boolean | void | null;
     }) => void;
     /**
-     * Called when the syntax help button is clicked. Consumers can return `true` to signify that this event has been
-     * handled which will prevent default behaviour of the help button, i.e. `e.preventDefault()`.
+     * Called when the JQL editor has been initialised.
      */
-    onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
+    onEditorMounted?: () => void;
     /**
      * Called when the editor input is focused.
      */
     onFocus?: (e: FocusEvent<HTMLElement>) => void;
     /**
-     * Provider object to fetch autocomplete data.
+     * Called every time the editor needs to hydrate values for the current query.
      */
-    autocompleteProvider: AutocompleteProvider;
+    onHydrate?: (query: string) => Promise<HydratedValues>;
     /**
-     * Enables rich inline nodes feature, which will replace user identifiers with a lozenge containing name and avatar.
-     * Note that you must specify an `onHydrate` prop which will return user data for a given query in order to see the
-     * following behaviour:
-     *  - Loading of user avatars
-     *  - Rendering of user lozenges on component initialisation
-     *  - Rendering of user lozenges on paste
+     * Called if an unexpected error is thrown while rendering the editor.
      */
-    enableRichInlineNodes?: boolean;
+    onRenderError?: (error: Error) => void;
     /**
-     * `false` matches the Atlaskit default field styling
-     * `true` matches the Atlaskit compact field styling, generally used for search purposes.
+     * Called every time the search command is given in the editor with the current query value and respective Jast object.
+     * If not passed, hides the search button/other search related functionality, allowing this to be usable as a form field.
      */
-    isCompact?: boolean;
+    onSearch?: (query: string, jast: Jast) => void;
     /**
-     * Ref callback to force the focus event
+     * Called when the syntax help button is clicked. Consumers can return `true` to signify that this event has been
+     * handled which will prevent default behaviour of the help button, i.e. `e.preventDefault()`.
      */
-    inputRef?: Ref<{
-        focus: () => void;
-    }>;
+    onSyntaxHelp?: (e: MouseEvent<HTMLElement>) => boolean;
     /**
-     * Custom components to take over the rendering of certain parts of JQL editor
+     * Called every time the editor is updated with the current query value and respective Jast object.
      */
-    customComponents?: CustomComponents;
+    onUpdate?: (query: string, jast: Jast) => void;
+    /**
+     * The query to render in the editor.
+     */
+    query: string;
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
-    expanded: boolean;
     editorId: string;
+    expanded: boolean;
     isDisabled?: boolean;
     label: string;
     onClick: () => void;

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

@@ -1,25 +1,25 @@
 import React, { type FocusEvent, type ReactNode } from 'react';
 type Props = {
-    /**
-     * React node to render within the footer.
-     */
-    EditorFooterContent: ReactNode;
     /**
      * React node to render within the editor controls group.
      */
     EditorControlsContent: ReactNode;
     /**
-     * Flag to determine whether the editor view (or autocomplete dropdown) currently has focus.
+     * React node to render within the footer.
      */
-    editorViewHasFocus: boolean;
+    EditorFooterContent: ReactNode;
     /**
-     * Flag to determine whether line numbers should be shown in the editor.
+     * Flag to determine whether the editor view (or autocomplete dropdown) currently has focus.
      */
-    lineNumbersVisible: boolean;
+    editorViewHasFocus: boolean;
     /**
      * Flag to determine if there were any JQL parse errors in the last submitted query.
      */
     editorViewIsInvalid: boolean;
+    /**
+     * Flag to determine whether line numbers should be shown in the editor.
+     */
+    lineNumbersVisible: boolean;
     /**
      * ID to assign to the main wrapper of the editor.
      */
@@ -28,6 +28,10 @@ type Props = {
      * Ref callback to the main wrapper of the editor.
      */
     onEditorMainRef?: (editorMain: HTMLElement | null) => void;
+    /**
+     * Callback when the editor view is blurred.
+     */
+    onEditorViewBlur?: () => void;
     /**
      * Ref callback to the editor view container element.
      */
@@ -36,18 +40,14 @@ type Props = {
      * Callback when the editor view is scrolled.
      */
     onEditorViewContainerScroll?: (event: React.UIEvent<HTMLElement>) => void;
-    /**
-     * Ref callback to the editor view element which the Prosemirror editor will be bound to.
-     */
-    onEditorViewRef?: (editorView: HTMLElement | null) => void;
-    /**
-     * Callback when the editor view is blurred.
-     */
-    onEditorViewBlur?: () => void;
     /**
      * Callback when the editor view is focused.
      */
     onEditorViewFocus?: (event: FocusEvent<HTMLElement>) => void;
+    /**
+     * Ref callback to the editor view element which the Prosemirror editor will be bound to.
+     */
+    onEditorViewRef?: (editorView: HTMLElement | null) => void;
     /**
      * Callback when the editor view receives a CSS transition end event.
      */
@@ -58,7 +58,7 @@ type ReadOnlyProps = {
     query: string;
 };
 export declare const JQLEditorReadOnly: ({ isSearch, isCompact, ...props }: ReadOnlyProps & {
-    isSearch?: boolean;
     isCompact?: boolean;
+    isSearch?: boolean;
 }) => React.JSX.Element;
 export default JQLEditorLayout;

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

@@ -35,8 +35,8 @@ export declare const EditorView: import("@emotion/styled").StyledComponent<{
 } & {
     defaultMaxRows: number;
     expandedRows: number;
-    lineNumbersVisible: boolean;
     isCompact: boolean;
+    lineNumbersVisible: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ReadOnlyEditorView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
@@ -44,8 +44,8 @@ export declare const ReadOnlyEditorView: import("@emotion/styled").StyledCompone
 } & {
     defaultMaxRows: number;
     expandedRows: number;
-    lineNumbersVisible: boolean;
     isCompact: boolean;
+    lineNumbersVisible: boolean;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
@@ -53,8 +53,8 @@ export declare const EditorControls: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    isSearch: boolean;
     isCompact: boolean;
+    isSearch: boolean;
     isVisualRefresh?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -9,30 +9,30 @@ export type PortalActions = {
 export type PortalState = {
     components: {
         [key: string]: {
-            portalComponent: ReactNode;
             container: Container;
+            portalComponent: ReactNode;
         };
     };
     containers: PluginContainers;
 };
 type CreatePortalAction = {
-    type: 'createPortal';
     payload: {
+        container: Container;
         key: string;
         portalComponent: ReactNode;
-        container: Container;
     };
+    type: 'createPortal';
 };
 type DestroyPortalAction = {
-    type: 'destroyPortal';
     payload: string;
+    type: 'destroyPortal';
 };
 type RegisterPluginContainerAction = {
-    type: 'registerPluginContainer';
     payload: {
         containerKey: PluginContainerKey;
         element: HTMLElement | null;
     };
+    type: 'registerPluginContainer';
 };
 export type PortalAction = CreatePortalAction | DestroyPortalAction | RegisterPluginContainerAction;
 export {};