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

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/header/smart-services.d.ts

@@ -2,6 +2,7 @@ import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Auth from '../auth/auth';
 import HTTP from '../http/http';
+import { Service } from './services-link';
 export interface SmartServicesProps extends HTMLAttributes<HTMLElement> {
     auth: Auth;
 }
@@ -20,6 +21,6 @@ export default class SmartServices extends Component<SmartServicesProps> {
     http?: HTTP;
     stopLoading: () => void;
     getServicesContent: () => void;
-    getServices(fields: string): Promise<any> | undefined;
+    getServices(fields: string): Promise<Service[]> | undefined;
     render(): React.JSX.Element | null;
 }

package/components/heading/heading.css

@@ -1,30 +1,42 @@
 @import "../global/variables.css";
 
-.heading {
-  composes: font from "../global/global.css";
-
-  margin-top: var(--ring-line-height);
+.contentWithHeadings {
+  & h1,
+  &:is(h1),
+  & h2,
+  &:is(h2),
+  & h3,
+  &:is(h3),
+  & h4,
+  &:is(h4) {
+    margin-top: var(--ring-line-height);
 
-  &:first-child {
-    margin-top: 0;
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
+
+  & :is(h1, h2),
   &:is(h1, h2) {
     margin-bottom: 8px;
 
     color: var(--ring-heading-color);
   }
 
+  & h1,
   &:is(h1) {
     font-size: 24px;
     line-height: 28px;
   }
 
+  & h2,
   &:is(h2) {
     font-size: 20px;
     line-height: 24px;
   }
 
+  & h3,
   &:is(h3) {
     margin-bottom: 0;
 
@@ -32,6 +44,7 @@
     line-height: 22px;
   }
 
+  & h4,
   &:is(h4) {
     margin-bottom: 1px;
 
@@ -44,6 +57,11 @@
   }
 }
 
+.heading {
+  composes: font from "../global/global.css";
+  composes: contentWithHeadings;
+}
+
 .caps {
   letter-spacing: 2px;
   text-transform: uppercase;

package/components/http/http.d.ts

@@ -41,14 +41,14 @@ export default class HTTP implements Partial<HTTPAuth> {
     private _storeRequestMeta;
     private _processResponse;
     private static _isErrorStatus;
-    fetch: <T = any>(url: string, params?: FetchParams) => Promise<T>;
+    fetch: <T = unknown>(url: string, params?: FetchParams) => Promise<T>;
     authorizedFetch(...args: Parameters<HTTP['_performRequest']>): Promise<any>;
-    request: <T = any>(url: string, params?: RequestParams) => Promise<T>;
+    request: <T = unknown>(url: string, params?: RequestParams) => Promise<T>;
     getMetaForResponse: (response: object) => Partial<Response> | undefined;
-    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>;
+    get: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    post: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    delete: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
+    put: <T = unknown>(url: string, params?: RequestParamsWithoutMethod) => Promise<T>;
     /**
      * Usage: const {promise, abort} = http.abortify(http.get<{id: string}>)('http://test.com');
      * @param method

package/components/http/http.js

@@ -123,8 +123,6 @@ 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), {
@@ -138,8 +136,6 @@ 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);
@@ -163,26 +159,18 @@ 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'

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

@@ -26,17 +26,19 @@ export default class HubSource<I extends Item, U extends string> {
     isClientSideSearch: boolean | null;
     filterFn: (item: I) => boolean;
     constructor(auth: Auth, relativeUrl: U, options?: Partial<HubSourceOptions>);
-    makeRequest(queryParams?: Record<string, unknown>): Promise<any>;
-    makeCachedRequest(params?: Record<string, unknown>): Promise<any>;
+    makeRequest<T = unknown>(queryParams?: Record<string, unknown>): Promise<T>;
+    makeCachedRequest(params?: Record<string, unknown>): Promise<Response<I, U>>;
     static mergeParams(params?: Record<string, unknown>, toMerge?: Record<string, unknown>): Record<string, unknown>;
     checkIsClientSideSearch(res: Response<I, U>): boolean;
     getDefaultFilterFn(query?: string): (it: I) => boolean;
     formatQuery(query?: string): string;
     static validateInputParams(params: Record<string, unknown>): void;
     processResults(res: Response<I, U>): I[];
-    sideDetectionRequest(params?: Record<string, unknown>, query?: string): Promise<any>;
-    doClientSideSearch(params?: Record<string, unknown>): Promise<any>;
-    doServerSideSearch(params?: Record<string, unknown>, query?: string): Promise<any>;
-    getValueFromSuitableSource(query?: string, params?: Record<string, unknown>): Promise<any>;
+    sideDetectionRequest(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    doClientSideSearch(params?: Record<string, unknown>): Promise<Response<I, U>>;
+    doServerSideSearch(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    getValueFromSuitableSource(query?: string, params?: Record<string, unknown>): Promise<Partial<Record<U, I[]>> & {
+        total: number;
+    }>;
     get(query: string, params: Record<string, unknown>, filterFn?: (item: I) => boolean): Promise<I[]>;
 }

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

@@ -2,62 +2,63 @@ import '../input/input-legacy.css';
 import '../form/form.css';
 import './input-size.css';
 import '../error-bubble/error-bubble-legacy.css';
+import React from 'react';
 
 export default {
   title: 'Style-only/Input Sizes'
 };
 
-export const basic = () => `
-      <div>
-        <h3 class="example-block">Inputs</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <input id="extra-short-input" type="number" class="ring-input ring-input-size_xs">
-            <label for="extra-short-input" class="ring-error-bubble active">Extra-short Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="short-input" type="number" class="ring-input ring-input-size_s">
-            <label for="short-input" class="ring-error-bubble active">Short Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="medium-input" type="number" class="ring-input ring-input-size_m">
-            <label for="medium-input" class="ring-error-bubble active">Medium Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="long-input" type="number" class="ring-input ring-input-size_l">
-            <label for="long-input" class="ring-error-bubble active">Long Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="full-width-input" type="number" class="ring-input">
-            <label for="full-width-input" class="ring-error-bubble active">Full-width Input</label>
-          </div>
-        </div>
+export const basic = () => (
+  <div>
+    <h3 className="example-block">Inputs</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-input" className="ring-error-bubble active">Extra-short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="short-input" type="number" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-input" className="ring-error-bubble active">Short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="medium-input" type="number" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-input" className="ring-error-bubble active">Medium Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="long-input" type="number" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-input" className="ring-error-bubble active">Long Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="full-width-input" type="number" className="ring-input"/>
+        <label htmlFor="full-width-input" className="ring-error-bubble active">Full-width Input</label>
+      </div>
+    </div>
 
-        <h3 class="example-block">Textareas</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="extra-short-textarea" class="ring-input ring-input-size_xs"></textarea>
-            <label for="extra-short-textarea" class="ring-error-bubble active">Extra-short Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="short-textarea" class="ring-input ring-input-size_s"></textarea>
-            <label for="short-textarea" class="ring-error-bubble active">Short Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="medium-textarea" class="ring-input ring-input-size_m"></textarea>
-            <label for="medium-textarea" class="ring-error-bubble active">Medium Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="long-textarea" class="ring-input ring-input-size_l"></textarea>
-            <label for="long-textarea" class="ring-error-bubble active">Long Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="full-width-textarea" class="ring-input"></textarea>
-            <label for="full-width-textarea" class="ring-error-bubble active">Full-width Textarea</label>
-          </div>
-        </div>
+    <h3 className="example-block">Textareas</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">Extra-short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="short-textarea" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-textarea" className="ring-error-bubble active">Short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="medium-textarea" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-textarea" className="ring-error-bubble active">Medium Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="long-textarea" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-textarea" className="ring-error-bubble active">Long Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="full-width-textarea" className="ring-input"/>
+        <label htmlFor="full-width-textarea" className="ring-error-bubble active">Full-width Textarea</label>
       </div>
-    `;
+    </div>
+  </div>
+);
 
 basic.storyName = 'Input Sizes';
 

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