@jetbrains/ring-ui 7.0.106 → 7.0.108

package/components/alert-service/alert-service.d.ts

@@ -12,8 +12,8 @@ export declare const DEFAULT_ALERT_TIMEOUT = 10000;
 export declare class AlertService {
     defaultTimeout: number;
     showingAlerts: AlertItem[];
-    containerElement: HTMLDivElement;
-    reactRoot: import("react-dom/client").Root;
+    containerElement: HTMLDivElement | undefined;
+    reactRoot: import("react-dom/client").Root | undefined;
     _getShowingAlerts(): AlertItem[];
     renderAlertContainer(alerts: readonly AlertItem[]): import("react").JSX.Element;
     /**

package/components/alert-service/alert-service.js

@@ -9,8 +9,8 @@ export class AlertService {
     defaultTimeout = DEFAULT_ALERT_TIMEOUT;
     // This alerts are stored in inverse order (last shown is first in array)
     showingAlerts = [];
-    containerElement = document.createElement('div');
-    reactRoot = createRoot(this.containerElement);
+    containerElement = typeof document !== 'undefined' ? document.createElement('div') : undefined;
+    reactRoot = this.containerElement && createRoot(this.containerElement);
     _getShowingAlerts() {
         return [...this.showingAlerts];
     }

package/components/button-group/button-group.js

@@ -5,6 +5,19 @@ import ControlLabel from '../control-label/control-label';
 import ControlHelp from '../control-help/control-help';
 import Caption from './caption';
 import styles from './button-group.css';
+function allChildrenDisabled(children) {
+    if (!children || typeof children !== 'object')
+        return false;
+    if ('props' in children) {
+        const { props } = children;
+        if ('disabled' in props) {
+            return !!props.disabled;
+        }
+        return allChildrenDisabled(props.children);
+    }
+    const real = Children.toArray(children);
+    return real.length > 0 && real.every(allChildrenDisabled);
+}
 /**
  * @name Button Group
  */
@@ -12,10 +25,7 @@ export default class ButtonGroup extends PureComponent {
     render() {
         const { className, split, 'data-test': dataTest, label, help, ...restProps } = this.props;
         const classes = classNames(split ? styles.split : styles.buttonGroup, className, {
-            [styles.disabled]: Children.toArray(this.props.children).every(child => !!child &&
-                typeof child === 'object' &&
-                'props' in child &&
-                child.props.disabled),
+            [styles.disabled]: allChildrenDisabled(this.props.children),
         });
         return (<>
         {label && <ControlLabel>{label}</ControlLabel>}

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

@@ -0,0 +1 @@
+export declare function animateDate(initial: number | Date, target: number | Date, onUpdate: (date: Date) => void, durationMs?: number): () => void;

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

@@ -0,0 +1,33 @@
+import { dateAnimationDuration } from './consts';
+// Animate via an ascending fragment of a sine wave
+// eslint-disable-next-line prettier/prettier, no-magic-numbers
+const xFrom = -0.5 * Math.PI / 2;
+const xTo = Math.PI / 2;
+const yFrom = Math.sin(xFrom);
+const yTo = Math.sin(xTo);
+export function animateDate(initial, target, onUpdate, durationMs = dateAnimationDuration) {
+    let requestId = null;
+    const startTime = performance.now();
+    function frame(now) {
+        const durationFraction = (now - startTime) / durationMs;
+        // eslint-disable-next-line no-magic-numbers
+        if (durationFraction >= 0.97) {
+            onUpdate(new Date(target));
+            requestId = null;
+            return;
+        }
+        const x = xFrom + (xTo - xFrom) * durationFraction;
+        const y = Math.sin(x);
+        const yFraction = (y - yFrom) / (yTo - yFrom);
+        const date = Number(initial) + (Number(target) - Number(initial)) * yFraction;
+        onUpdate(new Date(date));
+        requestId = requestAnimationFrame(frame);
+    }
+    requestId = requestAnimationFrame(frame);
+    return () => {
+        if (requestId != null) {
+            cancelAnimationFrame(requestId);
+            requestId = null;
+        }
+    };
+}

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

@@ -55,11 +55,15 @@ export interface RangeSpecificPopupProps {
     range: true;
     onChange: (change: DatePickerChange) => void;
 }
+export interface ScrollDate {
+    date: number | Date;
+    source: 'monthsScroll' | 'yearsScroll' | 'other';
+}
 export interface DatePopupState {
     active: Field;
     text: string | null;
     hoverDate: Date | null;
-    scrollDate: number | Date | null;
+    scrollDate: ScrollDate | null;
 }
 export interface DatePopupBaseProps {
     date?: Date | number | string | null | undefined;
@@ -87,14 +91,27 @@ export interface Dates {
 }
 export interface CalendarProps extends Omit<DatePopupBaseProps, 'date' | 'from' | 'to' | 'time'>, Dates {
     activeDate: Date | null;
-    scrollDate: number | Date;
+    scrollDate: ScrollDate;
     currentRange: [Date, Date] | null;
     activeRange: [Date, Date] | null;
-    onScroll: (to: number) => void;
-    onScrollChange: (date: number) => void;
+    setScrollDate: (scrollDate: ScrollDate) => void;
 }
 export interface MonthsProps extends CalendarProps {
     onSelect: (date: Date) => void;
     onHover: (date: Date) => void;
 }
 export type Field = 'date' | 'time' | 'from' | 'to';
+/**
+ * Safari on iPhone doesn't allow setting scrollTop while a scroll is in progress.
+ * If you do, the browser will overwrite it during the next scroll event.
+ * This behavior occurs both during inertia scrolling and when the user is actively scrolling with a finger.
+ *
+ * In this environment, we:
+ * 1) only re-render when the scroll position is within a few pixels of the edge, and
+ * 2) only act after scrolling has ended.
+ */
+export declare const isSafariOnIPhone: boolean;
+export declare const scrollerReRenderDelayIPhone = 100;
+export declare const calendarSyncOnYearScrollUpdateDelay: number;
+export declare const dateAnimationDuration = 150;
+export declare const yearsAnimationDuration = 200;

package/components/date-picker/consts.js

@@ -1,4 +1,5 @@
 import { add } from 'date-fns/add';
+import sniffer from '../global/sniffer';
 const unit = 8; // px;
 const units = {
     unit,
@@ -48,3 +49,18 @@ export function getDayNumInWeek(locale, day) {
     const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
     return weekDays.indexOf(day);
 }
+/**
+ * Safari on iPhone doesn't allow setting scrollTop while a scroll is in progress.
+ * If you do, the browser will overwrite it during the next scroll event.
+ * This behavior occurs both during inertia scrolling and when the user is actively scrolling with a finger.
+ *
+ * In this environment, we:
+ * 1) only re-render when the scroll position is within a few pixels of the edge, and
+ * 2) only act after scrolling has ended.
+ */
+export const isSafariOnIPhone = sniffer.browser.name === 'safari' && sniffer.device.name === 'iphone';
+export const scrollerReRenderDelayIPhone = 100;
+// eslint-disable-next-line no-magic-numbers
+export const calendarSyncOnYearScrollUpdateDelay = isSafariOnIPhone ? 130 : 100;
+export const dateAnimationDuration = 150;
+export const yearsAnimationDuration = 200;

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

@@ -224,15 +224,20 @@
 
 .months.months {
   position: absolute;
+
   top: 0;
-  right: var(--ring-date-picker-year-width);
   bottom: 0;
   left: 0;
-}
 
-.days {
-  position: relative;
-  left: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  overscroll-behavior-y: none;
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .month.month {
@@ -497,13 +502,13 @@
 .monthNames {
   position: absolute;
   top: 0;
-  right: 0;
-  bottom: 0;
+  right: var(--ring-date-picker-year-width);
 
-  width: calc(var(--ring-unit) * 6);
+  width: calc(var(--ring-unit) * 6 - 1px);
+  margin-right: 1px;
 
   background-color: var(--ring-content-background-color);
-  box-shadow: -1px 0 var(--ring-line-color);
+  box-shadow: -1px 0 var(--ring-line-color), 1px 0 var(--ring-line-color);
 }
 
 .monthName {
@@ -512,8 +517,6 @@
 }
 
 .monthName.monthName {
-  position: relative;
-
   width: 100%;
 
   height: var(--ring-date-picker-cell-size);
@@ -534,7 +537,7 @@
   right: 0;
   left: -1px;
 
-  width: calc(100% + 1px);
+  width: calc(100% + 2px);
 
   height: calc(var(--ring-unit) * 6);
 
@@ -542,6 +545,8 @@
 
   opacity: 0.17;
   background-color: var(--ring-main-color);
+
+  touch-action: none;
 }
 
 .monthSlider:hover {
@@ -568,12 +573,22 @@
   top: 0;
   right: 0;
 
+  overflow-y: scroll;
+
   width: var(--ring-date-picker-year-width);
+  height: 100%;
 
   background-color: var(--ring-content-background-color);
   box-shadow: -1px 0 var(--ring-line-color);
 
   font-size: var(--ring-font-size-smaller);
+  overscroll-behavior-y: none;
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .year {

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

@@ -12,11 +12,29 @@ export interface DatePickerTranslations extends Partial<DateInputTranslations> {
     setPeriod: string;
 }
 export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateInput' | 'onComplete' | 'hidden'> & {
+    /**
+     * Class name added to the root element of the control that activates the popup.
+     */
     className: string;
+    /**
+     * Adds a "Clear" button to the popup, which resets `date` (or `from` and `to`) to `null` when clicked.
+     */
     clear: boolean;
+    /**
+     * Displays the popup trigger as text, similar to a link, instead of a button.
+     */
     inline: boolean;
+    /**
+     * Class name added to the root element of the popup.
+     */
     popupClassName?: string | null | undefined;
+    /**
+     * Additional props for the Dropdown component. See **Components/Dropdown**.
+     */
     dropdownProps?: Partial<DropdownAttrs>;
+    /**
+     * Object with custom popup text values.
+     */
     translations?: DatePickerTranslations | null | undefined;
     displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
     displayDayFormat: (date: Date, locale: Locale | undefined) => string;
@@ -27,11 +45,40 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     rangePlaceholder?: string;
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
+    /**
+     * Horizontal size of the popup trigger control. Only applies when `inline` is `false`.
+     */
     size?: Size;
     buttonAttributes?: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'>;
 };
 /**
- * @name Date Picker
+ * Date Picker lets users select a date, a date and time, or a date range.
+ * In the simplest mode, with a single unbounded date, the component needs only two props:
+ *
+ * - `date` to set the current date, and
+ * - `onChange` to be invoked when the user selects the date.
+ *
+ * To limit the selected date, use one or both of the following props:
+ *
+ * - `minDate`
+ * - `maxDate`
+ *
+ * To enable time input, use the `withTime` prop.
+ *
+ * To enable range selection, use the `range` prop. In this mode, use the following props
+ * instead of `date`:
+ *
+ * - `from`
+ * - `to`
+ *
+ * By default, the control that activates the popup is rendered as a button. If you want
+ * text instead, similar to a link, use the `inline` prop.
+ *
+ * The component supports internationalization. For example, in the `en-US` locale,
+ * the calendar starts on Sunday.
+ *
+ * There are also multiple ways to provide custom text and placeholders. See the props
+ * interfaces for details.
  */
 export default class DatePicker extends PureComponent<DatePickerProps> {
     static defaultProps: DatePickerProps;

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

@@ -30,7 +30,33 @@ const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopu
     <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
 /**
- * @name Date Picker
+ * Date Picker lets users select a date, a date and time, or a date range.
+ * In the simplest mode, with a single unbounded date, the component needs only two props:
+ *
+ * - `date` to set the current date, and
+ * - `onChange` to be invoked when the user selects the date.
+ *
+ * To limit the selected date, use one or both of the following props:
+ *
+ * - `minDate`
+ * - `maxDate`
+ *
+ * To enable time input, use the `withTime` prop.
+ *
+ * To enable range selection, use the `range` prop. In this mode, use the following props
+ * instead of `date`:
+ *
+ * - `from`
+ * - `to`
+ *
+ * By default, the control that activates the popup is rendered as a button. If you want
+ * text instead, similar to a link, use the `inline` prop.
+ *
+ * The component supports internationalization. For example, in the `en-US` locale,
+ * the calendar starts on Sunday.
+ *
+ * There are also multiple ways to provide custom text and placeholders. See the props
+ * interfaces for details.
  */
 export default class DatePicker extends PureComponent {
     static defaultProps = {

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

@@ -1,34 +1,28 @@
 import { Component } from 'react';
 import * as React from 'react';
-import { type DatePickerChange, type DatePopupBaseProps, type DateSpecificPopupProps, type DatePopupState, type RangeSpecificPopupProps, type TimeSpecificPopupProps, type Field } from './consts';
+import { type DatePickerChange, type DatePopupBaseProps, type DateSpecificPopupProps, type DatePopupState, type RangeSpecificPopupProps, type TimeSpecificPopupProps, type Field, type ScrollDate } 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;
     static defaultProps: {
         onChange(): void;
     };
     constructor(props: DatePopupProps);
-    componentDidMount(): void;
     componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
     componentWillUnmount(): void;
-    private _scrollDate?;
-    private _scrollTS?;
+    private animationCleanup;
     isInTimeMode: () => boolean;
     componentRef: React.RefObject<HTMLDivElement | null>;
-    handleWheel: (e: WheelEvent) => void;
     parse(text: string | null | undefined, type: 'time'): string;
     parse(text: Date | number | string | null | undefined, type?: 'date' | 'from' | 'to'): Date;
     select(changes: DatePickerChange): void;
     confirm(name: Field): void;
     isValidDate: (parsedText: Date) => boolean;
-    scheduleScroll: () => void;
-    scrollTo: (scrollDate: number) => void;
     hoverHandler: (hoverDate: Date) => void;
     handleActivate: (arg: Field) => () => void;
     handleInput: (text: string, name: Field) => void;
     handleConfirm: (arg: Field) => () => void;
     selectHandler: (date: Date) => void;
-    handleScroll: (scrollDate: number) => void;
+    setScrollDate: (scrollDate: ScrollDate) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     render(): React.JSX.Element;
 }

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

@@ -1,9 +1,7 @@
-/* eslint-disable max-lines */
 import { Component } from 'react';
 import * as React from 'react';
 import { isAfter } from 'date-fns/isAfter';
 import { isBefore } from 'date-fns/isBefore';
-import { isSameDay } from 'date-fns/isSameDay';
 import { startOfDay } from 'date-fns/startOfDay';
 import { set } from 'date-fns';
 import memoize from '../global/memoize';
@@ -12,15 +10,10 @@ import Months from './months';
 import Years from './years';
 import Weekdays from './weekdays';
 import { parseTime, } from './consts';
+import { animateDate } from './animate-date';
+import MonthNames from './month-names';
 import styles from './date-picker.css';
-const scrollExpDelay = 10;
 export default class DatePopup extends Component {
-    static sameDay(next, prev) {
-        if (next && prev) {
-            return isSameDay(next, prev);
-        }
-        return next === prev;
-    }
     static defaultProps = {
         onChange() { },
     };
@@ -35,21 +28,16 @@ export default class DatePopup extends Component {
         if (!range) {
             const parsedDate = this.parse(props.date, 'date');
             const active = withTime && parsedDate && !props.time ? 'time' : 'date';
-            this.state = { ...defaultState, active, scrollDate: parsedDate };
+            this.state = { ...defaultState, active, scrollDate: { date: parsedDate, source: 'other' } };
         }
         else {
             this.state = {
                 ...defaultState,
                 active: props.from && !props.to ? 'to' : 'from',
-                scrollDate: this.parse(props.from, 'from'),
+                scrollDate: { date: this.parse(props.from, 'from'), source: 'other' },
             };
         }
     }
-    componentDidMount() {
-        if (this.componentRef.current) {
-            this.componentRef.current.addEventListener('wheel', this.handleWheel);
-        }
-    }
     componentDidUpdate(prevProps, prevState) {
         if (this.state.active !== prevState.active) {
             if (this.state.text && prevState.active) {
@@ -59,19 +47,11 @@ export default class DatePopup extends Component {
         }
     }
     componentWillUnmount() {
-        if (this.componentRef.current) {
-            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
-        }
+        this.animationCleanup?.();
     }
-    _scrollDate;
-    _scrollTS;
+    animationCleanup = null;
     isInTimeMode = () => (!this.props.range && this.props.withTime) || false;
     componentRef = React.createRef();
-    handleWheel = (e) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    };
     parse(text, type) {
         if (type === 'time') {
             return parseTime(String(text));
@@ -176,38 +156,27 @@ export default class DatePopup extends Component {
         }
         return false;
     };
-    scheduleScroll = () => {
-        const current = (this.state.scrollDate && this.parse(this.state.scrollDate, 'date')) ||
-            this.parse(this.props[this.state.active], 'date') ||
-            new Date();
-        const goal = this._scrollDate;
-        if (!current || !goal || DatePopup.sameDay(goal, current)) {
-            this._scrollDate = null;
-            this._scrollTS = null;
-            return;
-        }
-        if (this._scrollTS) {
-            const diff = goal - Number(current);
-            const dt = Date.now() - this._scrollTS;
-            const next = goal - diff * Math.E ** (-dt / scrollExpDelay);
-            this.setState({ scrollDate: next });
-        }
-        this._scrollTS = Date.now();
-        window.requestAnimationFrame(this.scheduleScroll);
-    };
-    scrollTo = (scrollDate) => {
-        this._scrollDate = scrollDate;
-        if (!this._scrollTS) {
-            this.scheduleScroll();
-        }
-    };
     hoverHandler = (hoverDate) => this.setState({ hoverDate });
     handleActivate = memoize((name) => () => this.setState({ active: name }));
     handleInput = (text, name) => {
         if (name !== 'time') {
             const parsed = this.parse(text, name);
             if (this.isValidDate(parsed)) {
-                this.scrollTo(Number(parsed));
+                this.animationCleanup?.();
+                const currentScrollDate = this.state.scrollDate?.date;
+                if (currentScrollDate != null) {
+                    this.animationCleanup = animateDate(currentScrollDate, parsed, date => {
+                        this.setState({
+                            scrollDate: {
+                                date,
+                                source: 'other',
+                            },
+                        });
+                    });
+                }
+                else {
+                    this.setScrollDate({ date: parsed, source: 'other' });
+                }
             }
         }
         this.setState({
@@ -226,7 +195,9 @@ export default class DatePopup extends Component {
             this.select({ [this.state.active]: date });
         }
     };
-    handleScroll = (scrollDate) => this.setState({ scrollDate });
+    setScrollDate = (scrollDate) => {
+        this.setState({ scrollDate });
+    };
     onClear = (e) => {
         let changes;
         if (this.props.range) {
@@ -285,7 +256,7 @@ export default class DatePopup extends Component {
                     break;
             }
         }
-        const scrollDate = this.state.scrollDate || new Date();
+        const scrollDate = this.state.scrollDate || { date: new Date(), source: 'other' };
         const calendarProps = {
             ...restProps,
             ...dates,
@@ -293,8 +264,7 @@ export default class DatePopup extends Component {
             activeDate,
             currentRange,
             activeRange,
-            onScroll: this.handleScroll,
-            onScrollChange: this.scrollTo,
+            setScrollDate: this.setScrollDate,
         };
         const clearable = Boolean(this.props.onClear);
         return (<div className={styles.datePopup} data-test='ring-date-popup' ref={this.componentRef}>
@@ -312,6 +282,7 @@ export default class DatePopup extends Component {
         <Weekdays locale={locale}/>
         <div className={styles.calendar}>
           <Months {...calendarProps} onHover={this.hoverHandler} onSelect={this.selectHandler} locale={locale}/>
+          <MonthNames {...calendarProps} onHover={this.hoverHandler} onSelect={this.selectHandler}/>
           <Years {...calendarProps}/>
         </div>
 

package/components/date-picker/day.js

@@ -53,23 +53,27 @@ export default class Day extends Component {
         const spreadRange = makeSpreadRange(currentRange);
         const disabled = this.isDisabled(day);
         const activeSpreadRange = makeSpreadRange(activeRange);
+        const className = classNames(styles.day, dayInWeekClass, {
+            [styles.current]: ['date', 'from', 'to'].some(this.is),
+            [styles.active]: !disabled && this.is('activeDate'),
+            [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
+            [styles.empty]: empty,
+            [styles.from]: (currentRange && this.isDay(currentRange[0]) && !reverse) || (activeRange && this.isDay(activeRange[0])),
+            [styles.to]: (currentRange && this.isDay(currentRange[1])) || (activeRange && this.isDay(activeRange[1])),
+            [styles.between]: this.inRange(currentRange),
+            [styles.activeBetween]: !disabled && this.inRange(activeRange),
+            [styles.first]: getDate(day) === 1,
+            [styles.spread]: this.inRange(spreadRange),
+            [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
+            [styles.disabled]: disabled,
+        });
+        if (empty) {
+            return <div className={className}/>;
+        }
         return (
         // TODO make keyboard navigation actually work
-        <button type='button' className={classNames(styles.day, dayInWeekClass, {
-                [styles.current]: ['date', 'from', 'to'].some(this.is),
-                [styles.active]: !disabled && this.is('activeDate'),
-                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
-                [styles.empty]: empty,
-                [styles.from]: (currentRange && this.isDay(currentRange[0]) && !reverse) || (activeRange && this.isDay(activeRange[0])),
-                [styles.to]: (currentRange && this.isDay(currentRange[1])) || (activeRange && this.isDay(activeRange[1])),
-                [styles.between]: this.inRange(currentRange),
-                [styles.activeBetween]: !disabled && this.inRange(activeRange),
-                [styles.first]: getDate(day) === 1,
-                [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}>
-        {empty || <span className={classNames({ [styles.today]: isToday(day) })}>{format(day, 'd')}</span>}
+        <button type='button' className={className} onClick={this.handleClick} onMouseOver={this.handleMouseOver} onFocus={this.handleMouseOver} onMouseOut={this.handleMouseOut} onBlur={this.handleMouseOut} disabled={disabled}>
+        <span className={classNames({ [styles.today]: isToday(day) })}>{format(day, 'd')}</span>
       </button>);
     }
 }