@jetbrains/ring-ui 5.0.67 → 5.0.69

package/components/date-picker/date-picker.css

@@ -34,6 +34,26 @@
   &.inline {
     padding: 0;
   }
+
+  &.sizeS {
+    width: calc(unit * 12);
+  }
+
+  &.sizeM {
+    width: calc(unit * 30);
+  }
+
+  &.sizeL {
+    width: calc(unit * 50);
+  }
+
+  &.sizeFULL {
+    width: 100%;
+  }
+
+  &.sizeAUTO {
+    max-width: 100%;
+  }
 }
 
 .displayDate {
@@ -95,10 +115,11 @@
 }
 
 .anchor {
-  min-width: calc(unit * 30);
+  width: 100%;
   padding: 0 unit;
 
   text-align: start;
+  white-space: nowrap;
 
   @nest .inline & {
     min-width: initial;

package/components/date-picker/date-picker.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
 import { DropdownAttrs } from '../dropdown/dropdown';
+import { Size } from '../input/input';
 import { DatePopupProps } from './date-popup';
 import { DateInputTranslations, DatePickerChange } from './consts';
 export interface DatePickerTranslations extends Partial<DateInputTranslations> {
@@ -26,6 +27,7 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     rangePlaceholder: string;
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
+    size?: Size;
 };
 /**
  * @name Date Picker
@@ -57,6 +59,7 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         translations: PropTypes.Requireable<object>;
         locale: PropTypes.Requireable<object>;
+        size: PropTypes.Requireable<Size>;
     };
     static defaultProps: DatePickerProps;
     handleChange: (change: DatePickerChange | Date | null | undefined) => void;

package/components/date-picker/date-picker.js

@@ -16,6 +16,7 @@ import Dropdown from '../dropdown/dropdown';
 import Icon from '../icon';
 import Button from '../button/button';
 import Link from '../link/link';
+import { Size } from '../input/input';
 import DatePopup from './date-popup';
 import { dateType } from './consts';
 import styles from './date-picker.css';
@@ -66,7 +67,8 @@ export default class DatePicker extends PureComponent {
         minDate: dateType,
         maxDate: dateType,
         translations: PropTypes.object,
-        locale: PropTypes.object
+        locale: PropTypes.object,
+        size: PropTypes.oneOf(Object.values(Size))
     };
     static defaultProps = {
         className: '',
@@ -77,6 +79,7 @@ export default class DatePicker extends PureComponent {
         to: null,
         clear: false,
         inline: false,
+        size: Size.M,
         displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', { locale }) : ''),
         displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', { locale }) : ''),
         displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', { locale }) : ''),
@@ -202,7 +205,7 @@ export default class DatePicker extends PureComponent {
         </Button>);
         }
         const { className, popupClassName, clear, inline, dropdownProps, translations, ...datePopupProps } = this.props;
-        const classes = classNames(styles.datePicker, className, {
+        const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
             [styles.inline]: inline
         });
         return (<Dropdown className={classes} anchor={inline

package/components/error-message/error-message.d.ts

@@ -8,6 +8,7 @@ export interface ErrorMessageProps {
     message?: string | null | undefined;
     description?: string | null | undefined;
     className?: string | null | undefined;
+    'data-test'?: string | null | undefined;
 }
 /**
  * @name Error Message
@@ -20,6 +21,7 @@ export default class ErrorMessage extends Component<ErrorMessageProps> {
         description: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/components/error-message/error-message.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon/icon';
 import { Size } from '../icon/icon__constants';
+import dataTests from '../global/data-tests';
 import styles from './error-message.css';
 /**
  * @name Error Message
@@ -14,12 +15,13 @@ export default class ErrorMessage extends Component {
         message: PropTypes.string,
         description: PropTypes.string,
         children: PropTypes.node,
-        className: PropTypes.string
+        className: PropTypes.string,
+        'data-test': PropTypes.string
     };
     render() {
-        const { className, icon, code, message, description, children } = this.props;
+        const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
         const classes = classNames(styles.errorMessage, className);
-        return (<div className={classes}>
+        return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
         {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
         <div className={styles.content}>
           <div className={styles.title}>

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

@@ -46,6 +46,7 @@ export interface QueryAssistProps {
     clear?: boolean | null | undefined;
     className?: string | null | undefined;
     popupClassName?: string | null | undefined;
+    inputClassName?: string | null | undefined;
     dataSource: (params: QueryAssistRequestParams) => Promise<QueryAssistResponse> | QueryAssistResponse;
     delay?: number | null | undefined;
     disabled?: boolean | undefined;
@@ -147,6 +148,10 @@ export default class QueryAssist extends Component<QueryAssistProps> {
          * Additional class for the popup
          */
         popupClassName: PropTypes.Requireable<string>;
+        /**
+         * Additional class for the input
+         */
+        inputClassName: PropTypes.Requireable<string>;
         /**
          * Data source function
          */

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

@@ -89,6 +89,10 @@ export default class QueryAssist extends Component {
          * Additional class for the popup
          */
         popupClassName: PropTypes.string,
+        /**
+         * Additional class for the input
+         */
+        inputClassName: PropTypes.string,
         /**
          * Data source function
          */
@@ -769,7 +773,7 @@ export default class QueryAssist extends Component {
             [styles.withIcon]: (renderGlass && !huge) || renderLoader,
             [styles.huge]: huge
         });
-        const inputClasses = classNames({
+        const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
             [styles.inputGap2]: actions.length === 2,

package/dist/_helpers/_rollupPluginBabelHelpers.js

@@ -1,4 +1,5 @@
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -25,5 +26,19 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 export { _defineProperty as _, _extends as a };

package/dist/_helpers/date-picker.js

@@ -1,3 +1,3 @@
-var modules_0c7b7d96 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","cellSize":"24px","calHeight":"288px","calWidth":"296px","yearHeight":"32px","yearWidth":"48px","light":"light_rui_e0bd","clearfix":"clearfix_rui_e0bd","font":"font_rui_e0bd","font-lower":"font-lower_rui_e0bd font_rui_e0bd","font-smaller":"font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-smaller-lower":"font-smaller-lower_rui_e0bd font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger-lower":"font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger":"font-larger_rui_e0bd font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","thin-font":"thin-font_rui_e0bd","monospace-font":"monospace-font_rui_e0bd","ellipsis":"ellipsis_rui_e0bd","resetButton":"resetButton_rui_e0bd","container":"container_rui_e0bd","hoverable":"hoverable_rui_e0bd","datePicker":"datePicker_rui_e0bd","inline":"inline_rui_e0bd","displayDate":"displayDate_rui_e0bd","displayRange":"displayRange_rui_e0bd","clear":"clear_rui_e0bd","datePopup":"datePopup_rui_e0bd","filterWrapper":"filterWrapper_rui_e0bd filterWrapper_rui_531d","filter":"filter_rui_e0bd filter_rui_531d","calendarIcon":"calendarIcon_rui_e0bd","anchor":"anchor_rui_e0bd","anchorContent":"anchorContent_rui_e0bd","chevronDownIcon":"chevronDownIcon_rui_e0bd","fromInput":"fromInput_rui_e0bd","fromInputWithDivider":"fromInputWithDivider_rui_e0bd","toInput":"toInput_rui_e0bd","dateInput":"dateInput_rui_e0bd","timeInputWithDivider":"timeInputWithDivider_rui_e0bd","weekdays":"weekdays_rui_e0bd","weekday":"weekday_rui_e0bd","weekend":"weekend_rui_e0bd","calendar":"calendar_rui_e0bd","months":"months_rui_e0bd","days":"days_rui_e0bd","month":"month_rui_e0bd","monthTitle":"monthTitle_rui_e0bd","day":"day_rui_e0bd resetButton_rui_8bff","between":"between_rui_e0bd","activeBetween":"activeBetween_rui_e0bd","current":"current_rui_e0bd","active":"active_rui_e0bd","disabled":"disabled_rui_e0bd","from":"from_rui_e0bd","to":"to_rui_e0bd","Monday":"Monday_rui_e0bd","spread":"spread_rui_e0bd","activeSpread":"activeSpread_rui_e0bd","first":"first_rui_e0bd","Tuesday":"Tuesday_rui_e0bd","Friday":"Friday_rui_e0bd","Saturday":"Saturday_rui_e0bd","Sunday":"Sunday_rui_e0bd","empty":"empty_rui_e0bd","today":"today_rui_e0bd","year":"year_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthNames":"monthNames_rui_e0bd","monthName":"monthName_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthSlider":"monthSlider_rui_e0bd resetButton_rui_8bff","dragging":"dragging_rui_e0bd","range":"range_rui_e0bd","years":"years_rui_e0bd","currentYear":"currentYear_rui_e0bd"};
+var modules_0c7b7d96 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","cellSize":"24px","calHeight":"288px","calWidth":"296px","yearHeight":"32px","yearWidth":"48px","light":"light_rui_e0bd","clearfix":"clearfix_rui_e0bd","font":"font_rui_e0bd","font-lower":"font-lower_rui_e0bd font_rui_e0bd","font-smaller":"font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-smaller-lower":"font-smaller-lower_rui_e0bd font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger-lower":"font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger":"font-larger_rui_e0bd font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","thin-font":"thin-font_rui_e0bd","monospace-font":"monospace-font_rui_e0bd","ellipsis":"ellipsis_rui_e0bd","resetButton":"resetButton_rui_e0bd","container":"container_rui_e0bd","hoverable":"hoverable_rui_e0bd","datePicker":"datePicker_rui_e0bd","inline":"inline_rui_e0bd","sizeS":"sizeS_rui_e0bd","sizeM":"sizeM_rui_e0bd","sizeL":"sizeL_rui_e0bd","sizeFULL":"sizeFULL_rui_e0bd","sizeAUTO":"sizeAUTO_rui_e0bd","displayDate":"displayDate_rui_e0bd","displayRange":"displayRange_rui_e0bd","clear":"clear_rui_e0bd","datePopup":"datePopup_rui_e0bd","filterWrapper":"filterWrapper_rui_e0bd filterWrapper_rui_531d","filter":"filter_rui_e0bd filter_rui_531d","calendarIcon":"calendarIcon_rui_e0bd","anchor":"anchor_rui_e0bd","anchorContent":"anchorContent_rui_e0bd","chevronDownIcon":"chevronDownIcon_rui_e0bd","fromInput":"fromInput_rui_e0bd","fromInputWithDivider":"fromInputWithDivider_rui_e0bd","toInput":"toInput_rui_e0bd","dateInput":"dateInput_rui_e0bd","timeInputWithDivider":"timeInputWithDivider_rui_e0bd","weekdays":"weekdays_rui_e0bd","weekday":"weekday_rui_e0bd","weekend":"weekend_rui_e0bd","calendar":"calendar_rui_e0bd","months":"months_rui_e0bd","days":"days_rui_e0bd","month":"month_rui_e0bd","monthTitle":"monthTitle_rui_e0bd","day":"day_rui_e0bd resetButton_rui_8bff","between":"between_rui_e0bd","activeBetween":"activeBetween_rui_e0bd","current":"current_rui_e0bd","active":"active_rui_e0bd","disabled":"disabled_rui_e0bd","from":"from_rui_e0bd","to":"to_rui_e0bd","Monday":"Monday_rui_e0bd","spread":"spread_rui_e0bd","activeSpread":"activeSpread_rui_e0bd","first":"first_rui_e0bd","Tuesday":"Tuesday_rui_e0bd","Friday":"Friday_rui_e0bd","Saturday":"Saturday_rui_e0bd","Sunday":"Sunday_rui_e0bd","empty":"empty_rui_e0bd","today":"today_rui_e0bd","year":"year_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthNames":"monthNames_rui_e0bd","monthName":"monthName_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthSlider":"monthSlider_rui_e0bd resetButton_rui_8bff","dragging":"dragging_rui_e0bd","range":"range_rui_e0bd","years":"years_rui_e0bd","currentYear":"currentYear_rui_e0bd"};
 
 export { modules_0c7b7d96 as m };

package/dist/date-picker/date-picker.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
 import { DropdownAttrs } from '../dropdown/dropdown';
+import { Size } from '../input/input';
 import { DatePopupProps } from './date-popup';
 import { DateInputTranslations, DatePickerChange } from './consts';
 export interface DatePickerTranslations extends Partial<DateInputTranslations> {
@@ -26,6 +27,7 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     rangePlaceholder: string;
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
+    size?: Size;
 };
 /**
  * @name Date Picker
@@ -57,6 +59,7 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         translations: PropTypes.Requireable<object>;
         locale: PropTypes.Requireable<object>;
+        size: PropTypes.Requireable<Size>;
     };
     static defaultProps: DatePickerProps;
     handleChange: (change: DatePickerChange | Date | null | undefined) => void;

package/dist/date-picker/date-picker.js

@@ -17,6 +17,7 @@ import Dropdown from '../dropdown/dropdown.js';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
 import Link from '../link/link.js';
+import { Size } from '../input/input.js';
 import DatePopup from './date-popup.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
@@ -48,6 +49,11 @@ import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../_helpers/link.js';
+import '@jetbrains/icons/close-12px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../_helpers/input.js';
+import '../input/input-label.js';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/startOfDay';
@@ -77,12 +83,6 @@ import 'date-fns/isThisYear';
 import 'date-fns/setYear';
 import './weekdays.js';
 import 'date-fns/add';
-import '../input/input.js';
-import '@jetbrains/icons/close-12px';
-import '../global/prop-types.js';
-import '../global/composeRefs.js';
-import '../_helpers/input.js';
-import '../input/input-label.js';
 
 const PopupComponent = _ref => {
   let {
@@ -242,7 +242,7 @@ class DatePicker extends PureComponent {
       translations,
       ...datePopupProps
     } = this.props;
-    const classes = classNames(modules_0c7b7d96.datePicker, className, {
+    const classes = classNames(modules_0c7b7d96.datePicker, className, modules_0c7b7d96[`size${this.props.size}`], {
       [modules_0c7b7d96.inline]: inline
     });
     return /*#__PURE__*/React.createElement(Dropdown, _extends({
@@ -298,7 +298,8 @@ _defineProperty(DatePicker, "propTypes", {
   minDate: dateType,
   maxDate: dateType,
   translations: PropTypes.object,
-  locale: PropTypes.object
+  locale: PropTypes.object,
+  size: PropTypes.oneOf(Object.values(Size))
 });
 _defineProperty(DatePicker, "defaultProps", {
   className: '',
@@ -309,6 +310,7 @@ _defineProperty(DatePicker, "defaultProps", {
   to: null,
   clear: false,
   inline: false,
+  size: Size.M,
   displayFormat: (date, locale) => date ? format(date, 'd MMM yyyy', {
     locale
   }) : '',

package/dist/error-message/error-message.d.ts

@@ -8,6 +8,7 @@ export interface ErrorMessageProps {
     message?: string | null | undefined;
     description?: string | null | undefined;
     className?: string | null | undefined;
+    'data-test'?: string | null | undefined;
 }
 /**
  * @name Error Message
@@ -20,6 +21,7 @@ export default class ErrorMessage extends Component<ErrorMessageProps> {
         description: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/dist/error-message/error-message.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon/icon.js';
 import { Size } from '../icon/icon__constants.js';
+import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
 import 'util-deprecate';
 import '../_helpers/icon.js';
@@ -21,11 +22,13 @@ class ErrorMessage extends Component {
       code,
       message,
       description,
-      children
+      children,
+      'data-test': dataTest
     } = this.props;
     const classes = classNames(modules_2c5e8509.errorMessage, className);
     return /*#__PURE__*/React.createElement("div", {
-      className: classes
+      className: classes,
+      "data-test": joinDataTestAttributes('ring-error-message', dataTest)
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       className: modules_2c5e8509.icon,
       glyph: icon,
@@ -46,7 +49,8 @@ _defineProperty(ErrorMessage, "propTypes", {
   message: PropTypes.string,
   description: PropTypes.string,
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'data-test': PropTypes.string
 });
 
 export { ErrorMessage as default };

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

@@ -46,6 +46,7 @@ export interface QueryAssistProps {
     clear?: boolean | null | undefined;
     className?: string | null | undefined;
     popupClassName?: string | null | undefined;
+    inputClassName?: string | null | undefined;
     dataSource: (params: QueryAssistRequestParams) => Promise<QueryAssistResponse> | QueryAssistResponse;
     delay?: number | null | undefined;
     disabled?: boolean | undefined;
@@ -147,6 +148,10 @@ export default class QueryAssist extends Component<QueryAssistProps> {
          * Additional class for the popup
          */
         popupClassName: PropTypes.Requireable<string>;
+        /**
+         * Additional class for the input
+         */
+        inputClassName: PropTypes.Requireable<string>;
         /**
          * Data source function
          */

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

@@ -784,7 +784,7 @@ class QueryAssist extends Component {
       [modules_da7ab055.withIcon]: renderGlass && !huge || renderLoader,
       [modules_da7ab055.huge]: huge
     });
-    const inputClasses = classNames({
+    const inputClasses = classNames(this.props.inputClassName, {
       [`${modules_da7ab055.input} ring-js-shortcuts`]: true,
       [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
       [modules_da7ab055.inputGap2]: actions.length === 2,
@@ -894,6 +894,10 @@ _defineProperty(QueryAssist, "propTypes", {
    * Additional class for the popup
    */
   popupClassName: PropTypes.string,
+  /**
+   * Additional class for the input
+   */
+  inputClassName: PropTypes.string,
   /**
    * Data source function
    */