@jetbrains/ring-ui 6.0.56 → 6.0.58

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, ButtonHTMLAttributes } from 'react';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
@@ -29,6 +29,7 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
     size?: Size;
+    buttonAttributes?: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'>;
 };
 /**
  * @name Date Picker
@@ -61,6 +62,7 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
         translations: PropTypes.Requireable<object>;
         locale: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<Size>;
+        buttonAttributes: PropTypes.Requireable<object>;
     };
     static defaultProps: DatePickerProps;
     static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;

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

@@ -69,7 +69,8 @@ export default class DatePicker extends PureComponent {
         maxDate: dateType,
         translations: PropTypes.object,
         locale: PropTypes.object,
-        size: PropTypes.oneOf(Object.values(Size))
+        size: PropTypes.oneOf(Object.values(Size)),
+        buttonAttributes: PropTypes.object
     };
     static defaultProps = {
         className: '',
@@ -204,7 +205,7 @@ export default class DatePicker extends PureComponent {
                 ? (<Link data-test-ring-dropdown-anchor className={styles.anchor} disabled={this.props.disabled ?? false} pseudo>
                 {this.getAnchorText()}
               </Link>)
-                : (<Button data-test-ring-dropdown-anchor className={styles.anchor} text={false} disabled={this.props.disabled ?? false}>
+                : (<Button data-test-ring-dropdown-anchor className={styles.anchor} text={false} disabled={this.props.disabled ?? false} {...this.props.buttonAttributes}>
                 {anchorContent}
               </Button>)} {...dropdownProps}>
         <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{

package/components/dialog/dialog.d.ts

@@ -21,6 +21,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     dense?: boolean | null | undefined;
     native?: boolean;
     modal?: boolean;
+    preventBodyScroll?: boolean;
 }
 export default class Dialog extends PureComponent<DialogProps> {
     static propTypes: {
@@ -41,6 +42,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         portalTarget: PropTypes.Requireable<HTMLElement>;
         autoFocusFirst: PropTypes.Requireable<boolean>;
         'data-test': PropTypes.Requireable<string>;
+        preventBodyScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: Partial<DialogProps>;
     state: {

package/components/dialog/dialog.js

@@ -41,7 +41,8 @@ export default class Dialog extends PureComponent {
         trapFocus: PropTypes.bool,
         portalTarget: PropTypes.instanceOf(HTMLElement),
         autoFocusFirst: PropTypes.bool,
-        'data-test': PropTypes.string
+        'data-test': PropTypes.string,
+        preventBodyScroll: PropTypes.bool
     };
     static defaultProps = {
         label: 'Dialog',
@@ -54,7 +55,8 @@ export default class Dialog extends PureComponent {
         shortcutOptions: { modal: false },
         trapFocus: false,
         autoFocusFirst: true,
-        modal: true
+        modal: true,
+        preventBodyScroll: true
     };
     state = {
         shortcutsScope: getUID('ring-dialog-')
@@ -93,6 +95,9 @@ export default class Dialog extends PureComponent {
         }
     }
     toggleScrollPreventer() {
+        if (!this.props.preventBodyScroll) {
+            return;
+        }
         if (this.props.show) {
             this.scrollPreventer.prevent();
         }
@@ -125,7 +130,7 @@ export default class Dialog extends PureComponent {
     };
     nativeDialog = createRef();
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, dense, shortcutOptions, native, modal, preventBodyScroll, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         const content = (<>

package/components/select/select.d.ts

@@ -213,6 +213,9 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     shortcutsScope: string;
     listId: string;
     private _focusHandler;
+    isClickingSelect: boolean;
+    mouseDownHandler: () => void;
+    mouseUpHandler: () => void;
     private _blurHandler;
     node?: HTMLElement | null;
     nodeRef: (el: HTMLElement | null) => void;

package/components/select/select.js

@@ -315,9 +315,17 @@ export default class Select extends Component {
             focused: true
         });
     };
+    isClickingSelect = false;
+    mouseDownHandler = () => {
+        this.isClickingSelect = true;
+    };
+    mouseUpHandler = () => {
+        this.isClickingSelect = false;
+    };
     _blurHandler = () => {
         this.props.onBlur();
-        if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
+        if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup &&
+            !this.isClickingSelect) {
             window.setTimeout(() => {
                 this.setState({ showPopup: false });
             });
@@ -822,7 +830,8 @@ export default class Select extends Component {
         switch (this.props.type) {
             case Type.INPUT_WITHOUT_CONTROLS:
             case Type.INPUT: return (<>
-          <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
+          <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)} role="presentation" // has interactive elements inside
+             onMouseDown={this.mouseDownHandler} onMouseUp={this.mouseUpHandler}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
             <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
             // Input with error style without description

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.56",
+  "version": "6.0.58",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",