@jetbrains/ring-ui 6.0.4-beta.0 → 6.0.4

package/components/grid/row.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import styles from './grid.css';
 const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
 const modifierKeys = [
-    'start', 'center', 'end',
-    'around', 'between',
-    'top', 'middle', 'baseline', 'bottom',
+    'start', 'center', 'end', // text-align, justify-content
+    'around', 'between', // justify-content
+    'top', 'middle', 'baseline', 'bottom', // align-items
     'first', 'last' // order
 ];
 /**

package/components/group/group.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .group {
   & > *:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/header/header.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 @value link, active from "../link/link.css";
-@value height: calc(unit * 8);
 @value compensate: 3px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(var(--ring-unit) * 8) - compensate);
 
 :root {
   --ring-header-link-color: var(--ring-link-color);
@@ -22,7 +20,7 @@
   align-items: center;
 
   box-sizing: border-box;
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-text-color);
 
@@ -34,8 +32,8 @@
     display: inline-block;
 
     box-sizing: border-box;
-    height: height;
-    padding: 0 calc(unit * 1.5) compensate;
+    height: calc(var(--ring-unit) * 8);
+    padding: 0 calc(var(--ring-unit) * 1.5) compensate;
   }
 
   /* override link */
@@ -50,11 +48,11 @@
 
 .headerSpaced {
   & > *:first-child {
-    padding-left: calc(unit * 4);
+    padding-left: calc(var(--ring-unit) * 4);
   }
 
   & > *:last-child {
-    padding-right: calc(unit * 4);
+    padding-right: calc(var(--ring-unit) * 4);
   }
 }
 
@@ -62,7 +60,7 @@
   display: inline-flex;
   align-items: center;
 
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-navigation-background-color);
 
@@ -90,7 +88,7 @@
 }
 
 .icon {
-  width: calc(unit * 5);
+  width: calc(var(--ring-unit) * 5);
 
   text-align: center;
 
@@ -101,7 +99,7 @@
 .icon.icon {
   height: compensated;
 
-  padding-top: calc(unit / 2);
+  padding-top: calc(var(--ring-unit) / 2);
 
   line-height: compensated;
 }
@@ -125,7 +123,7 @@
 
   width: auto;
   height: compensated;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   vertical-align: bottom;
 }
@@ -159,8 +157,8 @@
 
     display: block;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 

package/components/header/profile.js

@@ -93,7 +93,7 @@ export default class Profile extends PureComponent {
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
-                target: '_self',
+                target: '_self', // Full page reload in Angular
                 href: profileUrl,
                 LinkComponent
             },

package/components/header/services.css

@@ -1,10 +1,8 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .services {
-  max-width: calc(calc(unit * 50) + 2px);
-  padding: calc(unit * 4) calc(unit * 4) calc(unit * 3);
+  max-width: calc(calc(var(--ring-unit) * 50) + 2px);
+  padding: calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 3);
 
   background-color: var(--ring-navigation-background-color);
 
@@ -20,8 +18,8 @@
   overflow-x: hidden;
 
   box-sizing: border-box;
-  width: calc(unit * 14);
-  height: calc(unit * 14);
+  width: calc(var(--ring-unit) * 14);
+  height: calc(var(--ring-unit) * 14);
 
   text-align: center;
   text-overflow: ellipsis;
@@ -31,7 +29,7 @@
   line-height: initial;
 
   &::after {
-    height: calc(unit * 14);
+    height: calc(var(--ring-unit) * 14);
 
     vertical-align: middle;
   }
@@ -45,9 +43,9 @@
 .itemLogo {
   display: inline-block;
 
-  width: calc(unit * 6);
-  height: calc(unit * 6);
-  margin: calc(unit * 2) 0 calc(unit + 1px);
+  width: calc(var(--ring-unit) * 6);
+  height: calc(var(--ring-unit) * 6);
+  margin: calc(var(--ring-unit) * 2) 0 calc(var(--ring-unit) + 1px);
 
   background-repeat: no-repeat;
   background-size: contain;
@@ -64,7 +62,7 @@
 
 .line {
   height: 1px;
-  margin: calc(unit * 4) 0 calc(unit * 2);
+  margin: calc(var(--ring-unit) * 4) 0 calc(var(--ring-unit) * 2);
 
   background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
 }
@@ -73,11 +71,11 @@
   display: inline-block;
 
   width: 100%;
-  margin-bottom: calc(unit * 2);
+  margin-bottom: calc(var(--ring-unit) * 2);
 
   text-decoration: none;
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 
   &,
   &:visited {
@@ -85,7 +83,7 @@
   }
 
   &:last-child {
-    margin-bottom: calc(unit * -3);
+    margin-bottom: calc(var(--ring-unit) * -3);
   }
 }
 

package/components/icon/icon.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .icon {
   display: inline-block;
 
@@ -36,8 +34,8 @@
   }
 
   &.compatibilityMode {
-    width: calc(unit * 2);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
     margin-right: 0;
     margin-left: 0;
   }

package/components/input/input-legacy.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 /*
 Input
 
@@ -18,7 +16,7 @@ Input
 :global(.ring-input) {
   /* .heightS */
   --ring-input-padding-block: 1px;
-  --ring-input-padding-inline: unit;
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-padding-start: var(--ring-input-padding-inline);
   --ring-input-padding-end: var(--ring-input-padding-inline);
 
@@ -114,7 +112,7 @@ Input
 :global(textarea.ring-input) {
   box-sizing: border-box;
 
-  min-height: calc(8 * unit);
+  min-height: calc(8 * var(--ring-unit));
 
   resize: none;
 }

package/components/input/input.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
-
 .outerContainer {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-background-color: var(--ring-content-background-color);
 }
 
@@ -116,7 +114,7 @@
   color: var(--ring-icon-secondary-color);
 
   [dir="rtl"] & {
-    right: unit;
+    right: var(--ring-unit);
     left: auto;
   }
 }
@@ -138,7 +136,7 @@
 
   [dir="rtl"] & {
     right: auto;
-    left: unit;
+    left: var(--ring-unit);
   }
 }
 
@@ -159,7 +157,7 @@ textarea.input {
 }
 
 .errorText {
-  margin-top: calc(unit / 2);
+  margin-top: calc(var(--ring-unit) / 2);
 
   color: var(--ring-error-color);
 
@@ -168,15 +166,15 @@ textarea.input {
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {

package/components/input-size/input-size.css

@@ -1,12 +1,10 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :root {
-  --ring-input-xs: calc(unit * 12);
-  --ring-input-s: calc(unit * 12);
-  --ring-input-m: calc(unit * 30);
-  --ring-input-l: calc(unit * 50);
+  --ring-input-xs: calc(var(--ring-unit) * 12);
+  --ring-input-s: calc(var(--ring-unit) * 12);
+  --ring-input-m: calc(var(--ring-unit) * 30);
+  --ring-input-l: calc(var(--ring-unit) * 50);
 }
 
 /**

package/components/island/header.js

@@ -45,7 +45,7 @@ class Header extends Component {
         });
         const headerStyle = phase != null
             ? {
-                lineHeight: `${this.style('LINE_HEIGHT')}px`,
+                lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
                 paddingTop: this.style('PADDING_TOP'),
                 paddingBottom: this.style('PADDING_BOTTOM')
             }

package/components/island/island.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value gradientStart: rgba(255, 255, 255, 0);
 @value gradientStop: var(--ring-content-background-color);
 
@@ -24,7 +23,7 @@
 .header {
   box-sizing: border-box;
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4) unit;
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) var(--ring-unit);
 
   transition: border-bottom-color 0.1s;
 
@@ -56,7 +55,7 @@
 }
 
 .narrowIsland .header {
-  padding: 0 calc(unit * 2);
+  padding: 0 calc(var(--ring-unit) * 2);
 }
 
 .content {
@@ -73,7 +72,7 @@
   overflow: auto;
 
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 
   &:focus:not(:focus-visible) {
     outline: none;
@@ -81,7 +80,7 @@
 }
 
 .narrowIsland .scrollableWrapper {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .withoutPaddings .scrollableWrapper {
@@ -96,7 +95,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
 
@@ -120,7 +119,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
   pointer-events: none;

package/components/island-legacy/island-legacy.css

@@ -1,11 +1,9 @@
-@value unit from "../global/global.css";
-
 /**
  * @name Island Legacy
  */
 
 :global(.ring-island) {
-  min-width: calc(unit * 25 - 2px);
+  min-width: calc(var(--ring-unit) * 25 - 2px);
 
   color: var(--ring-text-color);
 
@@ -37,7 +35,7 @@
 }
 
 :global(.ring-island__header) {
-  min-height: calc(unit * 3 - 2px);
+  min-height: calc(var(--ring-unit) * 3 - 2px);
 
   border-bottom: 1px solid var(--ring-line-color);
   border-top-left-radius: var(--ring-border-radius);
@@ -45,14 +43,14 @@
 
   background-color: var(--ring-content-background-color);
 
-  line-height: calc(unit * 3 - 2px);
+  line-height: calc(var(--ring-unit) * 3 - 2px);
 }
 
 :global(.ring-island__header-btn),
 :global(.ring-island__header-button) {
   float: right;
 
-  padding: 0 calc(unit * 2 - 1px);
+  padding: 0 calc(var(--ring-unit) * 2 - 1px);
 
   /* -1 to account for border */
 
@@ -90,11 +88,11 @@
   display: block;
   float: left;
 
-  padding: 0 calc(unit * 4);
+  padding: 0 calc(var(--ring-unit) * 4);
 
   font-weight: bold;
 }
 
 :global(.ring-island__content) {
-  margin: calc(unit * 2) calc(unit * 4);
+  margin: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 }

package/components/line/line.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-line) {
   display: block;
 
@@ -12,5 +10,5 @@
 }
 
 :global(.ring-line_separated) {
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }

package/components/link/link.css

@@ -13,7 +13,7 @@
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 
-  @media (min-resolution: 2dppx) {
+  @media (resolution >= 2dppx) {
     text-decoration-thickness: 0.5px;
   }
 

package/components/link/link.d.ts

@@ -66,7 +66,7 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -127,7 +127,7 @@ declare const _default: {
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/link/link.js

@@ -13,7 +13,7 @@ export function linkHOC(ComposedComponent) {
             inherit: PropTypes.bool,
             pseudo: PropTypes.bool,
             hover: PropTypes.bool,
-            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+            children: PropTypes.node,
             'data-test': PropTypes.string,
             href: PropTypes.string,
             onPlainLeftClick: PropTypes.func,

package/components/list/list.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value listSpacing: unit;
-
 .list {
   position: relative;
 
@@ -24,10 +21,10 @@
 .separator {
   display: block;
 
-  min-height: listSpacing;
+  min-height: var(--ring-unit);
 
-  margin-top: listSpacing;
-  padding: 0 calc(unit * 2) 1px;
+  margin-top: var(--ring-unit);
+  padding: 0 calc(var(--ring-unit) * 2) 1px;
 
   text-align: right;
   white-space: nowrap;
@@ -64,9 +61,9 @@
 }
 
 .item.item {
-  padding: 3px calc(unit * 2) 5px;
+  padding: 3px calc(var(--ring-unit) * 2) 5px;
 
-  line-height: calc(unit * 3);
+  line-height: calc(var(--ring-unit) * 3);
 }
 
 .itemContainer {
@@ -74,7 +71,7 @@
 }
 
 .compact {
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .error {
@@ -90,9 +87,9 @@
 }
 
 .add {
-  padding: unit calc(2 * unit);
+  padding: var(--ring-unit) calc(2 * var(--ring-unit));
 
-  line-height: calc(4 * unit);
+  line-height: calc(4 * var(--ring-unit));
 }
 
 .top {
@@ -125,7 +122,7 @@
   overflow: hidden;
   flex-shrink: 100;
 
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: right;
   white-space: nowrap;
@@ -191,7 +188,7 @@
 
   width: 20px;
   height: 20px;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 
   background-repeat: no-repeat;
   background-position: center;
@@ -212,7 +209,7 @@
 
   width: 20px;
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 
   color: var(--ring-icon-secondary-color);
 }
@@ -234,7 +231,7 @@
   float: right;
 
   margin-right: 0;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 }
 
 .checkboxContainer {
@@ -244,14 +241,14 @@
 
   width: 20px;
   height: 20px;
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .compact .checkboxContainer {
   top: 0;
 
-  width: calc(unit * 2);
-  height: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
 }
 
 .title {
@@ -259,7 +256,7 @@
 
   margin-top: 10px;
   margin-bottom: 6px;
-  padding: listSpacing calc(unit * 2) 0;
+  padding: var(--ring-unit) calc(var(--ring-unit) * 2) 0;
 
   text-align: left;
 
@@ -287,7 +284,7 @@
   bottom: 0;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   pointer-events: none;
 

package/components/list/list.d.ts

@@ -160,7 +160,6 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     unmounted?: boolean;
     container?: HTMLElement | null;
     hoverHandler: (arg: number) => () => void;
-    private _activatableItems;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;

package/components/list/list.js

@@ -1,7 +1,7 @@
 /**
  * @name List
  */
-import React, { cloneElement, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import VirtualizedList from 'react-virtualized/dist/es/List';
@@ -90,9 +90,9 @@ export default class List extends Component {
     };
     static defaultProps = {
         data: [],
-        restoreActiveIndex: false,
-        activateSingleItem: false,
-        activateFirstItem: false,
+        restoreActiveIndex: false, // restore active item using its "key" property
+        activateSingleItem: false, // if there is only one item, activate it
+        activateFirstItem: false, // if there no active items, activate the first one
         onMouseOut: noop,
         onSelect: noop,
         onScrollToBottom: noop,
@@ -196,7 +196,6 @@ export default class List extends Component {
             });
         }
     }));
-    _activatableItems = false;
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items
@@ -492,7 +491,7 @@ export default class List extends Component {
             </div>)}
         </CellMeasurer>)
             : (<div role="row" id={itemId} key={itemKey}>
-          <div role="cell">{cloneElement(el)}</div>
+          <div role="cell">{el}</div>
         </div>);
     };
     addItemDataTestToProp = (props) => {

package/components/loader/loader.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 @keyframes rotation-keyframes {
   100% {
     transform: rotate(360deg);
@@ -11,7 +9,7 @@
 .canvas {
   display: block;
 
-  margin: calc(unit * 2) auto;
+  margin: calc(var(--ring-unit) * 2) auto;
 
   pointer-events: none;
 }