@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

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;

package/components/i18n/README.md

@@ -0,0 +1,46 @@
+This is localisation layer, that allows to translate the app into different languages.
+
+All messages should be stored in a messages.json, using that format https://www.i18next.com/misc/json-format#i18next-json-v4
+
+### How to use
+
+1. Using your project i18n tooling, construct an object with localised messages, like:
+```
+// You can use https://ttag.js.org/ for example:
+const localised = {
+  login: t`Log in`,
+  ...
+}
+```
+
+2. Pass it to i18n singleton, using `setTranslations`. That would provide localisation to non-react components, like Auth.
+
+```
+// Your messages object should have localised strings at that moment
+const localised = {
+  login: 'Inloggen',
+  ...
+}
+
+setTranslations(localised);
+```
+
+3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.  
+
+```
+  <I18nContextHolder messages={localised}>
+    <App />
+  </I18nContextHolder>
+```  
+
+
+
+### Utilities
+
+There is some ways to automate strings extraction from messages.json. You can do:
+
+```
+npx i18next-conv -s messages.json -t messages.pot -l en --ctxSeparator "|" --compatibilityJSON v4
+```
+
+And get a .pot file, which you can merge with your other sources

package/components/i18n/i18n-context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type Messages } from './i18n';
+export interface I18nContextProps {
+    translate(key: keyof Messages): string;
+    messages: Messages;
+}
+export declare const I18nContext: React.Context<I18nContextProps>;
+interface I18nContextHolderProps {
+    messages: Messages;
+    children?: React.ReactNode;
+}
+export declare const I18nContextHolder: React.FC<I18nContextHolderProps>;
+export {};

package/components/i18n/i18n-context.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { getTranslations, setTranslations, translate } from './i18n';
+export const I18nContext = React.createContext({
+    messages: getTranslations(),
+    translate
+});
+export const I18nContextHolder = ({ children, messages }) => {
+    useEffect(() => {
+        setTranslations(messages);
+    }, [messages]);
+    return (<I18nContext.Provider value={{ messages, translate }}>
+      {children}
+    </I18nContext.Provider>);
+};

package/components/i18n/i18n.d.ts

@@ -0,0 +1,59 @@
+import defaultMessages from './messages.json';
+export type MessagesStrict = typeof defaultMessages;
+export type Messages = Partial<MessagesStrict>;
+export declare function setTranslations(newMessages: Messages): void;
+export declare function getTranslations(): Partial<{
+    login: string;
+    logout: string;
+    loginTo: string;
+    ok: string;
+    cancel: string;
+    tryAgainLabel: string;
+    postpone: string;
+    youHaveLoggedInAs: string;
+    applyChange: string;
+    backendIsNotAvailable: string;
+    checkAgain: string;
+    nothingHappensLink: string;
+    errorMessage: string;
+    applyChangedUser: string;
+    profile: string;
+    switchUser: string;
+    addFirstDate: string;
+    addSecondDate: string;
+    addTime: string;
+    selectName: string;
+    setDate: string;
+    setDateTime: string;
+    setPeriod: string;
+    clear: string;
+    gotIt: string;
+    dismiss: string;
+    perPage: string;
+    firstPage: string;
+    lastPage: string;
+    nextPage: string;
+    previousPage: string;
+    searchTitle: string;
+    clearTitle: string;
+    userAgreement: string;
+    accept: string;
+    decline: string;
+    close: string;
+    scrollToAccept: string;
+    remindLater: string;
+    filterItems: string;
+    selectOption: string;
+    progress: string;
+    loading: string;
+    noOptionsFound: string;
+    banned: string;
+    online: string;
+    offline: string;
+    copyToClipboard: string;
+    copiedToClipboard: string;
+    copingToClipboardError: string;
+    unverified: string;
+}>;
+export declare function getTranslationsWithFallback(): MessagesStrict;
+export declare function translate(key: keyof MessagesStrict): string;

package/components/i18n/i18n.js

@@ -0,0 +1,26 @@
+import defaultMessages from './messages.json';
+let messages = defaultMessages;
+const warned = new Set();
+function warnMissedKeyOnce(key) {
+    if (warned.has(key)) {
+        return;
+    }
+    warned.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`Missing localisation for key "${key}"`);
+}
+export function setTranslations(newMessages) {
+    messages = newMessages;
+}
+export function getTranslations() {
+    return messages;
+}
+export function getTranslationsWithFallback() {
+    return { ...defaultMessages, ...messages };
+}
+export function translate(key) {
+    if (!(key in messages)) {
+        warnMissedKeyOnce(key);
+    }
+    return messages[key] ?? defaultMessages[key];
+}

package/components/i18n/messages.json

@@ -0,0 +1,53 @@
+{
+  "login": "Log in",
+  "logout": "Log out",
+  "loginTo": "Log in to {{serviceName}}",
+  "ok": "OK",
+  "cancel": "Cancel",
+  "tryAgainLabel": "Try again",
+  "postpone": "Postpone",
+  "youHaveLoggedInAs": "You have logged in as another user: {{userName}}",
+  "applyChange": "Apply change",
+  "backendIsNotAvailable": "Connection lost",
+  "checkAgain": "try again",
+  "nothingHappensLink": "Click here if nothing happens",
+  "errorMessage": "There may be a problem with your network connection. Make sure that you are online and",
+  "applyChangedUser": "Apply changed user",
+  "profile": "Profile",
+  "switchUser": "Switch user",
+  "addFirstDate": "Add first date",
+  "addSecondDate": "Add second date",
+  "addTime": "Add time",
+  "selectName": "Select {{name}}",
+  "setDate": "Set a date",
+  "setDateTime": "Set date and time",
+  "setPeriod": "Set a period",
+  "clear": "Clear input",
+  "gotIt": "Got it",
+  "dismiss": "Dismiss",
+  "perPage": "per page",
+  "firstPage": "First page",
+  "lastPage": "Last page",
+  "nextPage": "Next page",
+  "previousPage": "Previous",
+  "searchTitle": "Search",
+  "clearTitle": "Clear search input",
+  "userAgreement": "User Agreement",
+  "accept": "Accept",
+  "decline": "Decline",
+  "close": "Close",
+  "scrollToAccept": "View the entire agreement to continue",
+  "remindLater": "Remind me later",
+  "filterItems": "Filter items",
+  "selectOption": "Select an option",
+  "progress": "Progress",
+  "loading": "Loading...",
+  "noOptionsFound": "No options found",
+  "banned": "banned",
+  "online": "online",
+  "offline": "offline",
+  "copyToClipboard": "Copy email to clipboard",
+  "copiedToClipboard": "Email was copied to clipboard",
+  "copingToClipboardError": "Failed to copy to clipboard",
+  "unverified": "Unverified"
+}

package/components/icon/icon.d.ts

@@ -1,7 +1,7 @@
 /**
  * @name Icon
  */
-import { PureComponent, ComponentType, SVGAttributes, HTMLAttributes } from 'react';
+import React, { PureComponent, ComponentType, SVGAttributes, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Color, Size } from './icon__constants';
 export type IconType = ComponentType<SVGAttributes<SVGSVGElement>>;
@@ -9,7 +9,7 @@ export interface IconProps extends HTMLAttributes<HTMLElement> {
     color: Color;
     glyph: string | IconType | null;
     height?: number | undefined;
-    size?: Size | null | undefined;
+    size?: Size | number | null | undefined;
     width?: number | undefined;
     loading?: boolean | null | undefined;
     suppressSizeWarning?: boolean | null | undefined;
@@ -37,7 +37,7 @@ export default class Icon extends PureComponent<IconProps> {
         width: number | undefined;
         height: number | undefined;
     } | undefined;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }
 export type IconAttrs = JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
 export { Color, Size };