@jetbrains/ring-ui 7.0.112 → 7.0.114

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-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/components/popup/position-css.js

@@ -51,11 +51,11 @@ export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, lef
     if (calculatedMinWidth !== null) {
         popup.style.minWidth = `${calculatedMinWidth}px`;
     }
-    if (top) {
-        popup.style.transform = `translateY(${top}px)`;
+    if (top || left) {
+        popup.style.transform = [top && `translateY(${top}px)`, left && `translateX(${left}px)`].filter(Boolean).join(' ');
     }
-    if (left) {
-        popup.style.left = `${left}px`;
+    else {
+        popup.style.removeProperty('transform');
     }
     // When all directions are BOTTOM, the `max-height: 100%` from CSS should stay applied so popup doesn't overflow the anchor RG-2754
     const SHOULD_AUTO_SHRINK = directions.every(d => d.startsWith('BOTTOM'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.112",
+  "version": "7.0.114",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -112,16 +112,16 @@
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
-    "@primer/octicons": "^19.25.0",
+    "@primer/octicons": "^19.27.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
+    "@storybook/addon-a11y": "10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-themes": "^10.4.1",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.4.0",
+    "@storybook/react-webpack5": "10.4.1",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -129,14 +129,14 @@
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/eslint-plugin": "^1.6.17",
     "acorn": "^8.16.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001777",
+    "caniuse-lite": "^1.0.30001793",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
@@ -154,7 +154,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.0",
+    "eslint-plugin-storybook": "^10.4.1",
     "eslint-plugin-unicorn": "^64.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
@@ -167,7 +167,7 @@
     "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
     "lint-staged": "^17.0.5",
-    "markdown-it": "^14.1.1",
+    "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
     "prettier": "^3.8.3",
@@ -180,18 +180,18 @@
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
     "storybook": "10.4.1",
-    "stylelint": "^17.11.1",
+    "stylelint": "^17.12.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.6.0",
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.6",
+    "typescript-eslint": "^8.60.0",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.106.2",
+    "webpack": "^5.107.1",
     "webpack-cli": "^7.0.2",
     "xmlappend": "^1.0.4"
   },
@@ -233,7 +233,7 @@
     "combokeys": "^3.0.1",
     "css-loader": "^7.1.4",
     "csstype": "^3.2.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.3.0",
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
@@ -242,7 +242,7 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.15",
     "postcss-calc": "^10.1.1",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",