@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/data-list/data-list.mock.js

@@ -1,9 +1,11 @@
 import Link from '../link/link';
-import Badge from '../badge/badge';
+import Tag from '../tag/tag';
 const items = [
     {
         id: 1,
-        title: <span><strong>Assigner</strong> in 60 projects</span>,
+        title: (<span>
+        <strong>Assigner</strong> in 60 projects
+      </span>),
         collapsible: true,
         selectable: true,
         items: [
@@ -16,35 +18,37 @@ const items = [
                     {
                         id: 111,
                         selectable: true,
-                        title: <Link href="#">TeamCity</Link>
+                        title: <Link href="#">TeamCity</Link>,
                     },
                     {
                         id: 112,
                         selectable: true,
-                        title: <Link href="#">YouTrack</Link>
+                        title: <Link href="#">YouTrack</Link>,
                     },
                     {
                         id: 113,
                         selectable: true,
-                        title: <Link href="#">Sandbox</Link>
+                        title: <Link href="#">Sandbox</Link>,
                     },
                     {
                         id: 114,
                         selectable: true,
-                        title: <Link href="#">Exception Analyzer</Link>
+                        title: <Link href="#">Exception Analyzer</Link>,
                     },
                     {
                         id: 115,
                         selectable: true,
-                        title: <Link href="#">MPS</Link>
-                    }
-                ]
-            }
-        ]
+                        title: <Link href="#">MPS</Link>,
+                    },
+                ],
+            },
+        ],
     },
     {
         id: 2,
-        title: <span><strong>Code Reviewer</strong> in 5 projects</span>,
+        title: (<span>
+        <strong>Code Reviewer</strong> in 5 projects
+      </span>),
         selectable: true,
         collapsible: true,
         items: [
@@ -54,8 +58,8 @@ const items = [
                 title: (<span>
             <Link href="#">JetProfile</Link>
             <span> </span>
-            <Badge gray>duplicate</Badge>
-          </span>)
+            <Tag>duplicate</Tag>
+          </span>),
             },
             {
                 id: 22,
@@ -65,29 +69,29 @@ const items = [
                     {
                         id: 221,
                         collapsible: true,
-                        title: <Link href="#">TeamCity</Link>
+                        title: <Link href="#">TeamCity</Link>,
                     },
                     {
                         id: 222,
                         collapsible: true,
-                        title: <Link href="#">YouTrack</Link>
+                        title: <Link href="#">YouTrack</Link>,
                     },
                     {
                         id: 223,
                         collapsible: true,
-                        title: <Link href="#">Sandbox</Link>
+                        title: <Link href="#">Sandbox</Link>,
                     },
                     {
                         id: 224,
                         collapsible: true,
-                        title: <Link href="#">Exception Analyzer</Link>
+                        title: <Link href="#">Exception Analyzer</Link>,
                     },
                     {
                         id: 225,
                         collapsible: true,
-                        title: <Link href="#">MPS</Link>
-                    }
-                ]
+                        title: <Link href="#">MPS</Link>,
+                    },
+                ],
             },
             {
                 id: 23,
@@ -95,13 +99,15 @@ const items = [
                 title: (<span>
             <Link href="#">CustomJDK</Link>
             <span>: as a member of ide-developers</span>
-          </span>)
-            }
-        ]
+          </span>),
+            },
+        ],
     },
     {
         id: 3,
-        title: <span><strong>Code Viewer</strong> in 5 projects</span>,
+        title: (<span>
+        <strong>Code Viewer</strong> in 5 projects
+      </span>),
         selectable: true,
         collapsible: true,
         items: [
@@ -111,7 +117,7 @@ const items = [
                 title: (<span>
             <Link href="#">ide-frontend</Link>
             <span>: as a member of ide-developers</span>
-          </span>)
+          </span>),
             },
             {
                 id: 32,
@@ -119,13 +125,15 @@ const items = [
                 title: (<span>
             <Link href="#">ide-frontend</Link>
             <span>: as a member of ide-frontend Code Viewers</span>
-          </span>)
-            }
-        ]
+          </span>),
+            },
+        ],
     },
     {
         id: 4,
-        title: <span><strong>Commenter</strong> in 12 projects</span>,
+        title: (<span>
+        <strong>Commenter</strong> in 12 projects
+      </span>),
         collapsible: true,
         items: [
             {
@@ -134,7 +142,7 @@ const items = [
                 title: (<span>
             <Link href="#">Intellij IDEA</Link>
             <span>: as a member of Registered Users</span>
-          </span>)
+          </span>),
             },
             {
                 id: 42,
@@ -142,9 +150,9 @@ const items = [
                 title: (<span>
             <Link href="#">YouTrack Backlog</Link>
             <span>: as a member of jetbrains-team</span>
-          </span>)
-            }
-        ]
+          </span>),
+            },
+        ],
     },
     {
         id: 5,
@@ -152,16 +160,16 @@ const items = [
         title: (<span>
         <strong>Developer</strong>
         <span> in 57 projects </span>
-        <Badge>team role</Badge>
+        <Tag>team role</Tag>
       </span>),
         items: [
             {
                 id: 51,
                 selectable: true,
                 collapsible: true,
-                title: <Link href="#">Wasabi</Link>
-            }
-        ]
+                title: <Link href="#">Wasabi</Link>,
+            },
+        ],
     },
     {
         id: 6,
@@ -171,14 +179,16 @@ const items = [
         <span> in project </span>
         <Link href="#">Hackathon 2016</Link>
         <span>: as a member of jetbrains-team</span>
-      </span>)
+      </span>),
     },
     {
         id: 7,
-        title: <span><strong>Git Hosting Checkout</strong> in 7 projects</span>,
+        title: (<span>
+        <strong>Git Hosting Checkout</strong> in 7 projects
+      </span>),
         selectable: true,
-        collapsible: true
-    }
+        collapsible: true,
+    },
 ];
 export const moreItems = [
     {
@@ -188,8 +198,8 @@ export const moreItems = [
         title: (<span>
         <Link href="#">More item 1</Link>
         <span> </span>
-        <Badge gray>duplicate</Badge>
-      </span>)
+        <Tag>duplicate</Tag>
+      </span>),
     },
     {
         id: 92,
@@ -198,8 +208,8 @@ export const moreItems = [
         title: (<span>
         <Link href="#">More item 2</Link>
         <span> </span>
-        <Badge gray>duplicate</Badge>
-      </span>)
-    }
+        <Tag>duplicate</Tag>
+      </span>),
+    },
 ];
 export default items;

package/components/data-list/item.js

@@ -22,7 +22,7 @@ export default class Item extends PureComponent {
         level: 0,
         parentShift: 0,
         showMoreLessButton: moreLessButtonStates.UNUSED,
-        onItemMoreLess: () => { }
+        onItemMoreLess: () => { },
     };
     onShowMore = () => {
         const { onItemMoreLess, item } = this.props;
@@ -46,19 +46,21 @@ export default class Item extends PureComponent {
         return (<Item key={item.key || item.id} item={model} title={item.title} items={item.items} level={level + 1} parentShift={parentShift} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={onFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={onSelect}/>);
     };
     render() {
-        const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand } = this.props;
+        const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand, } = this.props;
         let moreLessButton;
-        if (showMoreLessButton === moreLessButtonStates.MORE ||
-            showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
+        if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
             moreLessButton = (<Text info>
-          <Link inherit pseudo onClick={this.onShowMore}>{'Show more'}</Link>
-          {showMoreLessButton === moreLessButtonStates.MORE_LOADING &&
-                    <LoaderInline className={styles.showMoreLoader}/>}
+          <Link inherit pseudo onClick={this.onShowMore}>
+            {'Show more'}
+          </Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING && (<LoaderInline className={styles.showMoreLoader}/>)}
         </Text>);
         }
         else if (showMoreLessButton === moreLessButtonStates.LESS) {
             moreLessButton = (<Text info>
-          <Link inherit pseudo onClick={this.onShowLess}>{'Show less'}</Link>
+          <Link inherit pseudo onClick={this.onShowLess}>
+            {'Show less'}
+          </Link>
         </Text>);
         }
         let collapserExpander = null;
@@ -75,15 +77,11 @@ export default class Item extends PureComponent {
         return (<li>
         <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
 
-        {!itemIsEmpty
-                ? (<ul className={styles.itemContent}>
-              {items.map(model => this.renderItem(model, parentShift))}
+        {!itemIsEmpty ? (<ul className={styles.itemContent}>
+            {items.map(model => this.renderItem(model, parentShift))}
 
-              {showMoreLessButton !== moreLessButtonStates.UNUSED
-                        ? <li className={styles.showMore}>{moreLessButton}</li>
-                        : null}
-            </ul>)
-                : null}
+            {showMoreLessButton !== moreLessButtonStates.UNUSED ? (<li className={styles.showMore}>{moreLessButton}</li>) : null}
+          </ul>) : null}
       </li>);
     }
 }

package/components/data-list/selection.js

@@ -29,18 +29,16 @@ export default class Selection extends TableSelection {
         return result;
     }
     _selectDescendants(item, selected) {
-        this._getDescendants(this._getChildren(item)).
-            forEach(it => selected.add(it));
+        this._getDescendants(this._getChildren(item)).forEach(it => selected.add(it));
     }
     _deselectDescendants(item, selected) {
-        this._getDescendants(this._getChildren(item)).
-            forEach(it => selected.delete(it));
+        this._getDescendants(this._getChildren(item)).forEach(it => selected.delete(it));
     }
     _selectAncestors(item, selected) {
         this._getAncestors(item).forEach(ancestor => {
-            const groupIsSelected = this._getChildren(ancestor).
-                filter(it => this._isItemSelectable(it)).
-                every(it => selected.has(it));
+            const groupIsSelected = this._getChildren(ancestor)
+                .filter(it => this._isItemSelectable(it))
+                .every(it => selected.has(it));
             if (groupIsSelected) {
                 selected.add(ancestor);
             }

package/components/data-list/title.js

@@ -8,7 +8,7 @@ class Title extends PureComponent {
     static defaultProps = {
         selectable: false,
         selected: false,
-        showFocus: false
+        showFocus: false,
     };
     id = getUID('data-list-title');
     onCheckboxFocus = () => {
@@ -28,14 +28,13 @@ class Title extends PureComponent {
         const classes = classNames(className, {
             [styles.title]: true,
             [styles.titleFocused]: showFocus,
-            [styles.titleSelected]: selected
+            [styles.titleSelected]: selected,
         });
         return (<div id={this.id} className={classes} style={{ paddingLeft: offset }} ref={innerRef}>
         <div className={styles.boxes}>
-          {selectable &&
-                (<div className={styles.checkboxBox}>
-                <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
-              </div>)}
+          {selectable && (<div className={styles.checkboxBox}>
+              <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+            </div>)}
 
           {collapserExpander}
         </div>

package/components/date-picker/consts.js

@@ -5,7 +5,7 @@ const units = {
     /* eslint-disable @typescript-eslint/no-magic-numbers */
     cellSize: unit * 3,
     calHeight: unit * 36,
-    yearHeight: unit * 4
+    yearHeight: unit * 4,
     /* eslint-enable */
 };
 export default units;
@@ -19,7 +19,7 @@ export const weekdays = {
     TH: 4,
     FR: 5,
     SA: 6,
-    SU: 0
+    SU: 0,
 };
 export const MIDDLE_DAY = 15;
 const durationToMillis = (duration) => +add(0, duration);

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

@@ -46,7 +46,7 @@ export default class DateInput extends React.PureComponent {
         }
     };
     render() {
-        const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale, } = this.props;
         const { translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
@@ -70,9 +70,9 @@ export default class DateInput extends React.PureComponent {
                 case 'time':
                     return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return (translations?.selectName ?? translate('selectName')).
-                        replace('%name%', name).
-                        replace('{{name}}', name);
+                    return (translations?.selectName ?? translate('selectName'))
+                        .replace('%name%', name)
+                        .replace('{{name}}', name);
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');

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

@@ -1,11 +1,8 @@
 @import "../global/variables.css";
 @import "../global/global.css";
 
-@value cellSize: calc(var(--ring-unit) * 3);
-@value calHeight: calc(var(--ring-unit) * 36);
-@value calWidth: calc(var(--ring-unit) * 37);
-@value yearHeight: calc(var(--ring-unit) * 4);
-@value yearWidth: calc(var(--ring-unit) * 6);
+/* ensure styles order */
+@import "../input/input.css";
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
@@ -85,6 +82,12 @@
 }
 
 .datePopup {
+  --ring-date-picker-cell-size: calc(var(--ring-unit) * 3);
+  --ring-date-picker-cal-height: calc(var(--ring-unit) * 36);
+  --ring-date-picker-cal-width: calc(var(--ring-unit) * 37);
+  --ring-date-picker-year-height: calc(var(--ring-unit) * 4);
+  --ring-date-picker-year-width: calc(var(--ring-unit) * 6);
+
   width: min-content;
 
   user-select: none;
@@ -198,7 +201,7 @@
 .weekday.weekday {
   display: inline-block;
 
-  width: cellSize;
+  width: var(--ring-date-picker-cell-size);
 
   text-align: center;
   text-transform: capitalize;
@@ -213,8 +216,8 @@
 
   overflow: hidden;
 
-  width: calWidth;
-  height: calHeight;
+  width: var(--ring-date-picker-cal-width);
+  height: var(--ring-date-picker-cal-height);
 
   box-shadow: 0 -1px var(--ring-line-color);
 }
@@ -222,7 +225,7 @@
 .months.months {
   position: absolute;
   top: 0;
-  right: yearWidth;
+  right: var(--ring-date-picker-year-width);
   bottom: 0;
   left: 0;
 }
@@ -243,9 +246,9 @@
 .month.month > * {
   flex-shrink: 0;
 
-  height: cellSize;
+  height: var(--ring-date-picker-cell-size);
 
-  line-height: cellSize;
+  line-height: var(--ring-date-picker-cell-size);
 }
 
 .monthTitle {
@@ -275,12 +278,14 @@
 .day.day {
   position: relative;
 
-  flex-basis: cellSize;
+  flex-basis: var(--ring-date-picker-cell-size);
 
   margin: 0;
 
   cursor: pointer;
-  transition: background-color var(--ring-ease), color var(--ring-ease);
+  transition:
+    background-color var(--ring-ease),
+    color var(--ring-ease);
   text-align: center;
 
   &::before,
@@ -511,12 +516,12 @@
 
   width: 100%;
 
-  height: cellSize;
+  height: var(--ring-date-picker-cell-size);
   padding-left: calc(var(--ring-unit) * 1.5);
 
   text-transform: capitalize;
 
-  line-height: cellSize;
+  line-height: var(--ring-date-picker-cell-size);
 }
 
 .monthSlider {
@@ -563,7 +568,7 @@
   top: 0;
   right: 0;
 
-  width: yearWidth;
+  width: var(--ring-date-picker-year-width);
 
   background-color: var(--ring-content-background-color);
   box-shadow: -1px 0 var(--ring-line-color);
@@ -581,13 +586,13 @@
 
   width: 100%;
 
-  height: yearHeight;
+  height: var(--ring-date-picker-year-height);
 
   text-align: center;
 
   color: var(--ring-secondary-color);
 
-  line-height: yearHeight;
+  line-height: var(--ring-date-picker-year-height);
 }
 
 .currentYear.currentYear {

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 type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
@@ -28,6 +28,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

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

@@ -25,7 +25,7 @@ const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopu
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
-        Popup.PopupProps.Directions.TOP_RIGHT
+        Popup.PopupProps.Directions.TOP_RIGHT,
     ]} {...restProps} trapFocus>
     <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
@@ -66,14 +66,12 @@ export default class DatePicker extends PureComponent {
                 }
             }
             return null;
-        }
+        },
     };
     static contextType = I18nContext;
     handleChange = (change) => {
         const { onChange, withTime, applyTimeInput } = this.props;
-        const adjustedChange = withTime && !(change instanceof Date) && change?.date != null
-            ? applyTimeInput(change.date, change.time)
-            : change;
+        const adjustedChange = withTime && !(change instanceof Date) && change?.date != null ? applyTimeInput(change.date, change.time) : change;
         onChange(adjustedChange);
     };
     clear = () => {
@@ -109,23 +107,21 @@ export default class DatePicker extends PureComponent {
         return null;
     }
     getAnchorText = () => {
-        const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale } = this.props;
+        const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale, } = this.props;
         const { translate } = this.context;
         const date = this.parse(this.props.date);
         const from = this.parse(this.props.from);
         const to = this.parse(this.props.to);
         const time = this.formatTime();
         if (!range && !withTime) {
-            return date
-                ? displayFormat(date, locale)
-                : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
+            return date ? displayFormat(date, locale) : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
         }
         else if (!range && withTime) {
             if (!date && !time) {
                 return dateTimePlaceholder ?? translations?.setDateTime ?? translate('setDateTime');
             }
             else {
-                return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+                return `${(date && displayFormat(date, locale)) || '—'}, ${time || '—'}`;
             }
         }
         else if (from && to) {
@@ -160,21 +156,19 @@ export default class DatePicker extends PureComponent {
       </div>);
         const { className, popupClassName, clear, inline, dropdownProps, translations, ...datePopupProps } = this.props;
         const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
-            [styles.inline]: inline
+            [styles.inline]: inline,
         });
-        return (<Dropdown className={classes} disabled={this.props.disabled} data-test="ring-date-picker" anchor={inline
-                ? (<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}>
-                {anchorContent}
-              </Button>)} {...dropdownProps}>
+        return (<Dropdown className={classes} disabled={this.props.disabled} data-test="ring-date-picker" anchor={inline ? (<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} {...this.props.buttonAttributes}>
+              {anchorContent}
+            </Button>)} {...dropdownProps}>
         <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{
                 ...datePopupProps,
                 translations,
                 onChange: this.handleChange,
                 parseDateInput: this.parse,
-                time: this.formatTime()
+                time: this.formatTime(),
             }} onComplete={this.closePopup}/>
       </Dropdown>);
     }