@atlaskit/jql-editor 5.5.0 → 5.5.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/jql-editor
 
+## 5.5.2
+
+### Patch Changes
+
+- [`92b1368d9607d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92b1368d9607d) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
+## 5.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.5.0
 
 ### Minor 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.6", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.5.1", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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.6", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.5.1", ANALYTICS_CHANNEL);
 };

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.6", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.5.1", ANALYTICS_CHANNEL);
 };

package/dist/types/analytics/listener/types.d.ts

@@ -1,7 +1,7 @@
 import { type GasPurePayload, type GasPureScreenEventPayload } from '@atlaskit/analytics-gas-types';
 export type AnalyticsWebClient = {
-    sendUIEvent: (event: GasPurePayload) => void;
     sendOperationalEvent: (event: GasPurePayload) => void;
-    sendTrackEvent: (event: GasPurePayload) => void;
     sendScreenEvent: (event: GasPureScreenEventPayload) => void;
+    sendTrackEvent: (event: GasPurePayload) => void;
+    sendUIEvent: (event: GasPurePayload) => void;
 };

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

@@ -12,26 +12,26 @@ export type EditorTheme = {
      */
     expandedRows: number;
     /**
-     * Toggle the editor view expanded state.
+     * `false` matches AK's default field styling
+     * `true` matches AK's compact field styling, generally used for search purposes.
      */
-    toggleExpanded: () => void;
+    isCompact: boolean;
     /**
      * `true` shows search button, other search related elements
      * `false` to act as a text field
      */
     isSearch: boolean;
     /**
-     * `false` matches AK's default field styling
-     * `true` matches AK's compact field styling, generally used for search purposes.
+     * Toggle the editor view expanded state.
      */
-    isCompact: boolean;
+    toggleExpanded: () => void;
 };
 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;
     isCompact?: boolean;
+    isSearch?: boolean;
 }) => EditorTheme;
 export declare const useEditorThemeContext: () => EditorTheme;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { type PluginKeymap } from '../../../common/plugin-keymap';
 import { type AutocompleteAnalyticsAttributes, type SelectableAutocompleteOption } from '../types';
 type Props = {
-    options: SelectableAutocompleteOption[];
-    loading: boolean;
     keymap: PluginKeymap;
+    loading: boolean;
     onClick: (option: SelectableAutocompleteOption, analyticsAttributes: AutocompleteAnalyticsAttributes) => void;
+    options: SelectableAutocompleteOption[];
 };
 declare const AutocompleteDropdown: ({ options, loading, keymap, onClick }: Props) => React.JSX.Element | null;
 export default AutocompleteDropdown;

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { type SelectableAutocompleteOption } from '../types';
 type Props = {
     isSelected: boolean;
-    option: SelectableAutocompleteOption;
     onClick: () => void;
     onMouseMove: () => void;
+    option: SelectableAutocompleteOption;
 };
 declare const AutocompleteOption: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 export default AutocompleteOption;

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

@@ -6,8 +6,8 @@ export declare const OptionListItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    isSelected: boolean;
     isDeprecated: boolean;
+    isSelected: boolean;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const OptionName: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/types/plugins/autocomplete/components/types.d.ts

@@ -4,9 +4,9 @@ import { type PluginKeymap } from '../../common/plugin-keymap';
 export type { AutocompleteProvider, AutocompleteOptions, AutocompleteOption, AutocompleteValueType, } from '@atlaskit/jql-editor-common';
 export type AutocompleteOptionType = 'field' | 'operator' | 'value' | 'function' | 'keyword';
 export type AutocompleteOptionExtra = {
-    replacePosition: Position;
     context: JQLRuleContext | null;
     matchedText: string;
+    replacePosition: Position;
     type: AutocompleteOptionType;
 };
 export type SelectableAutocompleteOption = AutocompleteOption & AutocompleteOptionExtra & {
@@ -14,15 +14,15 @@ export type SelectableAutocompleteOption = AutocompleteOption & AutocompleteOpti
 };
 export type SelectableAutocompleteOptions = SelectableAutocompleteOption[];
 export type AutocompleteOptionGroup = {
-    tokens: SelectableAutocompleteOptions;
     fields: SelectableAutocompleteOptions;
+    functions: SelectableAutocompleteOptions;
     operators: SelectableAutocompleteOptions;
+    tokens: SelectableAutocompleteOptions;
     values: SelectableAutocompleteOptions;
-    functions: SelectableAutocompleteOptions;
 };
 export type AutocompletePosition = {
-    top: number;
     left: number;
+    top: number;
 };
 export type AutocompleteProps = {
     keymap: PluginKeymap;
@@ -30,9 +30,9 @@ export type AutocompleteProps = {
 };
 export type AutocompleteAnalyticsAttributes = {
     keyboard: boolean;
+    nodeType: string;
     numberOfOptions: number;
     optionIndex: number;
     optionType: AutocompleteOptionType;
     queryLength: number;
-    nodeType: string;
 };

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

@@ -2,8 +2,8 @@ import { type FunctionComponent } from 'react';
 import { type AttributeSpec } from '@atlaskit/editor-prosemirror/model';
 import { type NodeViewProps } from '../util/react-node-view';
 export type JQLNodeSpec<Props> = {
-    component: FunctionComponent<NodeViewProps<Props>>;
     attrs: {
         [name: string]: AttributeSpec;
     };
+    component: FunctionComponent<NodeViewProps<Props>>;
 };

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

@@ -1,7 +1,7 @@
 import { type JQLNodeSpec } from '../types';
 export type Props = {
+    fieldName: string;
     id: string;
     name: string;
-    fieldName: string;
 };
 export declare const user: JQLNodeSpec<Props>;

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

@@ -2,8 +2,8 @@ export declare const UserContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    selected: boolean;
     error: boolean;
+    selected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const NameContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/types/plugins/rich-inline-nodes/util/react-node-view.d.ts

@@ -3,8 +3,8 @@ import { type Node } from '@atlaskit/editor-prosemirror/model';
 import { type Decoration, type NodeView } from '@atlaskit/editor-prosemirror/view';
 import { type PortalActions } from '../../../ui/jql-editor-portal-provider/types';
 export type NodeViewProps<Props> = Props & {
-    selected: boolean;
     error: boolean;
+    selected: boolean;
 };
 export declare class ReactNodeView<Props> implements NodeView {
     private readonly component;

package/dist/types/plugins/types.d.ts

@@ -1,16 +1,16 @@
 export type { AutocompleteProvider, AutocompleteOptions, AutocompleteOption, AutocompleteValueType, } from './autocomplete/types';
 export type PluginContainers = {
     /**
-     * Container for plugin components which should be appended to the top level container element.
+     * Container for plugin components which should be appended at the end of the editor input.
      */
-    main?: HTMLElement;
+    editor_controls?: HTMLElement;
     /**
      * Container for plugin components which should be appended to the footer underneath the editor input.
      */
     footer?: HTMLElement;
     /**
-     * Container for plugin components which should be appended at the end of the editor input.
+     * Container for plugin components which should be appended to the top level container element.
      */
-    editor_controls?: HTMLElement;
+    main?: HTMLElement;
 };
 export type PluginContainerKey = keyof PluginContainers;

package/dist/types/plugins/validation-tooltip/view.d.ts

@@ -2,10 +2,10 @@ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { JQLSyntaxError } from '@atlaskit/jql-ast';
 type Coords = {
+    bottom: number;
     left: number;
     right: number;
     top: number;
-    bottom: number;
 };
 export declare class ValidationTooltipPluginView {
     tooltip: HTMLElement;

package/dist/types/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/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 {};