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

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-size/input-size.examples.js

@@ -1,159 +1,14 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
 import '../input/input-legacy.css';
 import '../form/form.css';
 import './input-size.css';
-
-import SelectNG from '../select-ng/select-ng';
-import QueryAssistNG from '../query-assist-ng/query-assist-ng';
+import '../error-bubble/error-bubble-legacy.css';
 
 export default {
-  title: 'Style-only/Input Sizes',
-  decorators: [angularDecorator()]
+  title: 'Style-only/Input Sizes'
 };
 
-export const basic = () => {
-  angular.module(APP_NAME, [QueryAssistNG, SelectNG]).controller('ExampleCtrl', function ctrl() {
-    this.dataSource = () => [];
-
-    this.options = ['one', 'two', 'three'];
-    this.selected = null;
-  });
-
-  return `
-      <div ng-controller="ExampleCtrl as exampleCtrl">
-        <h3 class="example-block">Query Assists</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'S'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Extra-short'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Extra-short Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'S'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Short'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Short Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'M'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Medium'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Medium Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'L'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Long'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Long Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'FULL'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Full-width'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Full-width Query Assist</div>
-          </div>
-        </div>
-
-        <h3 class="example-block">Rg Selects: Buttons</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_xs"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Extra-short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_s"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_m"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Medium Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_l"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Long Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Full-width Select</div>
-          </div>
-        </div>
-
-        <h3 class="example-block">Rg Selects: Inputs</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_xs"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Extra-short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_s"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_m"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Medium Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_l"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Long Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select ng-model="exampleCtrl.selected"
-              type="input"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Full-width Select</div>
-          </div>
-        </div>
-
+export const basic = () => `
+      <div>
         <h3 class="example-block">Inputs</h3>
         <div class="example-block">
           <div class="ring-error-bubble-wrapper">
@@ -203,7 +58,6 @@ export const basic = () => {
         </div>
       </div>
     `;
-};
 
 basic.storyName = 'Input Sizes';
 

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/link/clickableLink.d.ts

@@ -16,5 +16,5 @@ export default class ClickableLink extends PureComponent<ClickableLinkProps> {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     };
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/link/link.css

@@ -49,7 +49,7 @@
 
   outline: none;
 
-  &:global(.focus-visible) {
+  &:focus-visible {
     box-shadow: 0 0 0 2px var(--ring-border-hover-color);
   }
 }

package/components/link/link.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible';
 import React, { ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ClickableLinkProps } from './clickableLink';
@@ -20,8 +19,8 @@ export interface LinkBaseProps {
 export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -44,8 +43,8 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -84,8 +83,8 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -108,8 +107,8 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
-        render(): JSX.Element;
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/components/link/link.js

@@ -1,4 +1,3 @@
-import 'focus-visible';
 import React, { PureComponent, memo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/components/list/consts.js

@@ -11,16 +11,19 @@ export var Type;
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";
 })(Type || (Type = {}));
+// TODO refactor to plain object in 6.0
 export var Dimension;
 (function (Dimension) {
     Dimension[Dimension["ITEM_PADDING"] = 16] = "ITEM_PADDING";
     Dimension[Dimension["ITEM_HEIGHT"] = 32] = "ITEM_HEIGHT";
     Dimension[Dimension["COMPACT_ITEM_HEIGHT"] = 24] = "COMPACT_ITEM_HEIGHT";
     Dimension[Dimension["SEPARATOR_HEIGHT"] = 25] = "SEPARATOR_HEIGHT";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
     Dimension[Dimension["SEPARATOR_FIRST_HEIGHT"] = 16] = "SEPARATOR_FIRST_HEIGHT";
     Dimension[Dimension["SEPARATOR_TEXT_HEIGHT"] = 18] = "SEPARATOR_TEXT_HEIGHT";
     Dimension[Dimension["TITLE_HEIGHT"] = 42] = "TITLE_HEIGHT";
     Dimension[Dimension["INNER_PADDING"] = 8] = "INNER_PADDING";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
     Dimension[Dimension["MARGIN"] = 8] = "MARGIN";
 })(Dimension || (Dimension = {}));
 export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -115,7 +115,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     text-align: right;
     direction: ltr;
   }
@@ -263,7 +263,7 @@
 
   text-align: left;
 
-  @nest [dir=rtl] & {
+  [dir="rtl"] & {
     text-align: right;
     direction: ltr;
   }