@jetbrains/ring-ui 5.0.14 → 5.0.17

package/components/dialog/dialog.d.ts

@@ -10,6 +10,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
     closeButtonInside: boolean;
+    closeButtonTitle?: string;
     trapFocus: boolean;
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
@@ -28,6 +29,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         show: PropTypes.Validator<boolean>;
         showCloseButton: PropTypes.Requireable<boolean>;
         closeButtonInside: PropTypes.Requireable<boolean>;
+        closeButtonTitle: PropTypes.Requireable<string>;
         onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
         onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
         onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/dialog/dialog.js

@@ -28,6 +28,7 @@ export default class Dialog extends PureComponent {
         show: PropTypes.bool.isRequired,
         showCloseButton: PropTypes.bool,
         closeButtonInside: PropTypes.bool,
+        closeButtonTitle: PropTypes.string,
         onOverlayClick: PropTypes.func,
         onEscPress: PropTypes.func,
         onCloseClick: PropTypes.func,
@@ -99,7 +100,7 @@ export default class Dialog extends PureComponent {
         this.dialog = tabTrap && tabTrap.node;
     };
     render() {
-        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, ...restProps } = this.props;
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, closeButtonTitle, ...restProps } = this.props;
         const classes = classNames(styles.container, className);
         const shortcutsMap = this.getShortcutsMap();
         return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
@@ -115,7 +116,7 @@ export default class Dialog extends PureComponent {
                     (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
                             [styles.closeButtonOutside]: !closeButtonInside,
                             [styles.closeButtonInside]: closeButtonInside
-                        })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} aria-label="close dialog"/>)}
+                        })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
                 </AdaptiveIsland>
               </div>
               {target}

package/components/form/form.examples.js

@@ -36,7 +36,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-2" class="ring-form__label">Medium Input</label>
             <div class="ring-form__control">
-              <input class="ring-input ring-input-size_md" id="ring-form-2"
+              <input class="ring-input ring-input-size_m" id="ring-form-2"
                 type="text">
             </div>
           </div>
@@ -44,7 +44,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
             <div class="ring-form__control">
-              <input class="ring-input ring-input_error ring-input-size_md"
+              <input class="ring-input ring-input_error ring-input-size_m"
                 id="ring-form-3" type="text">
               <div class="ring-error-bubble active">Error bubble</div>
             </div>
@@ -75,7 +75,7 @@ export const basic = () => {
           <div class="ring-form__group">
             <label for="ring-form-7" class="ring-form__label">Textarea</label>
             <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_md"
+              <textarea class="ring-input ring-input-size_m"
                 id="ring-form-7"></textarea>
             </div>
           </div>
@@ -101,7 +101,7 @@ export const basic = () => {
             <label for="ring-form-11" class="ring-form__label">Input in
               a small container</label>
             <div class="ring-form__control ring-form__control_small">
-              <input class="ring-input ring-input-size_md" id="ring-form-11"
+              <input class="ring-input ring-input-size_m" id="ring-form-11"
                 type="text">
             </div>
           </div>
@@ -110,7 +110,7 @@ export const basic = () => {
             <label for="ring-form-12" class="ring-form__label">Textarea in
               a small container</label>
             <div class="ring-form__control ring-form__control_small">
-              <textarea class="ring-input ring-input-size_md"
+              <textarea class="ring-input ring-input-size_m"
                 id="ring-form-12"></textarea>
             </div>
           </div>

package/components/input/input-legacy.css

@@ -16,46 +16,84 @@ Input
  */
 
 :global(.ring-input) {
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(3 * unit);
-  margin: 0;
-  padding-right: calc(unit / 2);
-  padding-bottom: 3px;
-  padding-left: calc(unit / 2);
+  /* .heightS */
+  --ring-input-padding-block: 1px;
+  --ring-input-padding-inline: unit;
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
 
-  color: var(--ring-text-color);
-
-  border: 1px solid var(--ring-borders-color);
-  border-radius: 0;
-  background-color: var(--ring-content-background-color);
+  /* stylelint-disable order/properties-order */
 
-  font-family: var(--ring-font-family);
+  box-sizing: border-box;
 
+  font: inherit;
   font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
 
-  line-height: 20px;
-  appearance: none;
-}
+  width: 100%;
 
-:global(.ring-input:active),
-:global(.ring-input:focus),
-:global(.ring-input_active),
-:global(.ring-input_focus) {
-  border-color: var(--ring-main-color);
-  outline: 0;
-}
+  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);
 
-:global(.ring-input_correct) {
-  border-color: var(--ring-success-color);
-}
+  transition: border-color var(--ring-ease);
 
-:global(.ring-input_error) {
-  border-color: var(--ring-error-color);
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background: transparent;
+
+  caret-color: var(--ring-main-color);
+
+  /* stylelint-enable order/properties-order */
+
+  @nest [dir=rtl] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  @nest .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+
+  &:focus {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+  }
+
+  /*
+    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;
+    }
+  }
 }
 
-:global(.ring-input_no-resize) {
-  resize: none;
+:global(.ring-input_error) {
+  border-color: var(--ring-icon-error-color);
 }
 
 :global(.ring-input_filter-popup) {
@@ -63,32 +101,25 @@ Input
   min-width: 200px;
 }
 
-:global(.ring-input_material) {
-  padding-right: 0;
-  padding-left: 0;
-
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
-}
-
 :global(.ring-input.ring-input:disabled),
 :global(.ring-input.ring-input[disabled]),
 :global(.ring-input.ring-input_disabled) {
   color: var(--ring-disabled-color);
   border-color: var(--ring-border-disabled-color);
-  background-color: var(--ring-sidebar-background-color);
+  background-color: var(--ring-disabled-background-color);
+
+  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
 }
 
 :global(textarea.ring-input) {
-  height: auto;
+  box-sizing: border-box;
+
   min-height: calc(8 * unit);
 
-  resize: vertical;
-  vertical-align: top;
+  resize: none;
 }
 
 /* https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers */
-:global(textarea.ring-input::placeholder) {
+:global(.ring-input::placeholder) {
   color: var(--ring-disabled-color);
 }

package/components/input-size/input-size.css

@@ -3,10 +3,10 @@
 @value unit from "../global/global.css";
 
 :root {
-  --ring-input-xs: 50px;
-  --ring-input-s: 100px;
-  --ring-input-m: 200px;
-  --ring-input-l: 400px;
+  --ring-input-xs: calc(unit * 12);
+  --ring-input-s: calc(unit * 12);
+  --ring-input-m: calc(unit * 30);
+  --ring-input-l: calc(unit * 50);
 }
 
 /**
@@ -39,6 +39,16 @@
 
 /* M */
 
+:global(.ring-input-size_m.ring-input-size_m) {
+  display: inline-block;
+
+  width: var(--ring-input-m);
+}
+
+:global(.ring-input-size_m.ring-input-size_m ~ .ring-error-bubble) {
+  left: calc(var(--ring-input-m) + 2px);
+}
+
 :global(.ring-input-size_md.ring-input-size_md) {
   display: inline-block;
 
@@ -60,3 +70,15 @@
 :global(.ring-input-size_l.ring-input-size_l ~ .ring-error-bubble) {
   left: calc(var(--ring-input-l) + 2px);
 }
+
+:global(.ring-input-height_s.ring-input-height_s) {
+  --ring-input-padding-block: 1px;
+}
+
+:global(.ring-input-height_m.ring-input-height_m) {
+  --ring-input-padding-block: 3px;
+}
+
+:global(.ring-input-height_l.ring-input-height_l) {
+  --ring-input-padding-block: 5px;
+}

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

@@ -46,7 +46,7 @@ export const basic = () => {
           </div>
           <div class="ring-error-bubble-wrapper">
             <rg-query-assist
-              class="ring-input-size_md"
+              class="ring-input-size_m"
               x-data-source="exampleCtrl.dataSource"
               glass="true"
               placeholder="'Medium'">
@@ -89,7 +89,7 @@ export const basic = () => {
             <div class="ring-error-bubble active">Short Select</div>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_md"
+            <rg-select class="ring-input-size_m"
               ng-model="exampleCtrl.selected"
               options="item in exampleCtrl.options"
               label="Select item"></rg-select>
@@ -129,7 +129,7 @@ export const basic = () => {
             <div class="ring-error-bubble active">Short Select</div>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_md"
+            <rg-select class="ring-input-size_m"
               type="input"
               ng-model="exampleCtrl.selected"
               options="item in exampleCtrl.options"
@@ -164,7 +164,7 @@ export const basic = () => {
             <label for="short-input" class="ring-error-bubble active">Short Input</label>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <input id="medium-input" type="number" class="ring-input ring-input-size_md">
+            <input id="medium-input" type="number" class="ring-input ring-input-size_m">
             <label for="medium-input" class="ring-error-bubble active">Medium Input</label>
           </div>
           <div class="ring-error-bubble-wrapper">
@@ -188,7 +188,7 @@ export const basic = () => {
             <label for="short-textarea" class="ring-error-bubble active">Short Textarea</label>
           </div>
           <div class="ring-error-bubble-wrapper">
-            <textarea id="medium-textarea" class="ring-input ring-input-size_md"></textarea>
+            <textarea id="medium-textarea" class="ring-input ring-input-size_m"></textarea>
             <label for="medium-textarea" class="ring-error-bubble active">Medium Textarea</label>
           </div>
           <div class="ring-error-bubble-wrapper">

package/components/panel/panel.css

@@ -8,7 +8,7 @@
   position: relative;
 
   margin-top: calc(unit * 2);
-  padding: calc(unit * 1.5) 0 calc(unit * 2) calc(unit * 2);
+  padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
 
   border-top: 1px solid var(--ring-popup-border-color);
 

package/components/save-field-ng/save-field-ng.examples.js

@@ -87,7 +87,7 @@ export const basic = ({onSave}) => {
                 on-save="save()">
                 <input type="text"
                   id="input"
-                  class="ring-input ring-input-size_md"
+                  class="ring-input ring-input-size_m"
                   ng-required="true"
                   ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\\.]*[@][a-zA-Z0-9-_\\.]+$/"
                   ng-model="data.email">
@@ -106,7 +106,7 @@ export const basic = ({onSave}) => {
                 on-save="save()">
                 <input type="text"
                   id="email"
-                  class="ring-input ring-input-size_md"
+                  class="ring-input ring-input-size_m"
                   ng-required="true"
                   ng-pattern="/^[a-zA-Z][a-zA-Z0-9-_\\.]*[@][a-zA-Z0-9-_\\.]+$/"
                   ng-model="data.emailWorkingValue">
@@ -144,7 +144,7 @@ export const basic = ({onSave}) => {
                   <textarea type="text"
                     id="list-mode"
                     name="myMultilineArea"
-                    class="ring-input ring-input-size_md"
+                    class="ring-input ring-input-size_m"
                     ng-model="data.longTextList"></textarea>
               </rg-save-field>
               <div class="ring-form__control__description">data.longTextList =
@@ -180,7 +180,7 @@ export const basic = ({onSave}) => {
                 on-save="invalidSave(value)">
                 <input type="text"
                   id="rejected"
-                  class="ring-input ring-input-size_md"
+                  class="ring-input ring-input-size_m"
                   ng-model="data.someText">
               </rg-save-field>
             </div>

package/components/table/row.d.ts

@@ -9,6 +9,7 @@ export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<H
     showFocus: boolean;
     draggable: boolean;
     alwaysShowDragHandle: boolean;
+    dragHandleTitle?: string;
     selected: boolean;
     onHover: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
     onSelect: (item: T, selected: boolean) => void;

package/components/table/row.js

@@ -12,14 +12,15 @@ import getUID from '../global/get-uid';
 import composeRefs from '../global/composeRefs';
 import Cell from './cell';
 import style from './table.css';
-const DragHandle = ({ alwaysShowDragHandle }) => {
+const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
     const classes = classNames(style.dragHandle, {
         [style.visibleDragHandle]: alwaysShowDragHandle
     });
-    return (<Button data-movable-handle title="Drag" className={classes} icon={dragIcon}/>);
+    return (<Button data-movable-handle title={dragHandleTitle} className={classes} icon={dragIcon}/>);
 };
 DragHandle.propTypes = {
-    alwaysShowDragHandle: PropTypes.bool
+    alwaysShowDragHandle: PropTypes.bool,
+    dragHandleTitle: PropTypes.string
 };
 export default class Row extends PureComponent {
     static defaultProps = {
@@ -72,7 +73,7 @@ export default class Row extends PureComponent {
         this.row = el;
     };
     render() {
-        const { item, columns, selectable, selected, showFocus, draggable, alwaysShowDragHandle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, 'data-test': dataTest, ...restProps } = this.props;
+        const { item, columns, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(className, {
             [style.row]: true,
             [style.rowFocused]: showFocus,
@@ -90,8 +91,7 @@ export default class Row extends PureComponent {
             paddingLeft: `${gap}px`
         };
         const metaColumn = (<div className={metaColumnClasses} style={metaColumnStyle}>
-        {draggable &&
-                <DragHandle alwaysShowDragHandle={alwaysShowDragHandle}/>}
+        {draggable && (<DragHandle alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle}/>)}
 
         {selectable &&
                 (<Tooltip title={checkboxTooltip}>

package/components/table/smart-table.d.ts

@@ -26,6 +26,7 @@ declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTab
         sortKey?: React.Validator<string | null | undefined> | undefined;
         sortOrder?: React.Validator<boolean | null | undefined> | undefined;
         alwaysShowDragHandle?: React.Validator<boolean | null | undefined> | undefined;
+        dragHandleTitle?: React.Validator<string | null | undefined> | undefined;
         onReorder?: React.Validator<((params: import("./table").ReorderParams<SelectionItem>) => void) | null | undefined> | undefined;
         getItemKey?: React.Validator<((item: SelectionItem) => string | number) | null | undefined> | undefined;
         stickyHeader?: React.Validator<boolean | null | undefined> | undefined;

package/components/table/table.d.ts

@@ -25,6 +25,7 @@ export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps
     sortOrder: boolean;
     draggable: boolean;
     alwaysShowDragHandle: boolean;
+    dragHandleTitle?: string;
     stickyHeader: boolean;
     getItemLevel: (item: T) => number;
     getItemClassName: (item: T) => string | null | undefined;

package/components/table/table.js

@@ -106,7 +106,7 @@ export class Table extends PureComponent {
         window.scrollTo(scrollX, scrollY);
     };
     render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getItemDataTest, draggable, alwaysShowDragHandle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
         // NOTE: Do not construct new object per render because it causes all rows rerendering
         const headerProps = {
             caption, selectable, draggable,
@@ -150,7 +150,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
+            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
             return isDragged
                 ? (<table style={{ ...props.style, borderSpacing: 0 }}>
             <tbody>{row}</tbody>

package/dist/dialog/dialog.d.ts

@@ -10,6 +10,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
     closeButtonInside: boolean;
+    closeButtonTitle?: string;
     trapFocus: boolean;
     contentClassName?: string | null | undefined;
     portalTarget?: Element | null | undefined;
@@ -28,6 +29,7 @@ export default class Dialog extends PureComponent<DialogProps> {
         show: PropTypes.Validator<boolean>;
         showCloseButton: PropTypes.Requireable<boolean>;
         closeButtonInside: PropTypes.Requireable<boolean>;
+        closeButtonTitle: PropTypes.Requireable<string>;
         onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
         onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
         onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/dialog/dialog.js

@@ -125,6 +125,7 @@ class Dialog extends PureComponent {
       closeButtonInside,
       portalTarget,
       label,
+      closeButtonTitle,
       ...restProps
     } = this.props;
     const classes = classNames(modules_5e9b8c03.container, className);
@@ -162,7 +163,8 @@ class Dialog extends PureComponent {
       }),
       iconClassName: modules_5e9b8c03.closeIcon,
       onClick: this.onCloseClick,
-      "aria-label": "close dialog"
+      title: closeButtonTitle,
+      "aria-label": closeButtonTitle || 'close dialog'
     }))), target)), portalTarget instanceof HTMLElement ? portalTarget : document.body);
   }
 
@@ -176,6 +178,7 @@ _defineProperty(Dialog, "propTypes", {
   show: PropTypes.bool.isRequired,
   showCloseButton: PropTypes.bool,
   closeButtonInside: PropTypes.bool,
+  closeButtonTitle: PropTypes.string,
   onOverlayClick: PropTypes.func,
   onEscPress: PropTypes.func,
   onCloseClick: PropTypes.func,

package/dist/popup/position.js

@@ -1,5 +1,5 @@
 import { getRect, isMounted, getDocumentScrollTop, getDocumentScrollLeft, getWindowHeight } from '../global/dom.js';
-import { Directions, MaxHeight, Dimension, MinWidth } from './popup.consts.js';
+import { MaxHeight, Dimension, MinWidth, Directions } from './popup.consts.js';
 export { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/web.dom-collections.iterator.js';