@jetbrains/ring-ui 5.1.1 → 5.1.3

package/components/global/focus-sensor-hoc.js

@@ -15,7 +15,7 @@ export default function focusSensorHOC(ComposedComponent) {
             focused: this.props.focused
         };
         componentDidMount() {
-            const { props: { autofocus }, node } = this;
+            const { props: { autofocus, scrollOnTableFocus }, node } = this;
             node?.setAttribute('tabindex', '0');
             if (node != null) {
                 node.style.outline = 'none';
@@ -23,7 +23,7 @@ export default function focusSensorHOC(ComposedComponent) {
             document.addEventListener('focus', this.onFocusCapture, true);
             document.addEventListener('blur', this.onBlurCapture, true);
             if (autofocus) {
-                node?.focus();
+                node?.focus({ preventScroll: !scrollOnTableFocus });
             }
         }
         componentDidUpdate(prevProps) {
@@ -72,13 +72,13 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         onFocusRestore = () => {
             this._skipNextCapture = true;
-            this.node?.focus();
+            this.node?.focus({ preventScroll: !this.props.scrollOnTableFocus });
         };
         onFocusReset = () => {
             this.node?.blur();
         };
         render() {
-            const { autofocus, focused, onFocus, onBlur, innerRef, ...rest } = this.props;
+            const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
             return (<ComposedComponent {...rest} innerRef={composeRefs(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
         }
     }
@@ -94,6 +94,7 @@ export default function focusSensorHOC(ComposedComponent) {
         ...ComposedComponent.defaultProps,
         focused: false,
         autofocus: false,
+        scrollOnTableFocus: true,
         onFocus: () => { },
         onBlur: () => { }
     };

package/components/global/react-dom-renderer.d.ts

@@ -1,16 +1,16 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 export interface RendererProps {
     className?: string | undefined;
-    nodes: readonly Node[];
+    nodes: readonly Node[] | NodeList;
 }
 export default class Renderer extends Component<RendererProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
-        nodes: PropTypes.Requireable<any[]>;
+        nodes: PropTypes.Requireable<object>;
     };
     componentDidMount(): void;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/global/react-dom-renderer.js

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 export default class Renderer extends Component {
     static propTypes = {
         className: PropTypes.string,
-        nodes: PropTypes.array
+        nodes: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
     };
     componentDidMount() {
+        const { node } = this;
         const { nodes } = this.props;
-        if (!this.node || !nodes || !nodes.length) {
+        if (!node || !nodes || !nodes.length) {
             return;
         }
-        const fragment = document.createDocumentFragment();
-        nodes.forEach(nodeToRender => fragment.appendChild(nodeToRender));
-        this.node.appendChild(fragment);
+        Array.from(this.props.nodes).
+            forEach(nodeToRender => node.appendChild(nodeToRender));
     }
     node;
     nodeRef = (node) => {

package/components/global/react-render-adapter.js

@@ -1,36 +1,24 @@
-// Allows overriding ReactDOM.render when using React 18:
-// import * as client from 'react-dom/client'
-// import {setClient} from '@jetbrains/ring-ui/components/global/react-render-adapter'
-//
-// setClient(client)
-import {
-  render as legacyRender,
-  unmountComponentAtNode as legacyUnmountComponentAtNode,
-  hydrate as legacyHydrate
-} from 'react-dom';
-
+/* eslint-disable react/no-deprecated */
+import { render as legacyRender, unmountComponentAtNode as legacyUnmountComponentAtNode, hydrate as legacyHydrate } from 'react-dom';
+/* eslint-enable */
 /* eslint-disable import/no-mutable-exports */
 export let render = legacyRender;
 export let unmountComponentAtNode = legacyUnmountComponentAtNode;
 export let hydrate = legacyHydrate;
-/* eslint-enable */
-
-export function setClient({createRoot, hydrateRoot}) {
-  const roots = new WeakMap();
-
-  render = (element, container) => {
-    let root = roots.get(container);
-    if (root == null) {
-      root = createRoot(container);
-      roots.set(container, root);
-    }
-    root.render(element);
-  };
-
-  unmountComponentAtNode = container => roots.get(container)?.unmount();
-
-  hydrate = (element, container) => {
-    const root = hydrateRoot(container, element);
-    roots.set(container, root);
-  };
+// TODO replace with a noop with warning in 6.0, remove in 7.0
+export function setClient({ createRoot, hydrateRoot }) {
+    const roots = new WeakMap();
+    render = (element, container) => {
+        let root = roots.get(container);
+        if (root == null) {
+            root = createRoot(container);
+            roots.set(container, root);
+        }
+        root.render(element);
+    };
+    unmountComponentAtNode = container => roots.get(container)?.unmount();
+    hydrate = (element, container) => {
+        const root = hydrateRoot(container, element);
+        roots.set(container, root);
+    };
 }

package/components/global/ring-angular-component.js

@@ -1,6 +1,4 @@
 export default class RingAngularComponent {
-  static $inject = [];
-
   static get controller() {
     return this;
   }
@@ -8,7 +6,7 @@ export default class RingAngularComponent {
   $inject = {};
 
   constructor(...args) {
-    this.constructor.$inject.forEach((injectName, i) => {
+    (this.constructor.$inject ?? []).forEach((injectName, i) => {
       this.$inject[injectName] = args[i];
     });
   }

package/components/global/ring-angular-component.test.js

@@ -5,8 +5,9 @@ import 'angular-mocks';
 import RingAngularComponent from './ring-angular-component';
 
 class TestComponent extends RingAngularComponent {
-  static $inject = ['$scope'];
+
 }
+TestComponent.$inject = ['$scope'];
 
 const testModule = angular.module('Test', []).component('testComponent', TestComponent).name;
 

package/components/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+export default function useEventCallback(fn) {
+    const ref = useRef();
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        const { current } = ref;
+        if (current == null) {
+            throw new Error('callback created in useEventCallback can only be called from event handlers');
+        }
+        return current(...args);
+    }, []);
+}

package/components/global/variables_dark.css

@@ -87,8 +87,8 @@
   --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
   --ring-added-background-components: 54, 89, 71;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
-  --ring-disabled-background-components: 54, 54, 54;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #363636 */
+  --ring-disabled-background-components: 44, 47, 51;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2C2F33 */
   --ring-disabled-selected-background-components: 44, 47, 51;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;

package/components/grid/col.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface ColProps {
     children?: ReactNode;
@@ -27,5 +27,5 @@ export default class Col extends Component<ColProps> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/grid/grid.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Grid
@@ -8,7 +8,7 @@ export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Row } from './row';
 export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 declare const ModifierType: PropTypes.Requireable<string>;
 type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
@@ -35,6 +35,6 @@ export default class Row extends Component<RowProps> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/group/group.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Group
@@ -8,5 +8,5 @@ export default class Group extends Component<HTMLAttributes<HTMLSpanElement>> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/header/header.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -21,7 +21,7 @@ declare class Header extends Component<HeaderProps> {
         spaced: boolean;
         theme: Theme;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
 export default Header;

package/components/header/logo.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { IconAttrs, Size } from '../icon/icon';
 export default class Logo extends PureComponent<IconAttrs> {
@@ -10,5 +10,5 @@ export default class Logo extends PureComponent<IconAttrs> {
         suppressSizeWarning: boolean;
     };
     static Size: typeof Size;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/header/profile.d.ts

@@ -15,7 +15,7 @@ export interface ProfileTranslations {
 export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     closeOnSelect: boolean;
     renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
-    translations: ProfileTranslations;
+    translations?: ProfileTranslations | null | undefined;
     size: Size;
     renderGuest: (props: ProfileProps) => ReactNode;
     hasUpdates?: boolean | null | undefined;
@@ -67,7 +67,9 @@ export default class Profile extends PureComponent<ProfileProps> {
         renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: ProfileProps;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Profile.contextType>;
     static Size: typeof Size;
-    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/header/profile.js

@@ -5,6 +5,7 @@ import Avatar, { Size } from '../avatar/avatar';
 import Button from '../button/button';
 import DropdownMenu from '../dropdown-menu/dropdown-menu';
 import PopupMenu from '../popup-menu/popup-menu';
+import { I18nContext } from '../i18n/i18n-context';
 import { isTruthy } from '../global/typescript-utils';
 import styles from './header.css';
 const rgItemType = PopupMenu.ListProps.Type.LINK;
@@ -48,17 +49,20 @@ export default class Profile extends PureComponent {
     static defaultProps = {
         closeOnSelect: true,
         renderPopupItems: items => items,
-        translations: {},
         size: Size.Size32,
-        renderGuest: ({ loading, onLogin, className, translations }) => (<div className={classNames(styles.profileEmpty, className)}>
-        <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
-          {translations.login || 'Log in...'}
-        </Button>
-      </div>)
+        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
+            <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
+              {translations?.login ?? translate('login')}
+            </Button>
+          </div>)}
+      </I18nContext.Consumer>)
     };
+    static contextType = I18nContext;
     static Size = Size;
     render() {
         const { className, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, ...props } = this.props;
+        const { translate } = this.context;
         if (!user) {
             return (<div {...props} className={classNames(styles.profileEmpty, className)}>
           <Avatar size={size} round={round}/>
@@ -76,32 +80,32 @@ export default class Profile extends PureComponent {
         const items = [
             showApplyChangedUser && {
                 rgItemType,
-                label: translations.applyChangedUser || 'Apply changed user',
+                label: translations?.applyChangedUser ?? translate('applyChangedUser'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             showLogIn && {
                 rgItemType,
-                label: translations.login || 'Log in',
+                label: translations?.login ?? translate('login'),
                 className: styles.profileMenuItem,
                 onClick: onRevertPostponement
             },
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
-                label: translations.profile || 'Profile',
+                label: translations?.profile ?? translate('profile'),
                 target: '_self',
                 href: profileUrl,
                 LinkComponent
             },
             showSwitchUser && {
                 rgItemType,
-                label: translations.switchUser || 'Switch user',
+                label: translations?.switchUser ?? translate('switchUser'),
                 className: styles.profileMenuItem,
                 onClick: onSwitchUser
             },
             showLogOut && {
                 rgItemType,
-                label: translations.logout || 'Log out',
+                label: translations?.logout ?? translate('logout'),
                 onClick: onLogout
             }
         ].filter(isTruthy);

package/components/header/services-link.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LinkProps } from '../link/link';
 export interface Service {
@@ -21,5 +21,5 @@ export default class ServicesLink extends PureComponent<ServicesLinkProps> {
             name: PropTypes.Requireable<string>;
         }>>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/header/services.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 import ServicesLink, { Service } from './services-link';
@@ -29,5 +29,5 @@ export default class Services extends PureComponent<ServicesProps> {
     };
     static Link: typeof ServicesLink;
     serviceIsActive: (service: Service) => boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/header/smart-profile.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Auth, { AuthUser } from '../auth/auth';
 import { Size } from '../avatar/avatar';
@@ -31,6 +31,6 @@ export default class SmartProfile extends PureComponent<SmartProfileProps, Smart
     onRevertPostponement: () => void;
     requestUser(): Promise<void>;
     checkUserCertificateMismatch(user: AuthUser): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/header/smart-services.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Auth from '../auth/auth';
 import HTTP from '../http/http';
@@ -21,5 +21,5 @@ export default class SmartServices extends Component<SmartServicesProps> {
     stopLoading: () => void;
     getServicesContent: () => void;
     getServices(fields: string): Promise<any> | undefined;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }

package/components/header/tray-icon.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonAttrs } from '../button/button';
 import { IconType } from '../icon/icon';
@@ -28,5 +28,5 @@ export default class TrayIcon extends Component<ButtonAttrs & TrayIconSpecificPr
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/header/tray.d.ts

@@ -1,9 +1,9 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export default class Tray extends Component<HTMLAttributes<HTMLElement>> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/heading/heading.css

@@ -9,30 +9,30 @@
     margin-top: 0;
   }
 
-  @nest h1&, h2& {
+  &:is(h1, h2) {
     margin-bottom: 8px;
 
     color: var(--ring-heading-color);
   }
 
-  @nest h1& {
+  &:is(h1) {
     font-size: 24px;
     line-height: 28px;
   }
 
-  @nest h2& {
+  &:is(h2) {
     font-size: 20px;
     line-height: 24px;
   }
 
-  @nest h3& {
+  &:is(h3) {
     margin-bottom: 0;
 
-    font-size: inherit;
-    line-height: inherit;
+    font-size: 16px;
+    line-height: 22px;
   }
 
-  @nest h4& {
+  &:is(h4) {
     margin-bottom: 1px;
 
     letter-spacing: 1px;
@@ -40,7 +40,7 @@
 
     font-size: 12px;
     font-weight: normal;
-    line-height: 16px;
+    line-height: 18px;
   }
 }
 

package/components/http/http.d.ts

@@ -11,6 +11,7 @@ export declare class HTTPError extends ExtendableError {
 export declare const CODE: {
     UNAUTHORIZED: number;
 };
+type Method<T> = (url: string, params?: RequestParams) => Promise<T>;
 export interface FetchParams<T = unknown> extends Omit<RequestInit, 'body' | 'headers'> {
     body?: T;
     query?: Record<string, unknown> | undefined;
@@ -40,12 +41,21 @@ export default class HTTP implements Partial<HTTPAuth> {
     private _storeRequestMeta;
     private _processResponse;
     private static _isErrorStatus;
-    fetch: (url: string, params?: FetchParams) => Promise<any>;
+    fetch: <T = any>(url: string, params?: FetchParams) => Promise<T>;
     authorizedFetch(...args: Parameters<HTTP['_performRequest']>): Promise<any>;
-    request: (url: string, params?: RequestParams) => Promise<any>;
+    request: <T = any>(url: string, params?: RequestParams) => Promise<T>;
     getMetaForResponse: (response: object) => Partial<Response> | undefined;
-    get: (url: string, params?: RequestParamsWithoutMethod) => Promise<any>;
-    post: (url: string, params?: RequestParamsWithoutMethod) => Promise<any>;
-    delete: (url: string, params?: RequestParamsWithoutMethod) => Promise<any>;
-    put: (url: string, params?: RequestParamsWithoutMethod) => Promise<any>;
+    get: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    post: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    delete: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    put: <T = any>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    /**
+     * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
+     * @param method
+     */
+    abortify: <T>(method: Method<T>) => (url: string, params?: RequestParams<boolean> | undefined) => {
+        promise: Promise<T>;
+        abort: () => void;
+    };
 }
+export {};

package/components/http/http.js

@@ -123,6 +123,8 @@ export default class HTTP {
     static _isErrorStatus(status) {
         return status < STATUS_OK_IF_MORE_THAN || status >= STATUS_BAD_IF_MORE_THAN;
     }
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fetch = async (url, params = {}) => {
         const { body, query = {}, ...fetchConfig } = params;
         const response = await this._fetch(this._makeRequestUrl(url, query), {
@@ -136,6 +138,8 @@ export default class HTTP {
         const response = await this._performRequest(...args);
         return this._processResponse(response);
     }
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     request = async (url, params) => {
         let token = await this.requestToken?.();
         let response = await this._performRequest(url, token, params);
@@ -159,20 +163,42 @@ export default class HTTP {
         }
     };
     getMetaForResponse = (response) => this._requestsMeta.get(response);
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get = (url, params) => (this.request(url, {
         ...params,
         method: 'GET'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     post = (url, params) => (this.request(url, {
         ...params,
         method: 'POST'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete = (url, params) => (this.request(url, {
         ...params,
         method: 'DELETE'
     }));
+    // TODO: Replace any to never/unknown in next release and remove eslint-disable
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     put = (url, params) => (this.request(url, {
         ...params,
         method: 'PUT'
     }));
+    /**
+     * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
+     * @param method
+     */
+    abortify = (method) => (...[url, params]) => {
+        const ctrl = new AbortController();
+        if (params && !('signal' in params)) {
+            params.signal = ctrl.signal;
+        }
+        return {
+            promise: method.call(this, url, params),
+            abort: () => ctrl.abort()
+        };
+    };
 }

package/components/hub-source/hub-source__users-groups.d.ts

@@ -5,7 +5,7 @@ export interface HubSourceUsersGroupsOptions {
     searchSideThreshold: number;
 }
 export interface UserGroup extends Item {
-    id: number;
+    id: string;
     total?: number;
     userCount: number;
     iconUrl?: string;