@jetbrains/ring-ui 7.0.113 → 7.0.115

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { Locale } from 'date-fns';
+import { type Locale } from 'date-fns';
 declare const units: {
     unit: number;
     cellSize: number;
@@ -24,10 +24,11 @@ export declare const yearDuration: number;
 export declare const yearScrollSpeed: number;
 export declare const DOUBLE = 2;
 export declare const HALF = 0.5;
-export declare function parseTime(time: string): string | null;
+export declare function parseTime(time: string | null | undefined): string | null;
 export declare function shiftWeekArray<T>(arr: T[], startOfWeek: number): T[];
 export declare function getWeekStartsOn(locale: Locale | undefined): number;
 export declare function getDayNumInWeek(locale: Locale | undefined, day: number): number;
+export declare function getDefaultScrollDate({ minDate, maxDate, parseDateInput, }: Pick<DatePopupBaseProps, 'minDate' | 'maxDate' | 'parseDateInput'>): Date;
 export interface DateInputTranslations {
     addFirstDate?: string;
     addSecondDate?: string;

package/components/date-picker/consts.js

@@ -1,4 +1,5 @@
 import { add } from 'date-fns/add';
+import { endOfDay } from 'date-fns';
 import sniffer from '../global/sniffer';
 const unit = 8; // px;
 const units = {
@@ -29,14 +30,15 @@ export const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
 export const DOUBLE = 2;
 export const HALF = 0.5;
 export function parseTime(time) {
-    let result = null;
+    if (!time)
+        return null;
     if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
-        result = time;
+        return time;
     }
-    else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
-        result = `0${time}`;
+    if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        return `0${time}`;
     }
-    return result;
+    return null;
 }
 export function shiftWeekArray(arr, startOfWeek) {
     const shiftTimes = startOfWeek - 1;
@@ -49,6 +51,25 @@ export function getDayNumInWeek(locale, day) {
     const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
     return weekDays.indexOf(day);
 }
+export function getDefaultScrollDate({ minDate, maxDate, parseDateInput, }) {
+    const minDateParsed = parseDateInput(minDate);
+    const maxDateParsed = parseDateInput(maxDate);
+    const maxDateEndOfDayNum = maxDateParsed ? Number(endOfDay(maxDateParsed)) : null;
+    const now = Date.now();
+    if (minDateParsed != null && maxDateEndOfDayNum != null) {
+        if (minDateParsed.getTime() <= now && now <= maxDateEndOfDayNum) {
+            return new Date(now);
+        }
+        return minDateParsed;
+    }
+    if (minDateParsed != null && minDateParsed.getTime() > now) {
+        return minDateParsed;
+    }
+    if (maxDateParsed != null && maxDateEndOfDayNum != null && maxDateEndOfDayNum < now) {
+        return maxDateParsed;
+    }
+    return new Date(now);
+}
 /**
  * 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.

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

@@ -97,8 +97,16 @@ 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 ? applyTimeInput(change.date, change.time) : change;
-        onChange(adjustedChange);
+        if (withTime && !(change instanceof Date) && change && 'date' in change && 'time' in change) {
+            const { date, time } = change;
+            if (date) {
+                const dateWithTime = applyTimeInput(date, time);
+                onChange(dateWithTime);
+            }
+        }
+        else {
+            onChange(change);
+        }
     };
     clear = () => {
         let change = null;
@@ -116,14 +124,18 @@ export default class DatePicker extends PureComponent {
         this.popup?._onCloseAttempt();
     };
     parse = memoize((date) => {
-        const { parseDateInput } = this.props;
+        let normalizedDate;
         if (date instanceof Date) {
-            return date;
+            normalizedDate = date;
+        }
+        else if (typeof date === 'number') {
+            normalizedDate = new Date(date);
         }
-        if (typeof date === 'number') {
-            return new Date(date);
+        else {
+            const { parseDateInput } = this.props;
+            normalizedDate = parseDateInput(date);
         }
-        return parseDateInput(date);
+        return normalizedDate && isValid(normalizedDate) ? normalizedDate : null;
     });
     formatTime() {
         const { displayTimeFormat, locale } = this.props;

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

@@ -7,13 +7,11 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
         onChange(): void;
     };
     constructor(props: DatePopupProps);
-    componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
+    componentDidUpdate(_prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
     componentWillUnmount(): void;
     private animationCleanup;
     isInTimeMode: () => boolean;
     componentRef: React.RefObject<HTMLDivElement | null>;
-    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;

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

@@ -9,7 +9,7 @@ import DateInput from './date-input';
 import Months from './months';
 import Years from './years';
 import Weekdays from './weekdays';
-import { parseTime, } from './consts';
+import { parseTime, getDefaultScrollDate, } from './consts';
 import { animateDate } from './animate-date';
 import MonthNames from './month-names';
 import styles from './date-picker.css';
@@ -24,21 +24,25 @@ export default class DatePopup extends Component {
             hoverDate: null,
             scrollDate: null,
         };
-        const { range, withTime } = props;
+        const { range, withTime, parseDateInput } = props;
         if (!range) {
-            const parsedDate = this.parse(props.date, 'date');
+            const parsedDate = parseDateInput(props.date);
             const active = withTime && parsedDate && !props.time ? 'time' : 'date';
-            this.state = { ...defaultState, active, scrollDate: { date: parsedDate, source: 'other' } };
+            this.state = {
+                ...defaultState,
+                active,
+                scrollDate: { date: parsedDate ?? getDefaultScrollDate(props), source: 'other' },
+            };
         }
         else {
             this.state = {
                 ...defaultState,
                 active: props.from && !props.to ? 'to' : 'from',
-                scrollDate: { date: this.parse(props.from, 'from'), source: 'other' },
+                scrollDate: { date: parseDateInput(props.from) ?? getDefaultScrollDate(props), source: 'other' },
             };
         }
     }
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(_prevProps, prevState) {
         if (this.state.active !== prevState.active) {
             if (this.state.text && prevState.active) {
                 this.confirm(prevState.active);
@@ -52,14 +56,8 @@ export default class DatePopup extends Component {
     animationCleanup = null;
     isInTimeMode = () => (!this.props.range && this.props.withTime) || false;
     componentRef = React.createRef();
-    parse(text, type) {
-        if (type === 'time') {
-            return parseTime(String(text));
-        }
-        return this.props.parseDateInput(text);
-    }
     select(changes) {
-        const { range, withTime } = this.props;
+        const { range, withTime, parseDateInput } = this.props;
         const prevActive = this.state.active;
         if (!range && !withTime) {
             this.setState({
@@ -76,8 +74,8 @@ export default class DatePopup extends Component {
             this.props.onComplete();
         }
         else if (!range && withTime) {
-            const date = this.parse(this.props.date, 'date');
-            const time = this.parse(this.props.time, 'time');
+            const date = parseDateInput(this.props.date);
+            const time = parseTime(this.props.time);
             const changeToSubmit = {
                 date: changes.date || date,
                 time: changes.time || time,
@@ -97,8 +95,8 @@ export default class DatePopup extends Component {
                 ...this.props,
                 ...changes,
             };
-            from = this.parse(from, 'from');
-            to = this.parse(to, 'to');
+            from = parseDateInput(from);
+            to = parseDateInput(to);
             // proceed to setting the end by default
             let active = 'to';
             let complete = false;
@@ -133,15 +131,16 @@ export default class DatePopup extends Component {
         const text = this.state.text;
         let result;
         if (name === 'time') {
-            result = this.parse(text, name);
-            const time = this.parse('time' in this.props ? this.props.time : '', 'time');
+            result = parseTime(text);
+            const time = parseTime('time' in this.props ? this.props.time : '');
             const emptyCase = this.state.active === 'time' ? '00:00' : null;
             result = result || time || emptyCase;
         }
         else {
-            result = this.parse(text, name);
-            if (!this.isValidDate(result)) {
-                result = this.parse(name in this.props ? this.props[name] : '', name);
+            const { parseDateInput } = this.props;
+            result = parseDateInput(text);
+            if (!result || !this.isValidDate(result)) {
+                result = parseDateInput(name in this.props ? this.props[name] : '');
             }
         }
         this.select({
@@ -149,10 +148,12 @@ export default class DatePopup extends Component {
         });
     }
     isValidDate = (parsedText) => {
-        const minDate = this.parse(this.props.minDate, 'date');
-        const maxDate = this.parse(this.props.maxDate, 'date');
+        const { parseDateInput, minDate, maxDate } = this.props;
+        const parsedMinDate = parseDateInput(minDate);
+        const parsedMaxDate = parseDateInput(maxDate);
         if (parsedText) {
-            return !((minDate && isBefore(parsedText, minDate)) || (maxDate && isAfter(parsedText, maxDate)));
+            return !((parsedMinDate && isBefore(parsedText, parsedMinDate)) ||
+                (parsedMaxDate && isAfter(parsedText, parsedMaxDate)));
         }
         return false;
     };
@@ -160,8 +161,8 @@ export default class DatePopup extends Component {
     handleActivate = memoize((name) => () => this.setState({ active: name }));
     handleInput = (text, name) => {
         if (name !== 'time') {
-            const parsed = this.parse(text, name);
-            if (this.isValidDate(parsed)) {
+            const parsed = this.props.parseDateInput(text);
+            if (parsed && this.isValidDate(parsed)) {
                 this.animationCleanup?.();
                 const currentScrollDate = this.state.scrollDate?.date;
                 if (currentScrollDate != null) {
@@ -217,20 +218,20 @@ export default class DatePopup extends Component {
     };
     // eslint-disable-next-line complexity
     render() {
-        const { range, locale } = this.props;
+        const { range, locale, parseDateInput } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
-        const parsedDate = this.parse(this.props.date, 'date');
-        const parsedTo = this.parse(this.props.to, 'to');
+        const parsedDate = parseDateInput(date);
+        const parsedTo = parseDateInput(to);
         const names = range ? ['from', 'to'] : ['date'];
         const dates = names.reduce((obj, key) => {
             const value = this.props[key];
             return {
                 ...obj,
-                [key]: this.parse(value, key),
+                [key]: parseDateInput(value),
             };
         }, {});
         const activeDate = this.state.active !== 'time'
-            ? this.state.hoverDate || (this.state.text ? this.parse(this.state.text, 'date') : null)
+            ? this.state.hoverDate || (this.state.text ? parseDateInput(this.state.text) : null)
             : this.state.hoverDate || null;
         const currentRange = (range && dates.from && dates.to && [dates.from, dates.to]) || null;
         let activeRange = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.113",
+  "version": "7.0.115",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"