@jetbrains/ring-ui 5.1.1 → 5.1.4

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 };

package/components/icon/icon__svg.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 export interface IconSVGProps extends SVGAttributes<SVGSVGElement> {
     src: string;
 }
-declare function IconSVG({ src, className, ...rest }: IconSVGProps): JSX.Element;
+declare function IconSVG({ src, className, ...rest }: IconSVGProps): React.JSX.Element;
 declare namespace IconSVG {
     var propTypes: {
         className: PropTypes.Requireable<string>;

package/components/input/input-legacy.css

@@ -44,13 +44,13 @@ Input
   border: 1px solid var(--ring-borders-color);
   border-radius: var(--ring-border-radius);
   outline: none;
-  background: transparent;
+  background-color: var(--ring-content-background-color);
 
   caret-color: var(--ring-main-color);
 
   /* stylelint-enable order/properties-order */
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: var(--ring-input-padding-start);
     padding-left: var(--ring-input-padding-end);
   }
@@ -61,7 +61,7 @@ Input
     border-color: var(--ring-border-hover-color);
   }
 
-  @nest .error & {
+  .error & {
     border-color: var(--ring-icon-error-color);
   }
 

package/components/input/input.css

@@ -6,6 +6,7 @@
 .outerContainer {
   --ring-input-icon-offset: calc(unit * 2.5);
   --ring-input-padding-inline: unit;
+  --ring-input-background-color: var(--ring-content-background-color);
 }
 
 .borderless {
@@ -44,13 +45,13 @@
   border: 1px solid var(--ring-borders-color);
   border-radius: var(--ring-border-radius);
   outline: none;
-  background: transparent;
+  background-color: var(--ring-input-background-color);
 
   font: inherit;
 
   caret-color: var(--ring-main-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     padding-right: var(--ring-input-padding-start);
     padding-left: var(--ring-input-padding-end);
   }
@@ -61,7 +62,7 @@
     border-color: var(--ring-border-hover-color);
   }
 
-  @nest .error & {
+  .error & {
     border-color: var(--ring-icon-error-color);
   }
 
@@ -94,6 +95,7 @@
 
 .borderless .input {
   border-color: transparent;
+  background-color: transparent;
 }
 
 .withIcon .input {
@@ -113,7 +115,7 @@
 
   color: var(--ring-icon-secondary-color);
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     right: unit;
     left: auto;
   }
@@ -130,11 +132,11 @@
 
   line-height: inherit;
 
-  @nest .empty & {
+  .empty & {
     display: none;
   }
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     right: auto;
     left: unit;
   }
@@ -148,21 +150,6 @@ textarea.input {
   resize: none;
 }
 
-.label {
-  display: block;
-
-  margin-bottom: calc(unit / 2);
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
-.disabledLabel {
-  color: var(--ring-disabled-color);
-}
-
 .input::placeholder {
   color: var(--ring-disabled-color);
 }

package/components/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import { ControlsHeight } from '../global/controls-height';
+import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
  * @name Input
@@ -11,12 +12,16 @@ declare enum Size {
     L = "L",
     FULL = "FULL"
 }
+export interface InputTranslations {
+    clear: string;
+}
 export interface InputBaseProps {
     size: Size;
     enableShortcuts: boolean | string[];
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
+    labelType?: LabelType;
     active?: boolean | null | undefined;
     error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;
@@ -25,6 +30,7 @@ export interface InputBaseProps {
     icon?: string | ComponentType | null | undefined;
     height?: ControlsHeight | undefined;
     afterInput?: ReactNode;
+    translations?: InputTranslations | null | undefined;
 }
 type Override<D, S> = Omit<D, keyof S> & S;
 export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
@@ -61,7 +67,7 @@ export declare class Input extends PureComponent<InputProps> {
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
 export type InputSpecificAttrs = ContainerProps<InputSpecificProps>;

package/components/input/input.js

@@ -6,10 +6,11 @@ import { refObject } from '../global/prop-types';
 import Button from '../button/button';
 import getUID from '../global/get-uid';
 import Icon from '../icon/icon';
+import { I18nContext } from '../i18n/i18n-context';
 import composeRefs from '../global/composeRefs';
 import { ControlsHeightContext } from '../global/controls-height';
+import { ControlLabel } from '../control-label/control-label';
 import styles from './input.css';
-import { InputLabel } from './input-label';
 function noop() { }
 /**
  * @name Input
@@ -92,7 +93,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, active, multiline, borderless, 
         // Props
-        label, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, height = this.context, afterInput, ...restProps } = this.props;
+        label, labelType, error, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -117,18 +118,20 @@ export class Input extends PureComponent {
             'aria-label': typeof label === 'string' && label ? label : placeholder,
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
         };
-        return (<div className={classes} data-test="ring-input">
-        {label && (<InputLabel htmlFor={this.getId()} disabled={disabled} label={label}/>)}
-        <div className={styles.container}>
-          {icon && <Icon glyph={icon} className={styles.icon}/>}
-          {multiline
-                ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
-                : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-          {clearable && !disabled && (<Button title="Clear input" data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
-          {afterInput}
-        </div>
-        {error && <div className={styles.errorText}>{error}</div>}
-      </div>);
+        return (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classes} data-test="ring-input">
+            {label && (<ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+            <div className={styles.container}>
+              {icon && <Icon glyph={icon} className={styles.icon}/>}
+              {multiline
+                    ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>)
+                    : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test="ring-input-clear" className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {afterInput}
+            </div>
+            {error && <div className={styles.errorText}>{error}</div>}
+          </div>)}
+      </I18nContext.Consumer>);
     }
 }
 Input.propTypes = {
@@ -155,6 +158,7 @@ Input.propTypes = {
     disabled: PropTypes.bool,
     id: PropTypes.string,
     placeholder: PropTypes.string,
+    translations: PropTypes.object,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
 };
 export default Input;

package/components/input-ng/input-ng.js

@@ -8,6 +8,7 @@ import closeIcon from '@jetbrains/icons/close';
 
 import RingAngularComponent from '../global/ring-angular-component';
 import styles from '../input/input.css';
+import labelStyles from '../control-label/control-label.css';
 import ButtonNg from '../button-ng/button-ng';
 
 import styleOverrides from './input-ng.css';
@@ -15,7 +16,6 @@ import styleOverrides from './input-ng.css';
 const angularModule = angular.module('Ring.input', [ButtonNg]);
 
 class RingInputComponent extends RingAngularComponent {
-  static $inject = ['$element'];
 
   static require = {
     ngModelCtrl: '?ngModel'
@@ -103,7 +103,7 @@ class RingInputComponent extends RingAngularComponent {
 >
   <label
     ng-if="!$ctrl.borderless"
-    class="${styles.label}"
+    class="${labelStyles.label} ${labelStyles.secondaryLabel}"
   >{{$ctrl.label}}</label>
   <div class="${styles.container}">
     <input
@@ -153,6 +153,7 @@ class RingInputComponent extends RingAngularComponent {
 </div>
   `;
 }
+RingInputComponent.$inject = ['$element'];
 
 angularModule.component('rgInput', RingInputComponent);
 

package/components/input-ng/{input-ng.examples.js → input-ng.stories.js}

@@ -2,6 +2,8 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
+import darkStyles from '../global/variables_dark.css';
+
 import InputNG from './input-ng';
 
 export default {
@@ -89,7 +91,7 @@ export const basic = () => {
           multiline="true"
         ></rg-input>
 
-        <div class="dark">
+        <div class="dark ${darkStyles.dark}">
           <rg-input
             label="Input on dark background"
             placeholder="Hint on dark background"

package/components/input-size/{input-size.examples.js → input-size.stories.js}

@@ -5,6 +5,7 @@ import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import '../input/input-legacy.css';
 import '../form/form.css';
 import './input-size.css';
+import '../error-bubble/error-bubble-legacy.css';
 
 import SelectNG from '../select-ng/select-ng';
 import QueryAssistNG from '../query-assist-ng/query-assist-ng';

package/components/island/adaptive-island-hoc.d.ts

@@ -8,7 +8,7 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -34,7 +34,7 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/island/content.d.ts

@@ -37,7 +37,7 @@ declare class Content extends Component<IslandContentInnerProps> {
     calculateScrollPosition: () => void;
     scrollableNode?: HTMLElement | null;
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
 export default ContentWrapper;

package/components/island/header.d.ts

@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
     wrapWithTitle?: boolean | undefined;
     border?: boolean | null | undefined;
     phase?: number | undefined;
 }
-declare const HeaderWrapper: (props: IslandHeaderProps) => JSX.Element;
+declare const HeaderWrapper: (props: IslandHeaderProps) => React.JSX.Element;
 export default HeaderWrapper;

package/components/island/island.css

@@ -75,7 +75,7 @@
   width: 100%;
   padding: calc(unit * 2) calc(unit * 4);
 
-  &:focus:not(:global(.focus-visible)) {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }

package/components/island/island.d.ts

@@ -16,7 +16,7 @@ export default class Island extends Component<IslandProps> {
         withoutPaddings: PropTypes.Requireable<boolean>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const AdaptiveIsland: {
     new (props: IslandProps | Readonly<IslandProps>): {
@@ -24,7 +24,7 @@ export declare const AdaptiveIsland: {
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -50,7 +50,7 @@ export declare const AdaptiveIsland: {
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/island-legacy/content-legacy.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './island-legacy.css';
 export default class Content extends PureComponent<HTMLAttributes<HTMLElement>> {
@@ -6,5 +6,5 @@ export default class Content extends PureComponent<HTMLAttributes<HTMLElement>>
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/island-legacy/header-legacy.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './island-legacy.css';
 export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
@@ -6,5 +6,5 @@ export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/island-legacy/island-legacy.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PureComponent } from 'react';
+import React, { HTMLAttributes, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './island-legacy.css';
 export default class Island extends PureComponent<HTMLAttributes<HTMLElement>> {
@@ -6,7 +6,7 @@ export default class Island extends PureComponent<HTMLAttributes<HTMLElement>> {
         className: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Header } from './header-legacy';
 export { default as Content } from './content-legacy';

package/components/island-ng/island-ng.js

@@ -20,10 +20,10 @@ angularModule.directive('rgIsland', function islandDirective() {
     },
     compile,
     template: `
-<div 
+<div
   data-test="ring-island"
-  class="${styles.island}" 
-  ng-class="{'${styles.narrowIsland}': islandCtrl.narrow}" 
+  class="${styles.island}"
+  ng-class="{'${styles.narrowIsland}': islandCtrl.narrow}"
   ng-transclude
 ></div>
 `,