@jetbrains/ring-ui 7.0.62 → 7.0.63

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

@@ -50,7 +50,7 @@ export default class DatePicker extends PureComponent {
         onChange() { },
         applyTimeInput(date, timeString) {
             const [hours, minutes] = timeString?.split(':').map(Number) ?? [];
-            return minutes != null ? set(date, { hours, minutes }) : date;
+            return minutes !== null && minutes !== undefined ? set(date, { hours, minutes }) : date;
         },
         parseDateInput(string) {
             if (!string) {
@@ -69,7 +69,9 @@ export default class DatePicker extends PureComponent {
     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 && change?.date !== undefined
+            ? applyTimeInput(change.date, change.time)
+            : change;
         onChange(adjustedChange);
     };
     clear = () => {
@@ -84,6 +86,7 @@ export default class DatePicker extends PureComponent {
         this.popup = el;
     };
     closePopup = () => {
+        // eslint-disable-next-line no-underscore-dangle
         this.popup?._onCloseAttempt();
     };
     parse = memoize((date) => {
@@ -99,11 +102,12 @@ export default class DatePicker extends PureComponent {
     formatTime() {
         const { displayTimeFormat, locale } = this.props;
         const date = this.parse(this.props.date);
-        if (date != null) {
+        if (date !== null && date !== undefined) {
             return displayTimeFormat(date, locale);
         }
         return null;
     }
+    // eslint-disable-next-line complexity
     getAnchorText = () => {
         const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale, } = this.props;
         const { translate } = this.context;
@@ -114,37 +118,31 @@ export default class DatePicker extends PureComponent {
         if (!range && !withTime) {
             return date ? displayFormat(date, locale) : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
         }
-        else if (!range && withTime) {
+        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) {
+        if (from && to) {
             if (!isSameYear(from, to)) {
                 return `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
             }
-            else if (!isSameMonth(from, to)) {
+            if (!isSameMonth(from, to)) {
                 return `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
             }
-            else if (!isSameDay(from, to)) {
+            if (!isSameDay(from, to)) {
                 return `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
             }
-            else {
-                return `${displayFormat(to, locale)}`;
-            }
+            return `${displayFormat(to, locale)}`;
         }
-        else if (from) {
+        if (from) {
             return `${displayFormat(from, locale)} —`;
         }
-        else if (to) {
+        if (to) {
             return `— ${displayFormat(to, locale)}`;
         }
-        else {
-            return rangePlaceholder ?? translations?.setPeriod ?? translate('setPeriod');
-        }
+        return rangePlaceholder ?? translations?.setPeriod ?? translate('setPeriod');
     };
     render() {
         const anchorContent = (_jsxs("div", { className: styles.anchorContent, children: [_jsx(Icon, { glyph: calendarIcon, className: styles.calendarIcon }), this.getAnchorText(), _jsx(Icon, { glyph: chevronDownIcon, className: styles.chevronDownIcon })] }));
@@ -152,7 +150,7 @@ export default class DatePicker extends PureComponent {
         const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
             [styles.inline]: inline,
         });
-        return (_jsx(Dropdown, { className: classes, disabled: this.props.disabled, "data-test": "ring-date-picker", anchor: inline ? (_jsx(Link, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, disabled: this.props.disabled ?? false, pseudo: true, children: this.getAnchorText() })) : (_jsx(Button, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, inline: false, disabled: this.props.disabled ?? false, ...this.props.buttonAttributes, children: anchorContent })), ...dropdownProps, children: _jsx(PopupComponent, { className: popupClassName, popupRef: this.popupRef, onClear: clear ? this.clear : null, datePopupProps: {
+        return (_jsx(Dropdown, { className: classes, disabled: this.props.disabled, "data-test": 'ring-date-picker', anchor: inline ? (_jsx(Link, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, disabled: this.props.disabled ?? false, pseudo: true, children: this.getAnchorText() })) : (_jsx(Button, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, inline: false, disabled: this.props.disabled ?? false, ...this.props.buttonAttributes, children: anchorContent })), ...dropdownProps, children: _jsx(PopupComponent, { className: popupClassName, popupRef: this.popupRef, onClear: clear ? this.clear : null, datePopupProps: {
                     ...datePopupProps,
                     translations,
                     onChange: this.handleChange,

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

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import * as React from 'react';
-import { DatePickerChange, DatePopupBaseProps, DateSpecificPopupProps, DatePopupState, RangeSpecificPopupProps, TimeSpecificPopupProps, Field } from './consts';
+import { type DatePickerChange, type DatePopupBaseProps, type DateSpecificPopupProps, type DatePopupState, type RangeSpecificPopupProps, type TimeSpecificPopupProps, type Field } from './consts';
 export type DatePopupProps = DatePopupBaseProps & (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps);
 export default class DatePopup extends Component<DatePopupProps, DatePopupState> {
     static sameDay(next: Date | number | null, prev: Date | number | null): boolean;

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

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+/* eslint-disable max-lines */
 import { Component } from 'react';
 import * as React from 'react';
 import { isAfter } from 'date-fns/isAfter';
@@ -244,6 +245,7 @@ export default class DatePopup extends Component {
         this.props.onClear?.(e);
         this.componentRef.current?.querySelector('input')?.focus();
     };
+    // eslint-disable-next-line complexity
     render() {
         const { range, withTime, locale } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
@@ -258,7 +260,7 @@ export default class DatePopup extends Component {
             };
         }, {});
         const activeDate = this.state.active !== 'time'
-            ? this.state.hoverDate || (this.state.text != null ? this.parse(this.state.text, 'date') : null)
+            ? this.state.hoverDate || (this.state.text ? this.parse(this.state.text, 'date') : null)
             : this.state.hoverDate || null;
         const currentRange = (range && dates.from && dates.to && [dates.from, dates.to]) || null;
         let activeRange = null;
@@ -298,12 +300,12 @@ export default class DatePopup extends Component {
             onScrollChange: this.scrollTo,
         };
         const clearable = Boolean(this.props.onClear);
-        return (_jsxs("div", { className: styles.datePopup, "data-test": "ring-date-popup", ref: this.componentRef, children: [_jsxs("div", { className: styles.filterWrapper, children: [names.map(name => {
+        return (_jsxs("div", { className: styles.datePopup, "data-test": 'ring-date-popup', ref: this.componentRef, children: [_jsxs("div", { className: styles.filterWrapper, children: [names.map(name => {
                             let onClear;
                             if (clearable && name !== 'from' && !this.isInTimeMode()) {
                                 onClear = this.onClear.bind(this);
                             }
-                            return (_createElement(DateInput, { ...this.props, ...this.state, divider: name === 'from' && (dates[name] != null || parsedTo != null), name: name, key: name, date: dates[name], active: this.state.active === name, onActivate: this.handleActivate(name), onInput: this.handleInput, onConfirm: this.handleConfirm(name), onClear: onClear, locale: locale }));
+                            return (_createElement(DateInput, { ...this.props, ...this.state, divider: name === 'from' && (!!dates[name] || !!parsedTo), name: name, key: name, date: dates[name], active: this.state.active === name, onActivate: this.handleActivate(name), onInput: this.handleInput, onConfirm: this.handleConfirm(name), onClear: onClear, locale: locale }));
                         }), this.isInTimeMode() ? (_createElement(DateInput, { ...this.props, text: this.state.text, divider: !!parsedDate, hoverDate: null, name: 'time', key: 'time', date: null, time: time, active: this.state.active === 'time', onActivate: this.handleActivate('time'), onInput: this.handleInput, onConfirm: this.handleConfirm('time'), onClear: (clearable && this.onClear) || undefined, locale: locale })) : ('')] }), _jsx(Weekdays, { locale: locale }), _jsxs("div", { className: styles.calendar, children: [_jsx(Months, { ...calendarProps, onHover: this.hoverHandler, onSelect: this.selectHandler, locale: locale }), _jsx(Years, { ...calendarProps })] }), this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)] }));
     }
 }

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { MonthsProps } from './consts';
+import { type MonthsProps } from './consts';
 export interface DayProps extends MonthsProps {
     day: Date;
     empty: boolean;
@@ -11,7 +11,7 @@ export default class Day extends Component<DayProps> {
     isDay: (date: Date) => boolean;
     is: (name: "date" | "from" | "to" | "activeDate") => boolean;
     inRange: (range: [Date, Date] | null) => boolean | null;
-    isDisabled: (date: Date) => boolean;
+    isDisabled: (date: Date) => boolean | null;
     parse(text: string | null | undefined): Date | null;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/date-picker/day.js

@@ -28,7 +28,7 @@ export default class Day extends Component {
     isDay = (date) => isSameDay(this.props.day, date);
     is = (name) => {
         const value = this.props[name];
-        return value != null && this.isDay(value);
+        return !!value && this.isDay(value);
     };
     inRange = (range) => range &&
         isAfter(startOfDay(this.props.day), startOfDay(range[0])) &&
@@ -36,8 +36,7 @@ export default class Day extends Component {
     isDisabled = (date) => {
         const min = this.parse(this.props.minDate);
         const max = this.parse(this.props.maxDate);
-        return ((min != null && isBefore(startOfDay(date), startOfDay(min))) ||
-            (max != null && isAfter(startOfDay(date), startOfDay(max))));
+        return (min && isBefore(startOfDay(date), startOfDay(min))) || (max && isAfter(startOfDay(date), startOfDay(max)));
     };
     parse(text) {
         return this.props.parseDateInput(text);
@@ -50,11 +49,11 @@ export default class Day extends Component {
             return range && [range[0], addDays(range[1], 1)];
         }
         const spreadRange = makeSpreadRange(currentRange);
-        const disabled = this.isDisabled(day);
+        const disabled = !!this.isDisabled(day);
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work
-        _jsx("button", { type: "button", className: classNames(styles.day, styles[`Day${dayInWeek}`], {
+        _jsx("button", { type: 'button', className: classNames(styles.day, styles[`Day${dayInWeek}`], {
                 [styles.current]: ['date', 'from', 'to'].some(this.is),
                 [styles.active]: !disabled && this.is('activeDate'),
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),

package/components/date-picker/formats.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 export default [
     'd M',
     'dd M',

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

@@ -1,2 +1,2 @@
-import { MonthsProps } from './consts';
+import { type MonthsProps } from './consts';
 export default function MonthNames(props: MonthsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@ class MonthName extends PureComponent {
     };
     render() {
         const { month, locale } = this.props;
-        return (_jsx("button", { type: "button", className: classNames(styles.monthName, {
+        return (_jsx("button", { type: 'button', className: classNames(styles.monthName, {
                 [styles.today]: isThisMonth(month),
             }), onClick: this.handleClick, children: format(month, 'LLL', { locale }) }));
     }

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

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
-import { LinearFunction } from '../global/linear-function';
-import { MonthsProps } from './consts';
+import { type LinearFunction } from '../global/linear-function';
+import { type MonthsProps } from './consts';
 export interface MonthSliderProps extends MonthsProps {
     pxToDate: LinearFunction;
 }

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

@@ -39,7 +39,7 @@ export default class MonthSlider extends PureComponent {
             years.push(year);
         }
         const classes = classNames(styles.monthSlider, { [styles.dragging]: this.state.dragging });
-        return (_jsx("div", { children: years.map(date => (_jsx("button", { type: "button", className: classes, style: {
+        return (_jsx("div", { children: years.map(date => (_jsx("button", { type: 'button', className: classes, style: {
                     top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize),
                 }, onMouseDown: this.onMouseDown }, +date))) }));
     }

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

@@ -1,4 +1,4 @@
-import { MonthsProps } from './consts';
+import { type MonthsProps } from './consts';
 export interface MonthProps extends MonthsProps {
     month: Date;
 }

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

@@ -1,2 +1,2 @@
-import { MonthsProps } from './consts';
+import { type MonthsProps } from './consts';
 export default function Months(props: MonthsProps): import("react/jsx-runtime").JSX.Element;

package/components/date-picker/months.js

@@ -74,11 +74,11 @@ export default function Months(props) {
     });
     useEffect(() => {
         const current = componentRef.current;
-        if (current !== null) {
+        if (current) {
             current.addEventListener('wheel', handleWheel, { passive: false });
         }
         return () => {
-            if (current !== null) {
+            if (current) {
                 current.removeEventListener('wheel', handleWheel);
             }
         };

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

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { CalendarProps } from './consts';
+import { type CalendarProps } from './consts';
 interface YearsState {
     scrollDate: Date | null;
 }

package/components/date-picker/years.js

@@ -24,7 +24,7 @@ export default class Years extends PureComponent {
         }
     }
     componentDidUpdate(prevProps, prevState) {
-        this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
+        this.stoppedScrolling = !!prevState.scrollDate && !this.state.scrollDate;
     }
     componentWillUnmount() {
         if (this.componentRef.current) {
@@ -68,7 +68,7 @@ export default class Years extends PureComponent {
         return (_jsx("div", { className: styles.years, ref: this.componentRef, style: {
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
                 top: Math.floor(calHeight * HALF - pxToDate.x(Number(date))),
-            }, children: years.map(item => (_jsx("button", { type: "button", className: classNames(styles.year, {
+            }, children: years.map(item => (_jsx("button", { type: 'button', className: classNames(styles.year, {
                     [styles.currentYear]: isSameYear(item, date),
                     [styles.today]: isThisYear(item),
                 }), onClick: function handleClick() {

package/components/dialog/{dialog__body-scroll-preventer.js → dialog-body-scroll-preventer.js}

@@ -16,7 +16,11 @@ const prevent = (key) => {
     const scrollWidth = scrollbarWidth();
     const { scrollbarGutter } = getComputedStyle(document.documentElement);
     const documentHasScrollbarGutter = scrollbarGutter === 'stable' || scrollbarGutter === 'both-edges';
-    if (documentHasScroll && scrollWidth != null && scrollWidth > 0 && !documentHasScrollbarGutter) {
+    if (documentHasScroll &&
+        scrollWidth !== null &&
+        scrollWidth !== undefined &&
+        scrollWidth > 0 &&
+        !documentHasScrollbarGutter) {
         previousDocumentWidth = document.documentElement.style.width;
         document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
     }
@@ -30,7 +34,7 @@ const reset = (key) => {
         return;
     }
     document.documentElement.classList.remove(styles.documentWithoutScroll);
-    if (previousDocumentWidth !== null) {
+    if (previousDocumentWidth !== null && previousDocumentWidth !== undefined) {
         document.documentElement.style.width = previousDocumentWidth;
         previousDocumentWidth = null;
     }

package/components/dialog/dialog.css

@@ -1,7 +1,7 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
-@value header, scrollableWrapper from "../island/island.css";
-@value panel from "../panel/panel.css";
+@value header, scrollableWrapper from '../island/island.css';
+@value panel from '../panel/panel.css';
 
 .container {
   position: fixed;
@@ -24,7 +24,7 @@
 
   padding: 0;
 
-  border: none;
+  border: 0;
   background: transparent;
 }
 
@@ -58,7 +58,7 @@
     margin-top: 0;
     padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) calc(var(--ring-unit) * 4);
 
-    border-top: none;
+    border-top: 0;
 
     background-color: transparent;
   }

package/components/dialog/dialog.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import * as React from 'react';
-import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
+import TabTrap, { type TabTrapProps } from '../tab-trap/tab-trap';
 import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;

package/components/dialog/dialog.js

@@ -11,7 +11,7 @@ import TabTrap from '../tab-trap/tab-trap';
 import Button from '../button/button';
 import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
 import { getPopupContainer } from '../popup/popup';
-import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
+import { preventerFactory as scrollPreventerFactory } from './dialog-body-scroll-preventer';
 import styles from './dialog.css';
 /**
  * @name Dialog
@@ -58,7 +58,7 @@ export default class Dialog extends PureComponent {
     uid = getUID('dialog-');
     toggleNativeDialog() {
         const { show, modal } = this.props;
-        if (this.nativeDialog.current != null) {
+        if (this.nativeDialog.current) {
             if (show) {
                 this.nativeDialog.current.removeAttribute('open');
                 if (modal) {
@@ -114,9 +114,9 @@ export default class Dialog extends PureComponent {
         const shortcutsMap = this.getShortcutsMap();
         const content = (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: this.state.shortcutsScope, options: this.props.shortcutOptions }), (onOverlayClick !== noop || onCloseAttempt !== noop) && (_jsx("div", { 
                     // click handler is duplicated in close button
-                    role: "presentation", className: styles.clickableOverlay, onClick: this.handleClick, "data-test": "ring-dialog-overlay" })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, {
+                    role: 'presentation', className: styles.clickableOverlay, onClick: this.handleClick, "data-test": 'ring-dialog-overlay' })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, {
                             [styles.dense]: dense,
-                        }), "data-test": "ring-dialog", role: "dialog", "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": "ring-dialog-close-button", className: classNames(styles.closeButton, {
+                        }), "data-test": 'ring-dialog', role: 'dialog', "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": 'ring-dialog-close-button', className: classNames(styles.closeButton, {
                                     [styles.closeButtonOutside]: !closeButtonInside,
                                     [styles.closeButtonInside]: closeButtonInside,
                                 }), iconClassName: classNames(styles.closeIcon, {
@@ -131,13 +131,13 @@ export default class Dialog extends PureComponent {
                 if (portalTarget instanceof HTMLElement) {
                     targetElement = portalTarget;
                 }
-                else if (contextTarget != null) {
+                else if (contextTarget) {
                     const container = getPopupContainer(contextTarget);
-                    if (container != null) {
+                    if (container) {
                         targetElement = container;
                     }
                 }
-                return createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), "data-rg-modal-dialog-container": "", ref: this.dialogRef, className: classes, role: "presentation", ...restProps, children: [content, target] })) }), targetElement);
+                return createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), "data-rg-modal-dialog-container": '', ref: this.dialogRef, className: classes, role: 'presentation', ...restProps, children: [content, target] })) }), targetElement);
             } })));
     }
 }

package/components/dropdown/anchor.d.ts

@@ -1,3 +1,3 @@
-import { ButtonAttrs } from '../button/button';
+import { type ButtonAttrs } from '../button/button';
 declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: ButtonAttrs) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/components/dropdown/dropdown.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 .dropdown {
   display: inline-block;

package/components/dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
-import { Component, HTMLAttributes, ReactNode, ReactElement } from 'react';
+import { Component, type HTMLAttributes, type ReactNode, type ReactElement } from 'react';
 import * as React from 'react';
-import { PopupAttrs } from '../popup/popup';
+import { type PopupAttrs } from '../popup/popup';
 import Anchor from './anchor';
 export interface AnchorProps {
     active: boolean;

package/components/dropdown/dropdown.js

@@ -99,7 +99,7 @@ export default class Dropdown extends Component {
         const { show, pinned } = this.state;
         const { initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut, children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest, disabled, ...restProps } = this.props;
         const classes = classNames(styles.dropdown, className, {
-            [activeClassName ?? '']: activeClassName != null && show,
+            [activeClassName ?? '']: activeClassName && show,
         });
         let anchorElement;
         const active = hoverMode ? pinned : show;
@@ -127,7 +127,7 @@ export default class Dropdown extends Component {
         };
         return (_jsxs("div", { "data-test": dataTests('ring-dropdown', dataTest), ...restProps, onClick: clickMode ? this.onClick : undefined, 
             // anchorElement should be a `button` or an `a`
-            role: "presentation", onMouseEnter: hoverMode ? this.onMouseEnter : undefined, onMouseLeave: hoverMode ? this.onMouseLeave : undefined, className: classes, children: [anchorElement, typeof children === 'function'
+            role: 'presentation', onMouseEnter: hoverMode ? this.onMouseEnter : undefined, onMouseLeave: hoverMode ? this.onMouseLeave : undefined, className: classes, children: [anchorElement, typeof children === 'function'
                     ? children(childProps)
                     : cloneElement(children, childProps)] }));
     }

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,8 +1,8 @@
-import { ReactElement, HTMLAttributes, SyntheticEvent, Ref, ReactNode } from 'react';
-import { SelectHandlerParams } from '../list/list';
-import { AnchorProps, DropdownAttrs, DropdownChildrenFunction } from '../dropdown/dropdown';
-import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
-import { ListDataItem } from '../list/consts';
+import { type ReactElement, type HTMLAttributes, type SyntheticEvent, type Ref, type ReactNode } from 'react';
+import { type SelectHandlerParams } from '../list/list';
+import { type AnchorProps, type DropdownAttrs, type DropdownChildrenFunction } from '../dropdown/dropdown';
+import PopupMenu, { type PopupMenuAttrs } from '../popup-menu/popup-menu';
+import { type ListDataItem } from '../list/consts';
 export interface DropdownAnchorWrapperProps extends AnchorProps {
     anchor: ReactElement | ReactNode[] | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
     activeListItemId?: string | null | undefined;

package/components/dropdown-menu/dropdown-menu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, cloneElement } from 'react';
+import { forwardRef, useMemo, cloneElement, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';

package/components/editable-heading/editable-heading.css

@@ -26,7 +26,7 @@
 
   color: inherit;
 
-  border: none;
+  border: 0;
   border-radius: var(--ring-border-radius);
   outline: none;
   background: inherit;
@@ -95,7 +95,7 @@
   color: var(--ring-heading-color);
   caret-color: var(--ring-main-color);
 
-  border: none;
+  border: 0;
   border-bottom: 1px solid var(--ring-borders-color);
   outline: none;
   background-color: transparent;
@@ -143,14 +143,12 @@
   width: 100%;
   height: 30px;
 
-  content: "";
+  content: '';
   pointer-events: none;
 
-  background: linear-gradient(
-    to bottom,
-    rgba(var(--ring-content-background-components), 0),
-    rgba(var(--ring-content-background-components), 1)
-  );
+  background: linear-gradient(to bottom,
+  rgba(var(--ring-content-background-components), 0),
+  rgba(var(--ring-content-background-components), 1));
 }
 
 .textareaWrapper {

package/components/editable-heading/editable-heading.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { type InputHTMLAttributes } from 'react';
 import * as React from 'react';
 import { Levels } from '../heading/heading';
 import { Size } from '../input/input';

package/components/editable-heading/editable-heading.js

@@ -12,6 +12,7 @@ import styles from './editable-heading.css';
 export { Levels };
 export { Size };
 function noop() { }
+// eslint-disable-next-line complexity
 export const EditableHeading = (props) => {
     const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputRows, translations = {
         save: 'Save',
@@ -57,7 +58,7 @@ export const EditableHeading = (props) => {
         el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
     }, []);
     const checkValue = useCallback((el) => {
-        if (multiline && el != null && el.scrollHeight >= el.clientHeight) {
+        if (multiline && el && el.scrollHeight >= el.clientHeight) {
             stretch(el);
         }
     }, [stretch, multiline]);
@@ -111,6 +112,6 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mouseup', onMouseUp);
         };
     }, [onMouseMove, onMouseUp]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes, children: [!disabled && isEditing ? (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: shortcutsScope, disabled: isShortcutsDisabled }), !multiline ? (_jsx("input", { className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur })) : (_jsxs("div", { className: classNames(styles.textareaWrapper, inputStyles[`size${size}`]), children: [_jsx("textarea", { ref: textAreaRef, className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onInputChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur, onScroll: onInputScroll, style: { maxHeight: maxInputRows ? `${maxInputRows}lh` : '' } }), !isScrolledToBottom && _jsx("div", { className: styles.textareaFade })] }))] })) : (_jsx("button", { type: "button", className: styles.headingWrapperButton, onMouseDown: onHeadingMouseDown, children: _jsx(Heading, { className: headingClasses, level: level, "data-test": dataTest, children: children }) })), !isEditing && renderMenu(), isEditing && !embedded && (_jsxs(_Fragment, { children: [_jsx(Button, { className: styles.button, primary: true, disabled: isSaveDisabled, loader: isSaving, onClick: onSave, children: translations.save }), _jsx(Button, { className: styles.button, disabled: isCancelDisabled, onClick: onCancel, children: translations.cancel })] }))] }), isEditing && error && _jsx("div", { className: classNames(styles.errorText, inputStyles[`size${size}`]), children: error })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes, children: [!disabled && isEditing ? (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: shortcutsScope, disabled: isShortcutsDisabled }), !multiline ? (_jsx("input", { className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur })) : (_jsxs("div", { className: classNames(styles.textareaWrapper, inputStyles[`size${size}`]), children: [_jsx("textarea", { ref: textAreaRef, className: inputClasses, value: children, autoFocus: autoFocus, "data-test": dataTest, disabled: isSaving, onChange: onInputChange, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur, onScroll: onInputScroll, style: { maxHeight: maxInputRows ? `${maxInputRows}lh` : '' } }), !isScrolledToBottom && _jsx("div", { className: styles.textareaFade })] }))] })) : (_jsx("button", { type: 'button', className: styles.headingWrapperButton, onMouseDown: onHeadingMouseDown, children: _jsx(Heading, { className: headingClasses, level: level, "data-test": dataTest, children: children }) })), !isEditing && renderMenu(), isEditing && !embedded && (_jsxs(_Fragment, { children: [_jsx(Button, { className: styles.button, primary: true, disabled: isSaveDisabled, loader: isSaving, onClick: onSave, children: translations.save }), _jsx(Button, { className: styles.button, disabled: isCancelDisabled, onClick: onCancel, children: translations.cancel })] }))] }), isEditing && error && _jsx("div", { className: classNames(styles.errorText, inputStyles[`size${size}`]), children: error })] }));
 };
 export default React.memo(EditableHeading);

package/components/error-bubble/error-bubble-legacy.css

@@ -44,12 +44,12 @@
   width: var(--ring-unit);
   height: var(--ring-unit);
 
-  content: "";
+  content: '';
   transform: rotate(45deg);
 
   border: 1px solid var(--ring-popup-border-color);
-  border-top: none;
-  border-right: none;
+  border-top: 0;
+  border-right: 0;
 
   background: var(--ring-error-bubble-background-color);
 }

package/components/error-bubble/error-bubble.css

@@ -1,4 +1,4 @@
-@import "../global/variables.css";
+@import '../global/variables.css';
 
 :root,
 :host {
@@ -14,7 +14,7 @@
 
   margin-left: 2px;
 
-  border: none;
+  border: 0;
 
   box-shadow: none;
 }
@@ -52,11 +52,11 @@
   width: var(--ring-unit);
   height: var(--ring-unit);
 
-  content: "";
+  content: '';
   transform: rotate(45deg);
 
   border: 1px solid var(--ring-popup-border-color);
-  border-top: none;
-  border-right: none;
+  border-top: 0;
+  border-right: 0;
   background: var(--ring-error-bubble-background-color);
 }

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

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import { PureComponent, type ReactElement } from 'react';
 export type ErrorBubbleProps<P> = Partial<P> & {
     className?: string | null | undefined;
     children?: ReactElement<P> | ReactElement<P>[];

package/components/error-bubble/error-bubble.figma.js

@@ -1,5 +1,5 @@
 // url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=1228-2869
-const figma = require('figma');
+import figma from '@figma/code-connect';
 
 const instance = figma.selectedInstance;
 const error = instance.findLayers(() => true)[0].textContent;

package/components/error-bubble/error-bubble.js

@@ -11,7 +11,7 @@ export default class ErrorBubble extends PureComponent {
     render() {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
-        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [children &&
-                    Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
+        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": 'ring-error-bubble-wrapper', children: [children &&
+                    Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": 'ring-error-bubble', children: restProps.error }) }))] }));
     }
 }