@jetbrains/ring-ui-built 7.0.106 → 7.0.108

package/components/_helpers/date-picker.js

@@ -1,3 +1,3 @@
-var styles = {"container":"ring-date-picker-container","hoverable":"ring-date-picker-hoverable","datePicker":"ring-date-picker-datePicker","inline":"ring-date-picker-inline","sizeS":"ring-date-picker-sizeS","sizeM":"ring-date-picker-sizeM","sizeL":"ring-date-picker-sizeL","sizeFULL":"ring-date-picker-sizeFULL","sizeAUTO":"ring-date-picker-sizeAUTO","displayDate":"ring-date-picker-displayDate","displayRange":"ring-date-picker-displayRange","clear":"ring-date-picker-clear","datePopup":"ring-date-picker-datePopup","filterWrapper":"ring-date-picker-filterWrapper ring-select-popup-filterWrapper","filter":"ring-date-picker-filter ring-select-popup-filter","calendarIcon":"ring-date-picker-calendarIcon","anchor":"ring-date-picker-anchor","anchorContent":"ring-date-picker-anchorContent","chevronDownIcon":"ring-date-picker-chevronDownIcon","fromInput":"ring-date-picker-fromInput","fromInputWithDivider":"ring-date-picker-fromInputWithDivider","toInput":"ring-date-picker-toInput","dateInput":"ring-date-picker-dateInput","timeInputWithDivider":"ring-date-picker-timeInputWithDivider","weekdays":"ring-date-picker-weekdays","weekday":"ring-date-picker-weekday","weekend":"ring-date-picker-weekend","calendar":"ring-date-picker-calendar","months":"ring-date-picker-months","days":"ring-date-picker-days","month":"ring-date-picker-month","monthTitle":"ring-date-picker-monthTitle","day":"ring-date-picker-day ring-global-resetButton","between":"ring-date-picker-between","activeBetween":"ring-date-picker-activeBetween","current":"ring-date-picker-current","active":"ring-date-picker-active","disabled":"ring-date-picker-disabled","from":"ring-date-picker-from","to":"ring-date-picker-to","Day1":"ring-date-picker-Day1","spread":"ring-date-picker-spread","activeSpread":"ring-date-picker-activeSpread","first":"ring-date-picker-first","Day2":"ring-date-picker-Day2","Day5":"ring-date-picker-Day5","Day6":"ring-date-picker-Day6","Day7":"ring-date-picker-Day7","empty":"ring-date-picker-empty","today":"ring-date-picker-today","year":"ring-date-picker-year ring-date-picker-hoverable ring-global-resetButton","monthNames":"ring-date-picker-monthNames","monthName":"ring-date-picker-monthName ring-date-picker-hoverable ring-global-resetButton","monthSlider":"ring-date-picker-monthSlider ring-global-resetButton","dragging":"ring-date-picker-dragging","range":"ring-date-picker-range","years":"ring-date-picker-years","currentYear":"ring-date-picker-currentYear"};
+var styles = {"container":"ring-date-picker-container","hoverable":"ring-date-picker-hoverable","datePicker":"ring-date-picker-datePicker","inline":"ring-date-picker-inline","sizeS":"ring-date-picker-sizeS","sizeM":"ring-date-picker-sizeM","sizeL":"ring-date-picker-sizeL","sizeFULL":"ring-date-picker-sizeFULL","sizeAUTO":"ring-date-picker-sizeAUTO","displayDate":"ring-date-picker-displayDate","displayRange":"ring-date-picker-displayRange","clear":"ring-date-picker-clear","datePopup":"ring-date-picker-datePopup","filterWrapper":"ring-date-picker-filterWrapper ring-select-popup-filterWrapper","filter":"ring-date-picker-filter ring-select-popup-filter","calendarIcon":"ring-date-picker-calendarIcon","anchor":"ring-date-picker-anchor","anchorContent":"ring-date-picker-anchorContent","chevronDownIcon":"ring-date-picker-chevronDownIcon","fromInput":"ring-date-picker-fromInput","fromInputWithDivider":"ring-date-picker-fromInputWithDivider","toInput":"ring-date-picker-toInput","dateInput":"ring-date-picker-dateInput","timeInputWithDivider":"ring-date-picker-timeInputWithDivider","weekdays":"ring-date-picker-weekdays","weekday":"ring-date-picker-weekday","weekend":"ring-date-picker-weekend","calendar":"ring-date-picker-calendar","months":"ring-date-picker-months","month":"ring-date-picker-month","monthTitle":"ring-date-picker-monthTitle","day":"ring-date-picker-day ring-global-resetButton","between":"ring-date-picker-between","activeBetween":"ring-date-picker-activeBetween","current":"ring-date-picker-current","active":"ring-date-picker-active","disabled":"ring-date-picker-disabled","from":"ring-date-picker-from","to":"ring-date-picker-to","Day1":"ring-date-picker-Day1","spread":"ring-date-picker-spread","activeSpread":"ring-date-picker-activeSpread","first":"ring-date-picker-first","Day2":"ring-date-picker-Day2","Day5":"ring-date-picker-Day5","Day6":"ring-date-picker-Day6","Day7":"ring-date-picker-Day7","empty":"ring-date-picker-empty","today":"ring-date-picker-today","year":"ring-date-picker-year ring-date-picker-hoverable ring-global-resetButton","monthNames":"ring-date-picker-monthNames","monthName":"ring-date-picker-monthName ring-date-picker-hoverable ring-global-resetButton","monthSlider":"ring-date-picker-monthSlider ring-global-resetButton","dragging":"ring-date-picker-dragging","range":"ring-date-picker-range","years":"ring-date-picker-years","currentYear":"ring-date-picker-currentYear"};
 
 export { styles as s };

package/components/_helpers/theme.js

@@ -17,16 +17,17 @@ const ThemeContext = /*#__PURE__*/createContext({
   theme: Theme.LIGHT
 });
 const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
-const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+const darkMatcher = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
 function useTheme() {
+  var _darkMatcher$matches;
   const $ = c(3);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 3; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
-  const [dark, setDark] = useState(darkMatcher.matches);
+  const [dark, setDark] = useState((_darkMatcher$matches = darkMatcher?.matches) !== null && _darkMatcher$matches !== void 0 ? _darkMatcher$matches : false);
   let t0;
   let t1;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
@@ -47,11 +48,11 @@ function useTheme() {
 }
 function useThemeClasses(theme) {
   const $ = c(5);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
   const systemTheme = useTheme();
   const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
@@ -76,11 +77,11 @@ function useThemeClasses(theme) {
 }
 function WithThemeClasses(t0) {
   const $ = c(4);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 4; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
   const {
     theme,
@@ -111,11 +112,11 @@ function applyTheme(theme, container) {
 }
 const DefaultWrapper = /*#__PURE__*/forwardRef(function Wrapper(props, ref) {
   const $ = c(4);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 4; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
   let t0;
   if ($[1] !== props || $[2] !== ref) {
@@ -133,11 +134,11 @@ const DefaultWrapper = /*#__PURE__*/forwardRef(function Wrapper(props, ref) {
 });
 function ThemeProviderInner(t0) {
   const $ = c(30);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 30; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
   let children;
   let className;
@@ -256,11 +257,11 @@ function ThemeProviderInner(t0) {
 }
 const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(props, ref) {
   const $ = c(4);
-  if ($[0] !== "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682") {
+  if ($[0] !== "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa") {
     for (let $i = 0; $i < 4; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "eabfde84870498e54e35112b5ff33c796334250351dda2073f3913df7a796682";
+    $[0] = "4a3ee1675c0bca0c5645fa43dba8f8678ee294b7ae46bb66959a11f3f15923aa";
   }
   let t0;
   if ($[1] !== props || $[2] !== ref) {

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

@@ -36,8 +36,8 @@ 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/auth/auth-core.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/es.array.includes.js';
 import { getAbsoluteBaseURL, fixUrl } from '../global/url.js';
 import Listeners from '../global/listeners.js';
 import HTTP from '../http/http.js';

package/components/auth/auth.js

@@ -37,6 +37,7 @@ import 'react-dom';
 import '../link/link.js';
 import '../_helpers/link.js';
 import '../group/group.js';
+import 'core-js/modules/es.array.includes.js';
 import '../global/listeners.js';
 import '../http/http.js';
 import '../global/promise-with-timeout.js';

package/components/auth/iframe-flow.js

@@ -25,6 +25,7 @@ import '../global/schedule-raf.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/components/auth/token-validator.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/es.array.includes.js';
 import { CODE } from '../http/http.js';
 import '../global/url.js';
 

package/components/auth-dialog/auth-dialog.js

@@ -19,6 +19,7 @@ import '../island/header.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/components/auth-dialog-service/auth-dialog-service.js

@@ -22,6 +22,7 @@ import '../island/header.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/components/avatar/avatar.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/es.array.includes.js';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';

package/components/avatar-stack/avatar-stack.js

@@ -7,6 +7,7 @@ import { f as fontSizes } from '../_helpers/avatar-info.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Size } from '../avatar/avatar-size.js';
 import '../list/list.js';
+import 'core-js/modules/es.array.includes.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';

package/components/banner/banner.js

@@ -24,6 +24,7 @@ import '../global/schedule-raf.js';
 import '../global/dom.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

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

@@ -8,6 +8,23 @@ export { C as Caption } from '../_helpers/caption.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react-compiler-runtime';
 
+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
+ */
 class ButtonGroup extends PureComponent {
   render() {
     const {
@@ -19,7 +36,7 @@ class ButtonGroup extends PureComponent {
       ...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 /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx(ControlLabel, {

package/components/components/util-stories.js

@@ -0,0 +1,3 @@
+const hideAddonsPanelParam = 'hideAddonsPanel';
+
+export { hideAddonsPanelParam };

package/components/confirm/confirm.js

@@ -19,6 +19,7 @@ import '../global/schedule-raf.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/components/confirm-service/confirm-service.js

@@ -20,6 +20,7 @@ import '../global/schedule-raf.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';

package/components/data-list/data-list.js

@@ -11,6 +11,7 @@ import { s as styles } from '../_helpers/title.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/compose-refs.js';
 import 'memoize-one';
+import 'core-js/modules/es.array.includes.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';

package/components/data-list/selection.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/es.array.includes.js';
 import Selection$1 from '../table/selection.js';
 
 class Selection extends Selection$1 {

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,39 @@
+import { dateAnimationDuration } from './consts.js';
+import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
+
+// 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);
+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;
+    }
+  };
+}
+
+export { animateDate };

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,6 @@
 import { add } from 'date-fns/add';
+import sniffr from '../global/sniffer.js';
+import 'sniffr';
 
 const unit = 8; // px;
 const units = {
@@ -50,5 +52,20 @@ 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.
+ */
+const isSafariOnIPhone = sniffr.browser.name === 'safari' && sniffr.device.name === 'iphone';
+const scrollerReRenderDelayIPhone = 100;
+// eslint-disable-next-line no-magic-numbers
+const calendarSyncOnYearScrollUpdateDelay = isSafariOnIPhone ? 130 : 100;
+const dateAnimationDuration = 150;
+const yearsAnimationDuration = 200;
 
-export { DOUBLE, FIFTH_DAY, HALF, MIDDLE_DAY, WEEK, YEAR, units as default, getDayNumInWeek, getWeekStartsOn, parseTime, shiftWeekArray, weekdays, yearDuration, yearScrollSpeed };
+export { DOUBLE, FIFTH_DAY, HALF, MIDDLE_DAY, WEEK, YEAR, calendarSyncOnYearScrollUpdateDelay, dateAnimationDuration, units as default, getDayNumInWeek, getWeekStartsOn, isSafariOnIPhone, parseTime, scrollerReRenderDelayIPhone, shiftWeekArray, weekdays, yearDuration, yearScrollSpeed, yearsAnimationDuration };

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

@@ -28,6 +28,7 @@ import '../global/schedule-raf.js';
 import '../global/dom.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -62,40 +63,40 @@ import 'date-fns';
 import './date-input.js';
 import './months.js';
 import 'date-fns/addMonths';
-import 'date-fns/getDay';
-import 'date-fns/getDaysInMonth';
 import 'date-fns/startOfMonth';
-import 'date-fns/subMonths';
-import 'date-fns/endOfMonth';
-import '../global/linear-function.js';
-import '../global/use-event-callback.js';
 import './month.js';
-import 'date-fns/addDays';
-import 'date-fns/setDay';
+import 'date-fns/getDay';
 import './day.js';
+import 'date-fns/addDays';
 import 'date-fns/getDate';
 import 'date-fns/isToday';
 import './consts.js';
 import 'date-fns/add';
-import './month-names.js';
-import 'date-fns/isThisMonth';
-import 'date-fns/startOfYear';
-import './month-slider.js';
-import 'date-fns/addYears';
-import 'date-fns/subYears';
+import './use-intersection-observer.js';
+import './scroll-arith.js';
+import './use-scroll-behavior.js';
+import '../global/use-event-callback.js';
 import './years.js';
+import 'date-fns/addYears';
 import 'date-fns/getYear';
 import 'date-fns/isThisYear';
 import 'date-fns/setYear';
+import 'date-fns/startOfYear';
+import './animate-date.js';
 import './weekdays.js';
+import 'date-fns/setDay';
+import './month-names.js';
+import 'date-fns/isThisMonth';
+import '../global/linear-function.js';
+import './month-slider.js';
 
 const PopupComponent = t0 => {
   const $ = c(20);
-  if ($[0] !== "9ac32a441b51ccb168078e384a8b8106d0600615e17a2ba85a5d4b3b260d903a") {
+  if ($[0] !== "6c0fae779955e7446a1909ff7858d48071c9f49aa4bbd93c41f2fade36c29627") {
     for (let $i = 0; $i < 20; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "9ac32a441b51ccb168078e384a8b8106d0600615e17a2ba85a5d4b3b260d903a";
+    $[0] = "6c0fae779955e7446a1909ff7858d48071c9f49aa4bbd93c41f2fade36c29627";
   }
   let className;
   let datePopupProps;
@@ -176,7 +177,33 @@ const PopupComponent = t0 => {
   return t4;
 };
 /**
- * @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.
  */
 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;
 }