@jetbrains/ring-ui 5.0.68 → 5.0.70

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/select/select.css

@@ -40,21 +40,14 @@
 
 .icons {
   position: absolute;
-  top: -3px;
+  top: 0;
   right: 5px;
+  bottom: 0;
 
   transition: color var(--ring-ease);
 
   color: var(--ring-icon-secondary-color);
 
-  line-height: calc(unit * 4);
-
-  & :global(.ring-loader_inline) {
-    top: 2px;
-
-    margin-right: 2px;
-  }
-
   @nest .inputMode & {
     font-size: var(--ring-font-size);
   }
@@ -235,7 +228,3 @@
 
   color: inherit;
 }
-
-.heightS .icons {
-  top: -5px;
-}

package/components/select/select.js

@@ -740,14 +740,15 @@ export default class Select extends Component {
         const { selected } = this.state;
         const { disabled, clear, hideArrow } = this.props;
         const icons = [];
+        const height = this.props.height || this.context;
         if (!Array.isArray(selected) && selected?.icon) {
             icons.push(<button title="Toggle options popup" type="button" className={styles.selectedIcon} key="selected" disabled={this.props.disabled} onClick={this._clickHandler} style={{ backgroundImage: `url(${selected.icon})` }}/>);
         }
         if (clear && !disabled && !this._selectionIsEmpty()) {
-            icons.push(<Button title="Clear selection" data-test="ring-clear-select" className={styles.clearIcon} key="close" disabled={this.props.disabled} onClick={this.clear} icon={closeIcon}/>);
+            icons.push(<Button title="Clear selection" data-test="ring-clear-select" className={styles.clearIcon} key="close" disabled={this.props.disabled} onClick={this.clear} height={height} icon={closeIcon}/>);
         }
         if (!hideArrow) {
-            icons.push(<Button title="Toggle options popup" className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key="hide" disabled={this.props.disabled} onClick={this._clickHandler}/>);
+            icons.push(<Button title="Toggle options popup" className={styles.chevron} iconClassName={styles.chevronIcon} icon={chevronDownIcon} key="hide" disabled={this.props.disabled} height={height} onClick={this._clickHandler}/>);
         }
         return icons;
     }
@@ -782,7 +783,7 @@ export default class Select extends Component {
         });
         const icons = this._getIcons();
         const style = getStyle(icons.length);
-        const iconsNode = <span className={styles.icons}>{icons}</span>;
+        const iconsNode = <div className={styles.icons}>{icons}</div>;
         const ariaProps = this.state.showPopup
             ? {
                 'aria-owns': this.listId,

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/select/select.js

@@ -857,6 +857,7 @@ class Select extends Component {
       hideArrow
     } = this.props;
     const icons = [];
+    const height = this.props.height || this.context;
     if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
       icons.push( /*#__PURE__*/React.createElement("button", {
         title: "Toggle options popup",
@@ -878,6 +879,7 @@ class Select extends Component {
         key: "close",
         disabled: this.props.disabled,
         onClick: this.clear,
+        height: height,
         icon: closeIcon
       }));
     }
@@ -889,6 +891,7 @@ class Select extends Component {
         icon: chevronDownIcon,
         key: "hide",
         disabled: this.props.disabled,
+        height: height,
         onClick: this._clickHandler
       }));
     }
@@ -931,7 +934,7 @@ class Select extends Component {
     });
     const icons = this._getIcons();
     const style = getStyle(icons.length);
-    const iconsNode = /*#__PURE__*/React.createElement("span", {
+    const iconsNode = /*#__PURE__*/React.createElement("div", {
       className: modules_9d0de074.icons
     }, icons);
     const ariaProps = this.state.showPopup ? {