@jetbrains/ring-ui 5.0.30 → 5.0.32

package/components/input-size/input-size.examples.js

@@ -28,7 +28,7 @@ export const basic = () => {
         <div class="example-block">
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_xs"
+              size="'S'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Extra-short'">
@@ -37,7 +37,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_s"
+              size="'S'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Short'">
@@ -46,7 +46,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_m"
+              size="'M'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Medium'">
@@ -55,7 +55,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_l"
+              size="'L'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Long'">
@@ -64,6 +64,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
+              size="'FULL'"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Full-width'">

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

@@ -29,8 +29,6 @@
 .huge {
   --ring-input-padding-block: 5px;
 
-  width: 100%;
-
   & .input {
     border-right: 0;
     border-top-right-radius: 0;

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

@@ -4,6 +4,7 @@ import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
 import Icon from '../icon/icon';
+import { Size } from '../input/input';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -40,7 +41,7 @@ export interface QueryAssistProps {
     onClear: () => void;
     onFocusChange: (change: FocusChange) => void;
     translations: QueryAssistTranslations;
-    autoOpen?: boolean | null | undefined;
+    autoOpen?: boolean | null | undefined | 'force';
     caret?: number | null | undefined;
     clear?: boolean | null | undefined;
     className?: string | null | undefined;
@@ -59,6 +60,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
     huge?: boolean | null | undefined;
+    size: Size;
 }
 export interface StyleRange {
     style: string;
@@ -128,7 +130,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         /**
          * Open suggestions popup during the initial render
          */
-        autoOpen: PropTypes.Requireable<boolean>;
+        autoOpen: PropTypes.Requireable<string | boolean>;
         /**
          * Initial caret position
          */
@@ -210,6 +212,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
         huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -217,6 +220,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onApplySuggestion: typeof noop;
         onClear: typeof noop;
         onFocusChange: typeof noop;
+        size: Size;
         translations: {
             searchTitle: string;
             clearTitle: string;

package/components/query-assist/query-assist.js

@@ -17,6 +17,8 @@ import rerenderHOC from '../global/rerender-hoc';
 import Button from '../button/button';
 import Icon from '../icon/icon';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
+import { Size } from '../input/input';
+import inputStyles from '../input/input.css';
 import QueryAssistSuggestions from './query-assist__suggestions';
 import styles from './query-assist.css';
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING +
@@ -70,7 +72,7 @@ export default class QueryAssist extends Component {
         /**
          * Open suggestions popup during the initial render
          */
-        autoOpen: PropTypes.bool,
+        autoOpen: PropTypes.oneOf([true, false, 'force']),
         /**
          * Initial caret position
          */
@@ -151,7 +153,8 @@ export default class QueryAssist extends Component {
         translations: PropTypes.object,
         actions: PropTypes.array,
         'data-test': PropTypes.string,
-        huge: PropTypes.bool
+        huge: PropTypes.bool,
+        size: PropTypes.string
     };
     static defaultProps = {
         onApply: noop,
@@ -159,6 +162,7 @@ export default class QueryAssist extends Component {
         onApplySuggestion: noop,
         onClear: noop,
         onFocusChange: noop,
+        size: Size.L,
         translations: {
             searchTitle: 'Search',
             clearTitle: 'Clear search input'
@@ -201,7 +205,7 @@ export default class QueryAssist extends Component {
             focus: Boolean(this.props.autoOpen || this.props.focus)
         };
         this.setupRequestHandler(this.props.delay);
-        if (this.props.autoOpen && query.length > 0) {
+        if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
             this.requestHandler().
                 catch(noop);
         }
@@ -238,7 +242,7 @@ export default class QueryAssist extends Component {
         }
         if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
             this.immediateState.query = query;
-            if (query && prevProps.autoOpen && query.length > 0) {
+            if (prevProps.autoOpen && query?.length > 0) {
                 this.requestData?.();
             }
             else if (query) {
@@ -354,7 +358,7 @@ export default class QueryAssist extends Component {
         }
         this.immediateState = props;
         this.props.onChange(props);
-        if (props.query.length > 0) {
+        if (this.props.autoOpen === 'force' || props.query.length > 0) {
             this.requestData?.();
         }
     };
@@ -427,7 +431,7 @@ export default class QueryAssist extends Component {
         if (!this.props.disabled && (caret !== this.immediateState.caret || popupHidden)) {
             this.immediateState.caret = caret;
             this.scrollInput();
-            if (this.immediateState.query.length > 0) {
+            if (this.props.autoOpen === 'force' || this.immediateState.query.length > 0) {
                 this.requestData?.();
             }
         }
@@ -755,12 +759,12 @@ export default class QueryAssist extends Component {
         return actions;
     }
     render() {
-        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge } = this.props;
+        const { glass, 'data-test': dataTest, className, useCustomItemRender, huge, size } = this.props;
         const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
         const renderLoader = this.props.loader !== false && this.state.loading;
         const renderGlass = glass && !renderLoader;
         const actions = this.renderActions();
-        const containerClasses = classNames(className, {
+        const containerClasses = classNames(className, inputStyles[`size${huge ? Size.FULL : size}`], {
             [styles.queryAssist]: true,
             [styles.withIcon]: (renderGlass && !huge) || renderLoader,
             [styles.huge]: huge
@@ -774,8 +778,7 @@ export default class QueryAssist extends Component {
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
-          {this.state.shortcuts &&
-                (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+          {this.state.shortcuts && (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
 
           {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 

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

@@ -4,6 +4,7 @@ import Caret, { Position } from '../caret/caret';
 import PopupMenu from '../popup-menu/popup-menu';
 import Button from '../button/button';
 import Icon from '../icon/icon';
+import { Size } from '../input/input';
 import { ShortcutsMap } from '../shortcuts/core';
 import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
 declare function noop(): void;
@@ -40,7 +41,7 @@ export interface QueryAssistProps {
     onClear: () => void;
     onFocusChange: (change: FocusChange) => void;
     translations: QueryAssistTranslations;
-    autoOpen?: boolean | null | undefined;
+    autoOpen?: boolean | null | undefined | 'force';
     caret?: number | null | undefined;
     clear?: boolean | null | undefined;
     className?: string | null | undefined;
@@ -59,6 +60,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
     huge?: boolean | null | undefined;
+    size: Size;
 }
 export interface StyleRange {
     style: string;
@@ -128,7 +130,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         /**
          * Open suggestions popup during the initial render
          */
-        autoOpen: PropTypes.Requireable<boolean>;
+        autoOpen: PropTypes.Requireable<string | boolean>;
         /**
          * Initial caret position
          */
@@ -210,6 +212,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         actions: PropTypes.Requireable<any[]>;
         'data-test': PropTypes.Requireable<string>;
         huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onApply: typeof noop;
@@ -217,6 +220,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
         onApplySuggestion: typeof noop;
         onClear: typeof noop;
         onFocusChange: typeof noop;
+        size: Size;
         translations: {
             searchTitle: string;
             clearTitle: string;

package/dist/query-assist/query-assist.js

@@ -18,6 +18,8 @@ import rerenderHOC from '../global/rerender-hoc.js';
 import { Button } from '../button/button.js';
 import Icon from '../icon/icon.js';
 import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
+import { Size } from '../input/input.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import { Q as QueryAssistSuggestions, m as modules_da7ab055 } from '../_helpers/query-assist__suggestions.js';
 import 'react-dom/server';
 import '../popup/popup.js';
@@ -68,6 +70,7 @@ import '../global/react-render-adapter.js';
 import '../global/composeRefs.js';
 import '@jetbrains/icons/chevron-10px';
 import '../_helpers/button__classes.js';
+import '../global/prop-types.js';
 
 const POPUP_COMPENSATION = PopupMenu.ListProps.Dimension.ITEM_PADDING + PopupMenu.PopupProps.Dimension.BORDER_WIDTH;
 const ngModelStateField = 'query';
@@ -263,7 +266,7 @@ class QueryAssist extends Component {
       this.immediateState = props;
       this.props.onChange(props);
 
-      if (props.query.length > 0) {
+      if (this.props.autoOpen === 'force' || props.query.length > 0) {
         var _this$requestData;
 
         (_this$requestData = this.requestData) === null || _this$requestData === void 0 ? void 0 : _this$requestData.call(this);
@@ -349,7 +352,7 @@ class QueryAssist extends Component {
         this.immediateState.caret = caret;
         this.scrollInput();
 
-        if (this.immediateState.query.length > 0) {
+        if (this.props.autoOpen === 'force' || this.immediateState.query.length > 0) {
           var _this$requestData2;
 
           (_this$requestData2 = this.requestData) === null || _this$requestData2 === void 0 ? void 0 : _this$requestData2.call(this);
@@ -633,7 +636,7 @@ class QueryAssist extends Component {
     };
     this.setupRequestHandler(this.props.delay);
 
-    if (this.props.autoOpen && query.length > 0) {
+    if (this.props.autoOpen === 'force' || this.props.autoOpen && query.length > 0) {
       this.requestHandler().catch(noop);
     } else {
       this.requestStyleRanges().catch(noop);
@@ -666,7 +669,7 @@ class QueryAssist extends Component {
     if (typeof query === 'string' && queryChanged && query !== this.immediateState.query) {
       this.immediateState.query = query;
 
-      if (query && prevProps.autoOpen && query.length > 0) {
+      if (prevProps.autoOpen && (query === null || query === void 0 ? void 0 : query.length) > 0) {
         var _this$requestData5;
 
         (_this$requestData5 = this.requestData) === null || _this$requestData5 === void 0 ? void 0 : _this$requestData5.call(this);
@@ -928,13 +931,14 @@ class QueryAssist extends Component {
       'data-test': dataTest,
       className,
       useCustomItemRender,
-      huge
+      huge,
+      size
     } = this.props;
     const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled;
     const renderLoader = this.props.loader !== false && this.state.loading;
     const renderGlass = glass && !renderLoader;
     const actions = this.renderActions();
-    const containerClasses = classNames(className, {
+    const containerClasses = classNames(className, modules_88cfaf40[`size${huge ? Size.FULL : size}`], {
       [modules_da7ab055.queryAssist]: true,
       [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
       [modules_da7ab055.huge]: huge
@@ -1033,7 +1037,7 @@ _defineProperty(QueryAssist, "propTypes", {
   /**
    * Open suggestions popup during the initial render
    */
-  autoOpen: PropTypes.bool,
+  autoOpen: PropTypes.oneOf([true, false, 'force']),
 
   /**
    * Initial caret position
@@ -1133,7 +1137,8 @@ _defineProperty(QueryAssist, "propTypes", {
   translations: PropTypes.object,
   actions: PropTypes.array,
   'data-test': PropTypes.string,
-  huge: PropTypes.bool
+  huge: PropTypes.bool,
+  size: PropTypes.string
 });
 
 _defineProperty(QueryAssist, "defaultProps", {
@@ -1142,6 +1147,7 @@ _defineProperty(QueryAssist, "defaultProps", {
   onApplySuggestion: noop,
   onClear: noop,
   onFocusChange: noop,
+  size: Size.L,
   translations: {
     searchTitle: 'Search',
     clearTitle: 'Clear search input'

package/dist/query-assist-ng/query-assist-ng.js

@@ -72,6 +72,9 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
+import '../input/input.js';
+import '../global/prop-types.js';
+import '../_helpers/input.js';
 import '../_helpers/query-assist__suggestions.js';
 
 var queryAssistNg = angularComponentFactory(QueryAssist, 'QueryAssist').name;