@jetbrains/ring-ui 5.0.17 → 5.0.20

package/components/auth/auth__core.js

@@ -301,6 +301,12 @@ export default class Auth {
         throw error;
     }
     async handleInitValidationError(error) {
+        if ('cause' in error && error.cause?.message === 'invalid_client') {
+            // eslint-disable-next-line no-console
+            console.error('RingUI Auth: invalid client detected. Logging out', error);
+            await this.logout();
+            return undefined;
+        }
         // Redirect flow
         if ('authRedirect' in error && error.authRedirect && this.config.redirect) {
             return this.sendRedirect(error);

package/components/auth/token-validator.js

@@ -137,7 +137,7 @@ export default class TokenValidator {
             if (errorResponse.status === CODE.UNAUTHORIZED ||
                 TokenValidator.shouldRefreshToken(response.error)) {
                 // Token expired
-                throw new TokenValidator.TokenValidationError(response.error || errorResponse.message);
+                throw new TokenValidator.TokenValidationError(response.error || errorResponse.message, errorResponse.data?.error ? new Error(errorResponse.data?.error) : undefined);
             }
             // Request unexpectedly failed
             throw errorResponse;

package/components/button-ng/button-ng.js

@@ -108,7 +108,7 @@ class ButtonController extends RingAngularComponent {
     this.element.className = classNames(
       foreignClasses,
       getButtonClasses({
-        height: ControlsHeight.S,
+        height: $attrs.height || ControlsHeight.S,
         className: styles.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),

package/components/list/list.css

@@ -61,11 +61,12 @@
   outline: none;
 
   font-size: var(--ring-font-size);
-  line-height: calc(unit * 3);
 }
 
 .item.item {
   padding: 3px calc(unit * 2) 5px;
+
+  line-height: calc(unit * 3);
 }
 
 .itemContainer {

package/components/pager/pager.d.ts

@@ -56,7 +56,7 @@ export default class Pager extends PureComponent<PagerProps> {
         selected: SelectItem<PagerSizeItem> | undefined;
         data: SelectItem<PagerSizeItem>[];
     };
-    getTotal(): number;
+    getTotalPages(): number;
     handlePageSizeChange: (item: PagerSizeItem | null) => void;
     handlePrevClick: () => void;
     handleNextClick: () => void;
@@ -76,7 +76,7 @@ export default class Pager extends PureComponent<PagerProps> {
     getPageSizeSelector(): false | JSX.Element;
     getPagerLinks(): JSX.Element;
     generateHref(page: number): string | undefined;
-    getPagerContent(): JSX.Element | null;
+    getPagerContent(): JSX.Element;
     render(): JSX.Element;
 }
 export declare type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;

package/components/pager/pager.js

@@ -45,7 +45,7 @@ export default class Pager extends PureComponent {
         const selected = data.find(it => it.key === pageSize);
         return { selected, data };
     }
-    getTotal() {
+    getTotalPages() {
         const { total, pageSize } = this.props;
         return Math.ceil(total / pageSize);
     }
@@ -64,7 +64,7 @@ export default class Pager extends PureComponent {
     handleNextClick = () => {
         const { currentPage, onLoadPage } = this.props;
         const nextPage = currentPage + 1;
-        const total = this.getTotal();
+        const total = this.getTotalPages();
         if (currentPage !== total) {
             this.props.onPageChange?.(nextPage);
         }
@@ -104,7 +104,8 @@ export default class Pager extends PureComponent {
     }
     getPagerLinks() {
         const prevLinkAvailable = this.props.currentPage !== 1;
-        const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotal();
+        const nextLinkAvailable = this.props.openTotal ||
+            this.props.currentPage !== this.getTotalPages();
         const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
         const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
         const prevText = this.props.translations.previousPage;
@@ -146,9 +147,9 @@ export default class Pager extends PureComponent {
     }
     getPagerContent() {
         const { currentPage, visiblePagesLimit } = this.props;
-        const totalPages = this.getTotal();
-        if (totalPages < 2 && !this.props.openTotal) {
-            return null;
+        const totalPages = this.getTotalPages();
+        if (totalPages < this.props.currentPage) {
+            this.props.onPageChange?.(totalPages);
         }
         let start = 1;
         let end = totalPages;
@@ -204,7 +205,7 @@ export default class Pager extends PureComponent {
     render() {
         const classes = classNames(style.pager, this.props.className);
         return (<div data-test="ring-pager" className={classes}>
-        {this.props.total > 1
+        {this.getTotalPages() > 1 || this.props.openTotal
                 ? this.getPagerContent()
                 : this.getPageSizeSelector()}
       </div>);

package/components/query-assist/query-assist.css

@@ -1,273 +1,164 @@
 @import "../global/variables.css";
+@import "../button/button.css";
 
-@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value overInputZIndex: 2;
 @value inputGap: calc(unit * 3);
 
 .queryAssist {
-  height: calc(unit * 3);
+  --ring-input-icon-offset: calc(unit * 2.5);
+  --ring-input-padding-inline: unit;
+  --ring-input-padding-block: 3px;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
-  background: var(--ring-content-background-color);
-}
-
-.input {
-  height: calc(unit * 3 - 2px);
-
-  box-shadow: 0 0 0 1px var(--ring-borders-color);
-
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:not([disabled]):active,
-  &:not([disabled]):focus {
-    border-color: transparent;
-    box-shadow: 0 0 0 1px var(--ring-main-color);
-  }
-}
-
-.placeholder {
-  color: var(--ring-secondary-color);
-}
-
-.letter-text {
-  color: var(--ring-warning-color);
-}
-
-.letterDefault,
-.letter-field-name {
-  color: var(--ring-text-color);
-}
-
-.letter-field-value {
-  color: var(--ring-link-color);
-}
+  position: relative;
 
-.letter-operator {
-  color: var(--ring-secondary-color);
-}
+  display: flex;
 
-.letter-error {
-  padding-bottom: 1px;
+  box-sizing: border-box;
 
-  border-bottom: 1px solid var(--ring-icon-error-color);
-}
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-.iconInner {
-  color: var(--ring-icon-secondary-color);
-}
-
-.highlight {
-  font-weight: 600;
-}
-
-.service {
-  color: var(--ring-secondary-color);
+  & * {
+    box-sizing: border-box;
+  }
 }
 
-.dark {
-  & .queryAssist {
-    height: calc(unit * 4);
+.huge {
+  --ring-input-padding-block: 5px;
 
-    font-size: 16px;
-  }
+  width: 100%;
 
   & .input {
-    top: 0;
-
-    height: calc(unit * 4 - 2px);
-
-    color: var(--ring-search-color);
-
-    border-top-width: 5px;
-    background: var(--ring-selected-background-color);
-
-    &:active,
-    &:focus {
-      border-color: var(--ring-navigation-background-color);
-
-      background-color: var(--ring-navigation-background-color);
-    }
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  & .placeholder {
-    top: 6px;
+  & .actions {
+    right: calc(var(--ring-input-padding-inline) + 34px);
+  }
+}
 
-    color: var(--ring-icon-color);
+.input {
+  width: 100%;
 
-    @nest & :-ms-input-placeholder,
-    :root & {
-      top: 7px;
-    }
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
 
-    @supports (-ms-ime-align:auto) {
-      & {
-        top: 7px;
-      }
-    }
-  }
+  transition: border-color var(--ring-ease);
 
-  & .letter-text {
-    color: var(--ring-warning-color);
-  }
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
 
-  & .letterDefault,
-  & .letter-field-name {
-    color: var(--ring-search-color);
-  }
+  font: inherit;
 
-  & .letter-field-value {
-    color: var(--ring-active-text-color);
-  }
+  caret-color: var(--ring-main-color);
 
-  & .letter-operator {
-    color: var(--ring-secondary-color);
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
   }
 
-  & .letter-error {
-    padding-bottom: 1px;
-
-    border-bottom: 1px solid var(--ring-icon-error-color);
-  }
+  &:hover {
+    transition: none;
 
-  & .icon {
-    top: 7px;
+    border-color: var(--ring-border-hover-color);
   }
 
-  & .iconInner {
-    color: var(--ring-icon-color);
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
   }
 
-  & .loader {
-    top: 6px;
-  }
+  &:focus {
+    transition: none;
 
-  & .highlight {
-    font-weight: 600;
+    border-color: var(--ring-main-color);
   }
 
-  & .service {
-    color: var(--ring-secondary-color);
-  }
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
 
-  & .actions {
-    background-color: var(--ring-selected-background-color);
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  & .input:focus ~ .actions {
-    background-color: var(--ring-navigation-background-color);
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
   }
 }
 
-.queryAssist {
-  composes: font from "../global/global.css";
-
-  position: relative;
-
-  box-sizing: border-box;
-
-  line-height: normal;
+.withIcon {
+  --ring-input-padding-start: calc(var(--ring-input-padding-inline) + var(--ring-input-icon-offset));
 }
 
-.input {
-  position: relative;
-
-  top: 1px;
-  left: 1px;
-
-  overflow: auto;
-
-  box-sizing: border-box;
-
-  width: calc(100% - 2px);
-  margin: 0;
-
-  padding: 2px calc(unit / 2) 3px;
-
-  white-space: nowrap;
-
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
-  background: transparent;
-
-  line-height: 16px;
-
-  scrollbar-width: none;
-
-  &:active,
-  &:focus {
-    outline: 0;
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    line-height: 17px;
-  }
+.letter-text {
+  color: var(--ring-warning-color);
+}
 
-  @supports (-ms-ime-align:auto) {
-    & {
-      line-height: 17px;
-    }
-  }
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
 
-  & .iconInner {
-    color: var(--ring-icon-color);
-  }
+.letter-field-value {
+  color: var(--ring-link-color);
+}
 
-  &.inputGap {
-    border-right-width: inputGap;
-  }
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
 
-  &.inputGap2 {
-    border-right-width: calc(2 * inputGap);
-  }
+.letter-error {
+  padding-bottom: 1px;
 
-  &.inputLeftGap {
-    border-left-width: inputGap;
-  }
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
 
-  &.inputDisabled {
-    border-color: var(--ring-line-color);
-    box-shadow: 0 0 0 1px var(--ring-line-color);
-  }
+.highlight {
+  font-weight: 600;
+}
 
-  &.inputDisabled span > span {
-    color: var(--ring-disabled-color);
-  }
+.service {
+  color: var(--ring-secondary-color);
 }
 
 .placeholder {
   composes: resetButton from "../global/global.css";
 
   position: absolute;
-  top: 3px;
-
-  left: 5px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: 1px;
 
   display: block;
 
   overflow: hidden;
 
   width: calc(100% - unit * 4);
+  padding-left: var(--ring-input-padding-start);
 
   text-overflow: ellipsis;
 
   pointer-events: none;
 
-  &.placeholderSpaced {
-    left: calc(unit * 3 + 5px);
-  }
-
-  @nest & :-ms-input-placeholder,
-  :root & {
-    top: 4px;
-  }
-
-  @supports (-ms-ime-align:auto) {
-    & {
-      top: 4px;
-    }
-  }
+  color: var(--ring-disabled-color);
 }
 
 .letter {
@@ -276,41 +167,63 @@
 
 .actions {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 4px;
-  right: 1px;
+  top: calc(var(--ring-input-padding-block) - 2px);
+  right: var(--ring-input-padding-inline);
 
-  background-color: var(--ring-content-background-color);
+  height: auto;
+
+  line-height: inherit;
+
+  @nest [dir=rtl] & {
+    right: auto;
+    left: unit;
+  }
 }
 
 .icon {
   position: absolute;
-  z-index: overInputZIndex;
-  top: 3px;
+  top: calc(var(--ring-input-padding-block) + 1px);
+  left: var(--ring-input-padding-inline);
 
-  box-sizing: border-box;
+  color: var(--ring-icon-secondary-color);
 
-  width: calc(unit * 3);
-  height: calc(unit * 2);
+  @nest [dir=rtl] & {
+    right: unit;
+    left: auto;
+  }
+}
 
-  padding: 0 4px;
+.rightSearchButton {
+  padding: 5px 9px;
 
   cursor: pointer;
-  user-select: none;
 
-  line-height: normal;
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 
-  & svg {
-    vertical-align: baseline;
+  @nest .queryAssist.queryAssist:focus-within & {
+    transition: none;
+
+    border-color: var(--ring-main-color);
   }
 
-  @nest .actions & {
-    position: relative;
-    top: 0;
-    left: -1px;
+  @nest .queryAssist:hover & {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
   }
 }
 
+.clear {
+  padding-right: 0;
+}
+
 .loaderOnTheRight {
   right: 1px;
 

package/components/query-assist/query-assist.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
+import Icon from '../icon/icon';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -57,6 +58,7 @@ export interface QueryAssistProps {
     useCustomItemRender?: boolean | null | undefined;
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
+    huge?: boolean | null | undefined;
 }
 export interface StyleRange {
     style: string;
@@ -207,6 +209,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         translations: PropTypes.Requireable<object>;
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
+        huge: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -280,8 +283,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
     placeholder?: HTMLElement | null;
     placeholderRef: (node: HTMLElement | null) => void;
-    glass?: ComponentRef<typeof Button> | null;
-    glassRef: (node: ComponentRef<typeof Button> | null) => void;
+    glass?: ComponentRef<typeof Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | null) => void;
     loader?: HTMLElement | null;
     loaderRef: (node: HTMLElement | null) => void;
     clear?: ComponentRef<typeof Button> | null;