@jetbrains/ring-ui 7.0.72 → 7.0.74

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

@@ -0,0 +1,215 @@
+import Link from '../link/link';
+import Tag from '../tag/tag';
+const items = [
+    {
+        id: 1,
+        title: (<span>
+        <strong>Assigner</strong> in 60 projects
+      </span>),
+        collapsible: true,
+        selectable: true,
+        items: [
+            {
+                id: 11,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                selectable: true,
+                items: [
+                    {
+                        id: 111,
+                        selectable: true,
+                        title: <Link href='#'>TeamCity</Link>,
+                    },
+                    {
+                        id: 112,
+                        selectable: true,
+                        title: <Link href='#'>YouTrack</Link>,
+                    },
+                    {
+                        id: 113,
+                        selectable: true,
+                        title: <Link href='#'>Sandbox</Link>,
+                    },
+                    {
+                        id: 114,
+                        selectable: true,
+                        title: <Link href='#'>Exception Analyzer</Link>,
+                    },
+                    {
+                        id: 115,
+                        selectable: true,
+                        title: <Link href='#'>MPS</Link>,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        title: (<span>
+        <strong>Code Reviewer</strong> in 5 projects
+      </span>),
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 21,
+                selectable: true,
+                title: (<span>
+            <Link href='#'>JetProfile</Link>
+            <span> </span>
+            <Tag>duplicate</Tag>
+          </span>),
+            },
+            {
+                id: 22,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                items: [
+                    {
+                        id: 221,
+                        collapsible: true,
+                        title: <Link href='#'>TeamCity</Link>,
+                    },
+                    {
+                        id: 222,
+                        collapsible: true,
+                        title: <Link href='#'>YouTrack</Link>,
+                    },
+                    {
+                        id: 223,
+                        collapsible: true,
+                        title: <Link href='#'>Sandbox</Link>,
+                    },
+                    {
+                        id: 224,
+                        collapsible: true,
+                        title: <Link href='#'>Exception Analyzer</Link>,
+                    },
+                    {
+                        id: 225,
+                        collapsible: true,
+                        title: <Link href='#'>MPS</Link>,
+                    },
+                ],
+            },
+            {
+                id: 23,
+                collapsible: true,
+                title: (<span>
+            <Link href='#'>CustomJDK</Link>
+            <span>: as a member of ide-developers</span>
+          </span>),
+            },
+        ],
+    },
+    {
+        id: 3,
+        title: (<span>
+        <strong>Code Viewer</strong> in 5 projects
+      </span>),
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 31,
+                collapsible: true,
+                title: (<span>
+            <Link href='#'>ide-frontend</Link>
+            <span>: as a member of ide-developers</span>
+          </span>),
+            },
+            {
+                id: 32,
+                collapsible: true,
+                title: (<span>
+            <Link href='#'>ide-frontend</Link>
+            <span>: as a member of ide-frontend Code Viewers</span>
+          </span>),
+            },
+        ],
+    },
+    {
+        id: 4,
+        title: (<span>
+        <strong>Commenter</strong> in 12 projects
+      </span>),
+        collapsible: true,
+        items: [
+            {
+                id: 41,
+                collapsible: true,
+                title: (<span>
+            <Link href='#'>Intellij IDEA</Link>
+            <span>: as a member of Registered Users</span>
+          </span>),
+            },
+            {
+                id: 42,
+                collapsible: true,
+                title: (<span>
+            <Link href='#'>YouTrack Backlog</Link>
+            <span>: as a member of jetbrains-team</span>
+          </span>),
+            },
+        ],
+    },
+    {
+        id: 5,
+        collapsible: true,
+        title: (<span>
+        <strong>Developer</strong>
+        <span> in 57 projects </span>
+        <Tag>team role</Tag>
+      </span>),
+        items: [
+            {
+                id: 51,
+                selectable: true,
+                collapsible: true,
+                title: <Link href='#'>Wasabi</Link>,
+            },
+        ],
+    },
+    {
+        id: 6,
+        collapsible: true,
+        title: (<span>
+        <strong>Git Hosting Admin</strong>
+        <span> in project </span>
+        <Link href='#'>Hackathon 2016</Link>
+        <span>: as a member of jetbrains-team</span>
+      </span>),
+    },
+    {
+        id: 7,
+        title: (<span>
+        <strong>Git Hosting Checkout</strong> in 7 projects
+      </span>),
+        selectable: true,
+        collapsible: true,
+    },
+];
+export const moreItems = [
+    {
+        id: 91,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href='#'>More item 1</Link>
+        <span> </span>
+        <Tag>duplicate</Tag>
+      </span>),
+    },
+    {
+        id: 92,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href='#'>More item 2</Link>
+        <span> </span>
+        <Tag>duplicate</Tag>
+      </span>),
+    },
+];
+export default items;

package/components/data-list/item.d.ts

@@ -47,6 +47,6 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
     onShowLess: () => void;
     onFocus: () => void;
     onSelect: (selected: boolean) => void;
-    renderItem: (model: T, parentShift: number) => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
+    renderItem: (model: T, parentShift: number) => import("react").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/data-list/{item.js → item.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import chevronRightIcon from '@jetbrains/icons/chevron-right';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
@@ -44,28 +43,45 @@ export default class Item extends PureComponent {
     renderItem = (model, parentShift) => {
         const { onFocus, onSelect, selection, level, itemFormatter } = this.props;
         const item = itemFormatter(model);
-        return (_jsx(Item, { 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), partialSelected: selection.isPartialSelected(model), onSelect: onSelect }, item.key || item.id));
+        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)} partialSelected={selection.isPartialSelected(model)} onSelect={onSelect}/>);
     };
     render() {
         const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, partialSelected, collapsible, collapsed, onCollapse, onExpand, } = this.props;
         let moreLessButton;
         if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
-            moreLessButton = (_jsxs(Text, { info: true, size: Text.Size.S, children: [_jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowMore, children: 'Show more' }), showMoreLessButton === moreLessButtonStates.MORE_LOADING && (_jsx(LoaderInline, { className: styles.showMoreLoader }))] }));
+            moreLessButton = (<Text info size={Text.Size.S}>
+          <Link inherit pseudo onClick={this.onShowMore}>
+            {'Show more'}
+          </Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING && (<LoaderInline className={styles.showMoreLoader}/>)}
+        </Text>);
         }
         else if (showMoreLessButton === moreLessButtonStates.LESS) {
-            moreLessButton = (_jsx(Text, { info: true, size: Text.Size.S, children: _jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowLess, children: 'Show less' }) }));
+            moreLessButton = (<Text info size={Text.Size.S}>
+          <Link inherit pseudo onClick={this.onShowLess}>
+            {'Show less'}
+          </Link>
+        </Text>);
         }
         let collapserExpander = null;
         if (collapsible) {
             if (collapsed) {
-                collapserExpander = (_jsx(Button, { title: 'Expand', onClick: onExpand, icon: chevronRightIcon, className: styles.collapseButton, iconClassName: styles.collapseIcon, "data-test": 'ring-data-list-expand' }));
+                collapserExpander = (<Button title='Expand' onClick={onExpand} icon={chevronRightIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test='ring-data-list-expand'/>);
             }
             else {
-                collapserExpander = (_jsx(Button, { title: 'Collapse', onClick: onCollapse, icon: chevronDownIcon, className: styles.collapseButton, iconClassName: styles.collapseIcon, "data-test": 'ring-data-list-collapse' }));
+                collapserExpander = (<Button title='Collapse' onClick={onCollapse} icon={chevronDownIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test='ring-data-list-collapse'/>);
             }
         }
         const itemIsEmpty = !items?.length || (collapsible && collapsed);
         const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
-        return (_jsxs("li", { children: [_jsx(Title, { title: title, focused: showFocus, showFocus: showFocus, selectable: selectable, selected: selected, partialSelected: partialSelected, collapserExpander: collapserExpander, onFocus: this.onFocus, onSelect: this.onSelect, offset: offset }), !itemIsEmpty ? (_jsxs("ul", { className: styles.itemContent, children: [items.map(model => this.renderItem(model, parentShift)), showMoreLessButton !== moreLessButtonStates.UNUSED ? (_jsx("li", { className: styles.showMore, children: moreLessButton })) : null] })) : null] }));
+        return (<li>
+        <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} partialSelected={partialSelected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
+
+        {!itemIsEmpty ? (<ul className={styles.itemContent}>
+            {items.map(model => this.renderItem(model, parentShift))}
+
+            {showMoreLessButton !== moreLessButtonStates.UNUSED ? (<li className={styles.showMore}>{moreLessButton}</li>) : null}
+          </ul>) : null}
+      </li>);
     }
 }

package/components/data-list/title.d.ts

@@ -21,7 +21,7 @@ declare class Title extends PureComponent<TitleProps> {
     onCheckboxFocus: () => void;
     onCheckboxChange: () => void;
     toggleSelection(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 declare const _default: import("react").ComponentClass<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>, any>;
 export default _default;

package/components/data-list/{title.js → title.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';
@@ -31,7 +30,17 @@ class Title extends PureComponent {
             [styles.titleFocused]: showFocus,
             [styles.titleSelected]: selected,
         });
-        return (_jsxs("div", { id: this.id, className: classes, style: { paddingLeft: offset }, ref: innerRef, children: [_jsxs("div", { className: styles.boxes, children: [selectable && (_jsx("div", { className: styles.checkboxBox, children: _jsx(Checkbox, { "aria-labelledby": this.id, className: showFocus ? 'ring-checkbox_focus' : '', checked: selected, indeterminate: partialSelected, onFocus: this.onCheckboxFocus, onChange: this.onCheckboxChange, tabIndex: -1 }) })), collapserExpander] }), title] }));
+        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} indeterminate={partialSelected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+            </div>)}
+
+          {collapserExpander}
+        </div>
+
+        {title}
+      </div>);
     }
 }
 export default focusSensorHOC(Title);

package/components/date-picker/consts.js

@@ -2,7 +2,7 @@ import { add } from 'date-fns/add';
 const unit = 8; // px;
 const units = {
     unit,
-    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    /* eslint-disable no-magic-numbers */
     cellSize: unit * 3,
     calHeight: unit * 36,
     yearHeight: unit * 4,

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

@@ -24,5 +24,5 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
     updateInput({ text, active }: UpdateInputConfig): void;
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/date-picker/{date-input.js → date-input.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import classNames from 'classnames';
 import Input from '../input/input';
@@ -77,6 +76,6 @@ export default class DateInput extends React.PureComponent {
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
-        return (_jsx(Input, { autoComplete: 'off', borderless: true, height: ControlsHeight.L, "data-name": name, inputRef: this.inputRef, className: classes, value: displayText, onChange: this.handleChange, onFocus: onActivate, onKeyDown: this.handleKeyDown, onClear: onClear, placeholder: placeholder }));
+        return (<Input autoComplete='off' borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
     }
 }

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

@@ -45,6 +45,6 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
     parse: (arg: string | number | Date | null | undefined) => Date | null;
     formatTime(): string | null;
     getAnchorText: () => string;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }
 export type DatePickerAttrs = React.JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

package/components/date-picker/{date-picker.js → date-picker.jsx}

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { format as formatDate } from 'date-fns/format';
 import { isSameDay } from 'date-fns/isSameDay';
@@ -19,14 +19,16 @@ import Link from '../link/link';
 import { Size } from '../input/input';
 import { I18nContext } from '../i18n/i18n-context';
 import DatePopup from './date-popup';
-import styles from './date-picker.css';
 import formats from './formats';
-const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (_jsx(Popup, { hidden: hidden, className: className, ref: popupRef, directions: [
+import styles from './date-picker.css';
+const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} className={className} ref={popupRef} directions={[
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
         Popup.PopupProps.Directions.TOP_RIGHT,
-    ], ...restProps, trapFocus: true, children: _jsx(DatePopup, { onClear: onClear, ...datePopupProps, onComplete: onComplete }) }));
+    ]} {...restProps} trapFocus>
+    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
+  </Popup>);
 /**
  * @name Date Picker
  */
@@ -143,17 +145,27 @@ export default class DatePicker extends PureComponent {
         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 })] }));
+        const anchorContent = (<div className={styles.anchorContent}>
+        <Icon glyph={calendarIcon} className={styles.calendarIcon}/>
+        {this.getAnchorText()}
+        <Icon glyph={chevronDownIcon} className={styles.chevronDownIcon}/>
+      </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,
         });
-        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,
-                    parseDateInput: this.parse,
-                    time: this.formatTime(),
-                }, onComplete: this.closePopup }) }));
+        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} inline={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(),
+            }} onComplete={this.closePopup}/>
+      </Dropdown>);
     }
 }

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

@@ -30,5 +30,5 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
     selectHandler: (date: Date) => void;
     handleScroll: (scrollDate: number) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/date-picker/{date-popup.js → date-popup.jsx}

@@ -1,5 +1,3 @@
-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';
@@ -300,12 +298,25 @@ 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 => {
-                            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] || !!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)] }));
+        return (<div className={styles.datePopup} data-test='ring-date-popup' ref={this.componentRef}>
+        <div className={styles.filterWrapper}>
+          {names.map(name => {
+                let onClear;
+                if (clearable && name !== 'from' && !this.isInTimeMode()) {
+                    onClear = this.onClear.bind(this);
+                }
+                return (<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() ? (<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}/>) : ('')}
+        </div>
+        <Weekdays locale={locale}/>
+        <div className={styles.calendar}>
+          <Months {...calendarProps} onHover={this.hoverHandler} onSelect={this.selectHandler} locale={locale}/>
+          <Years {...calendarProps}/>
+        </div>
+
+        {this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)}
+      </div>);
     }
 }

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

@@ -13,5 +13,5 @@ export default class Day extends Component<DayProps> {
     inRange: (range: [Date, Date] | null) => boolean | null;
     isDisabled: (date: Date) => boolean;
     parse(text: string | null | undefined): Date | null;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/date-picker/{day.js → day.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import { addDays } from 'date-fns/addDays';
@@ -53,7 +52,7 @@ export default class Day extends Component {
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work
-        _jsx("button", { type: 'button', className: classNames(styles.day, styles[`Day${dayInWeek}`], {
+        <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)),
@@ -66,6 +65,8 @@ export default class Day extends Component {
                 [styles.spread]: this.inRange(spreadRange),
                 [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
                 [styles.disabled]: disabled,
-            }), onClick: this.handleClick, onMouseOver: this.handleMouseOver, onFocus: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleMouseOut, disabled: disabled, children: empty || _jsx("span", { className: classNames({ [styles.today]: isToday(day) }), children: format(day, 'd') }) }));
+            })} onClick={this.handleClick} onMouseOver={this.handleMouseOver} onFocus={this.handleMouseOver} onMouseOut={this.handleMouseOut} onBlur={this.handleMouseOut} disabled={disabled}>
+        {empty || <span className={classNames({ [styles.today]: isToday(day) })}>{format(day, 'd')}</span>}
+      </button>);
     }
 }

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

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

package/components/date-picker/{month-names.js → month-names.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { endOfMonth } from 'date-fns/endOfMonth';
@@ -18,9 +17,11 @@ class MonthName extends PureComponent {
     };
     render() {
         const { month, locale } = this.props;
-        return (_jsx("button", { type: 'button', className: classNames(styles.monthName, {
+        return (<button type='button' className={classNames(styles.monthName, {
                 [styles.today]: isThisMonth(month),
-            }), onClick: this.handleClick, children: format(month, 'LLL', { locale }) }));
+            })} onClick={this.handleClick}>
+        {format(month, 'LLL', { locale })}
+      </button>);
     }
 }
 export default function MonthNames(props) {
@@ -36,8 +37,12 @@ export default function MonthNames(props) {
     if (props.currentRange) {
         [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(Number(date))));
     }
-    return (_jsxs("div", { className: styles.monthNames, children: [months.map(month => (_jsx(MonthName, { month: month, onScrollChange: props.onScrollChange, locale: locale }, +month))), props.currentRange && (_jsx("div", { className: styles.range, style: {
-                    top: top - 1,
-                    height: bottom + 1 - (top - 1),
-                } })), _jsx(MonthSlider, { ...props, pxToDate: pxToDate })] }));
+    return (<div className={styles.monthNames}>
+      {months.map(month => (<MonthName key={+month} month={month} onScrollChange={props.onScrollChange} locale={locale}/>))}
+      {props.currentRange && (<div className={styles.range} style={{
+                top: top - 1,
+                height: bottom + 1 - (top - 1),
+            }}/>)}
+      <MonthSlider {...props} pxToDate={pxToDate}/>
+    </div>);
 }

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

@@ -15,6 +15,6 @@ export default class MonthSlider extends PureComponent<MonthSliderProps> {
     onMouseDown: () => void;
     onMouseUp: () => void;
     onMouseMove: (e: MouseEvent) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export {};

package/components/date-picker/{month-slider.js → month-slider.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
@@ -39,8 +38,10 @@ 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 (<div>
+        {years.map(date => (<button type='button' key={+date} className={classes} style={{
                     top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize),
-                }, onMouseDown: this.onMouseDown }, +date))) }));
+                }} onMouseDown={this.onMouseDown}/>))}
+      </div>);
     }
 }

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

@@ -2,4 +2,4 @@ import { type MonthsProps } from './consts';
 export interface MonthProps extends MonthsProps {
     month: Date;
 }
-export default function Month(props: MonthProps): import("react/jsx-runtime").JSX.Element;
+export default function Month(props: MonthProps): import("react").JSX.Element;

package/components/date-picker/{month.js → month.jsx}

@@ -1,5 +1,3 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { addDays } from 'date-fns/addDays';
 import { endOfMonth } from 'date-fns/endOfMonth';
 import { format } from 'date-fns/format';
@@ -22,5 +20,8 @@ export default function Month(props) {
         days.push(day);
         day = addDays(day, 1);
     }
-    return (_jsxs("div", { className: styles.month, children: [_jsx("span", { className: styles.monthTitle, children: format(props.month, 'LLLL', { locale }) }), days.map(date => (_createElement(Day, { ...props, day: date, empty: date < start, key: +date })))] }));
+    return (<div className={styles.month}>
+      <span className={styles.monthTitle}>{format(props.month, 'LLLL', { locale })}</span>
+      {days.map(date => (<Day {...props} day={date} empty={date < start} key={+date}/>))}
+    </div>);
 }

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

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