@progress/kendo-react-dateinputs 9.0.0-develop.2 → 9.0.0-develop.20

package/index.d.ts

@@ -5,20 +5,26 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Button } from '@progress/kendo-react-buttons';
+import { ButtonHandle } from '@progress/kendo-react-buttons';
 import { ButtonProps } from '@progress/kendo-react-buttons';
+import { DateFieldNameOptions } from '@progress/kendo-intl';
 import { DateFormatOptions } from '@progress/kendo-react-intl';
+import { DateFormatOptions as DateFormatOptions_2 } from '@progress/kendo-intl';
 import { DateFormatPart } from '@progress/kendo-react-intl';
+import { DateFormatPart as DateFormatPart_2 } from '@progress/kendo-intl';
 import { DateInputsClassStructure } from '@progress/kendo-react-common';
 import { FormComponent } from '@progress/kendo-react-common';
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { FormComponentValidity } from '@progress/kendo-react-common';
+import { ForwardRefExoticComponent } from 'react';
 import { IntlService } from '@progress/kendo-react-intl';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LocalizationService } from '@progress/kendo-react-intl';
+import { NumberFormatOptions } from '@progress/kendo-intl';
 import { PopupProps } from '@progress/kendo-react-popup';
 import PropTypes from 'prop-types';
 import * as React_2 from 'react';
+import { RefAttributes } from 'react';
 
 /**
  * @hidden
@@ -562,6 +568,34 @@ export declare interface DateInputChangeEvent<T = DateInput> {
     target: T;
 }
 
+/** @hidden */
+declare interface DateInputCommonPackageProps {
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default `true`
+     */
+    autoCorrectParts?: boolean;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default `true`
+     */
+    autoSwitchParts?: boolean;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     *
+     * @default `[]`
+     */
+    autoSwitchKeys?: string[];
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode?: boolean;
+}
+
 /**
  * The interface which defines a custom-format placeholder structure in the DateInput.
  */
@@ -637,10 +671,29 @@ export declare interface DateInputIncrementalSteps {
     second?: number;
 }
 
+declare class DateInputIntl {
+    private service;
+    format: (format: string, ...values: any[]) => string;
+    toString: (value: any, format: any, localeId?: string) => string;
+    formatDate: (value: Date, format?: string | DateFormatOptions_2, localeId?: string) => string;
+    parseDate: (value: string, format?: string | DateFormatOptions_2 | string[] | DateFormatOptions_2[], localeId?: string) => Date;
+    parseNumber: (value: string, format?: string | NumberFormatOptions, localeId?: string) => number;
+    formatNumber: (value: number, format: string | NumberFormatOptions, localeId?: string) => string;
+    splitDateFormat: (format: string | DateFormatOptions_2, localeId?: string) => DateFormatPart_2[];
+    numberSymbols: (localeId?: string) => void;
+    firstDay: (localeId?: string) => number;
+    weekendRange: (localeId?: string) => any;
+    dateFieldName: (options: DateFieldNameOptions, localeId?: string) => string;
+    dateFormatNames: (localeId: any, options: any) => any;
+    cldr: any;
+    localeId: string;
+    constructor(service: IntlService);
+}
+
 /**
  * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
  */
-export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
+export declare interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings, DateInputCommonPackageProps {
     /** @hidden */
     _ref?: React_2.MutableRefObject<DateInput | null>;
     /**
@@ -665,6 +718,8 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     defaultValue?: Date | null;
     /**
      * Indicates the availability of interactive popup element that can be triggered by an element. By default the property is set to `grid`.
+     *
+     * @default `grid`
      */
     ariaHasPopup?: boolean | 'grid' | 'dialog';
     /**
@@ -730,8 +785,29 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
     clearButton?: boolean;
     /**
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`)
+     *
+     * @default `false`
      */
     autoFocus?: boolean;
+    /**
+     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
     /**
      * @hidden
      */
@@ -979,34 +1055,23 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
         validityStyles: boolean;
         validationMessage: string;
         placeholder: null;
+        enableMouseWheel: boolean;
+        autoCorrectParts: boolean;
+        autoSwitchParts: boolean;
+        allowCaretMode: boolean;
+        twoDigitYearMax: number;
         ariaHasPopup: string;
         autoFocus: boolean;
     };
     private kendoDate;
-    private currentFormat;
+    private kendoDateObject;
+    private mounted;
     private valueDuringOnChange;
-    private paste;
     private _element;
     private _wrapper;
+    private _nativeEvent;
     private get _inputId();
-    private _lastSelectedSymbol;
     constructor(props: DateInputProps);
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(_: any, prevState: any): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): any;
     /**
      * Gets the value of the DateInput.
      */
@@ -1017,6 +1082,7 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
     get name(): string | undefined;
     protected get min(): Date;
     protected get max(): Date;
+    protected get isInSegmentSelection(): Date;
     /**
      * @hidden
      */
@@ -1073,34 +1139,65 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
      * @hidden
      */
     protected get wrapper(): HTMLSpanElement | null;
+    /**
+     * @hidden
+     */
+    get options(): {
+        format: string | DateFormatOptions | undefined;
+        steps: DateInputIncrementalSteps | undefined;
+        formatPlaceholder: string;
+        placeholder: string | null | undefined;
+        selectPreviousSegmentOnBackspace: boolean;
+        value: Date | null;
+        intlService: DateInputIntl;
+        autoFill: boolean;
+        enableMouseWheel: boolean | undefined;
+        autoCorrectParts: boolean | undefined;
+        autoSwitchParts: boolean | undefined;
+        autoSwitchKeys: string[];
+        twoDigitYearMax: number | undefined;
+        allowCaretMode: boolean | undefined;
+    };
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: DateInputProps): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): any;
     /**
      * @hidden
      */
     intl(): IntlService;
+    /**
+     * @hidden
+     */
+    private intlProvider;
+    get intlCommon(): IntlService;
     /**
      * @hidden
      */
     protected setValidity: () => void;
     protected updateOnPaste: (event: React_2.SyntheticEvent<HTMLInputElement>) => void;
     private spinnersMouseDown;
-    private handlePaste;
     private handleClick;
-    private elementChange;
-    private elementClick;
     private nativeWheel;
-    private wheel;
     private increasePart;
     private decreasePart;
-    private elementKeyDown;
     private elementOnFocus;
     private elementOnBlur;
-    private get selection();
-    private setSelection;
     private triggerChange;
-    private selectionBySymbol;
-    private selectionByIndex;
-    private switchDateSegment;
-    private modifyDateSegmentValue;
+    private onChange;
+    private initKendoDate;
 }
 
 /** @hidden */
@@ -1176,7 +1273,7 @@ export declare interface DatePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DatePicker component]({% slug overview_datepicker %}).
  */
-export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, Omit<(React_2.HTMLAttributes<HTMLElement>), 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
+export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps, DateInputCommonPackageProps, Omit<React_2.HTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'placeholder'> {
     /**
      * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})).
      */
@@ -1260,6 +1357,25 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
      * @hidden
      */
     modified?: boolean;
+    /**
+     * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -2168,7 +2284,7 @@ export declare interface DateTimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact DateTimePicker component]({% slug overview_datetimepicker %}).
  */
-export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps {
+export declare interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the DateTimePicker
      * ([see example]({% slug default_value_datetimepicker %})).
@@ -2250,6 +2366,25 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * When enabled, the DateTimePicker will autofill the rest of the date/time to the current date/time when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill?: boolean;
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example]({% slug formats_dateinput %}#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax?: number;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the datetime segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -3785,7 +3920,7 @@ export declare interface TimePickerOpenEvent {
 /**
  * Represents the props of the [KendoReact TimePicker component]({% slug overview_timepicker %}).
  */
-export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps, DateInputCommonPackageProps {
     /**
      * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
      */
@@ -3857,6 +3992,12 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
      * @hidden
      */
     unstyled?: DateInputsClassStructure;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel?: boolean;
 }
 
 /**
@@ -4350,7 +4491,7 @@ declare interface TodayCommandProps {
 /**
  * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
  */
-export declare const ToggleButton: typeof Button;
+export declare const ToggleButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<ButtonHandle | null>>;
 
 /**
  * Represents the props of the KendoReact [Toggle Button]({% slug api_dateinputs_togglebutton %}) component.

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-dateinputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1729236335,
+  publishDate: 1731056714,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-dateinputs",
-  "version": "9.0.0-develop.2",
+  "version": "9.0.0-develop.20",
   "description": "React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -24,12 +24,13 @@
   "peerDependencies": {
     "@progress/kendo-date-math": "^1.4.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "9.0.0-develop.2",
-    "@progress/kendo-react-common": "9.0.0-develop.2",
-    "@progress/kendo-react-intl": "9.0.0-develop.2",
-    "@progress/kendo-react-labels": "9.0.0-develop.2",
-    "@progress/kendo-react-layout": "9.0.0-develop.2",
-    "@progress/kendo-react-popup": "9.0.0-develop.2",
+    "@progress/kendo-dateinputs-common": "0.3.5",
+    "@progress/kendo-react-buttons": "9.0.0-develop.20",
+    "@progress/kendo-react-common": "9.0.0-develop.20",
+    "@progress/kendo-react-intl": "9.0.0-develop.20",
+    "@progress/kendo-react-labels": "9.0.0-develop.20",
+    "@progress/kendo-react-layout": "9.0.0-develop.20",
+    "@progress/kendo-react-popup": "9.0.0-develop.20",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/timepicker/TimeList.mjs

@@ -47,7 +47,11 @@ const F = 2, S = 0.05, N = 100, k = 0, T = 9, B = {
       this.dom.didCalculate && (this.itemHeight = this.dom.itemHeight, this.listHeight = this.dom.timeListHeight, this.topOffset = (this.listHeight - this.itemHeight) / 2, this.bottomOffset = this.listHeight - this.itemHeight, this.props.mobileMode && (this.topOffset += T, this.bottomOffset += T * 2), this.topThreshold = this.itemHeight * S, this.bottomThreshold = this.itemHeight * (1 - S));
     }, this.configureServices = ({ min: t, max: s, value: e } = this.props) => {
       if (this.service) {
-        const [o, l] = this.service.limitRange(t || this.min, s || this.max, e || this.props.value);
+        const [o, l] = this.service.limitRange(
+          t || this.min,
+          s || this.max,
+          e || this.props.value
+        );
         this.service.configure(this.serviceSettings({ min: o, max: l }));
       }
     }, this.serviceSettings = (t) => {
@@ -82,10 +86,7 @@ const F = 2, S = 0.05, N = 100, k = 0, T = 9, B = {
         return;
       const { keyCode: s } = t;
       (s === c.down || s === c.up || s === c.end || s === c.home) && t.preventDefault();
-      const o = (B[t.keyCode] || H)(
-        this.service.data(this.props.value),
-        this.service.selectedIndex(this.props.value)
-      );
+      const o = (B[t.keyCode] || H)(this.service.data(this.props.value), this.service.selectedIndex(this.props.value));
       o && this.handleChange(o);
     }, this.handleChange = _((t) => {
       if (!this.service)
@@ -148,9 +149,17 @@ const F = 2, S = 0.05, N = 100, k = 0, T = 9, B = {
         style: { transform: l, msTransform: l },
         className: u(a.ul({ c: e }))
       },
-      o.map((p, b) => /* @__PURE__ */ n.createElement("li", { key: b, className: u(a.li({ c: e })), onClick: () => {
-        this.handleChange(p);
-      } }, /* @__PURE__ */ n.createElement("span", null, p.text)))
+      o.map((p, b) => /* @__PURE__ */ n.createElement(
+        "li",
+        {
+          key: b,
+          className: u(a.li({ c: e })),
+          onClick: () => {
+            this.handleChange(p);
+          }
+        },
+        /* @__PURE__ */ n.createElement("span", null, p.text)
+      ))
     ), /* @__PURE__ */ n.createElement("div", { className: u(a.scrollablePlaceholder({ c: e })) }));
     return /* @__PURE__ */ n.createElement(
       "div",
@@ -189,10 +198,16 @@ const F = 2, S = 0.05, N = 100, k = 0, T = 9, B = {
           total: d,
           unstyled: s
         }
-      ) : /* @__PURE__ */ n.createElement("div", { className: u(
-        a.containerSelector({ c: e }),
-        a.container({ c: e, content: !0, scrollable: !0 })
-      ) }, v)
+      ) : /* @__PURE__ */ n.createElement(
+        "div",
+        {
+          className: u(
+            a.containerSelector({ c: e }),
+            a.container({ c: e, content: !0, scrollable: !0 })
+          )
+        },
+        v
+      )
     );
   }
 };

package/timepicker/TimePart.mjs

@@ -17,7 +17,9 @@ import { MIN_TIME as A, MAX_TIME as K, MIDNIGHT_DATE as _ } from "../utils.mjs";
 import { TIME_PART as d } from "./models/TimePart.mjs";
 import { isInTimeRange as $, getNow as z, snapTime as N, generateSnappers as B, timeInRange as W } from "./utils.mjs";
 import { Button as j } from "@progress/kendo-react-buttons";
-const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`), a = class a extends n.Component {
+const v = new RegExp(
+  `${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`
+), a = class a extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._nowButton = null, this.dateFormatParts = [], this.timeLists = [], this.focus = (s, e) => {
       Promise.resolve().then(() => {
@@ -30,10 +32,12 @@ const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`)
       return r && r && s.type === "literal" ? v.test(r.type || "") : v.test(s.type || "");
     }, this.focusList = (s) => {
       this.timeLists.length && this.timeLists.reduce(this.listReducer, []).map((e) => s === 1 ? e.next : e.prev).map((e) => e && e.element && e.element.focus({ preventScroll: !0 }));
-    }, this.listReducer = (s, e, o, r) => s.length || e.props.id !== this.state.activeListIndex ? s : [{
-      next: r[o + 1] || e,
-      prev: r[o - 1] || e
-    }], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && $(z(), this.min, this.max), this.handleKeyDown = (s) => {
+    }, this.listReducer = (s, e, o, r) => s.length || e.props.id !== this.state.activeListIndex ? s : [
+      {
+        next: r[o + 1] || e,
+        prev: r[o - 1] || e
+      }
+    ], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && $(z(), this.min, this.max), this.handleKeyDown = (s) => {
       const { keyCode: e } = s;
       switch (e) {
         case T.left:
@@ -62,9 +66,7 @@ const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`)
     }, this.handleChange = (s) => {
       const { onChange: e } = this.props;
       e && e.call(void 0, s);
-    }, this.snapTime = N(
-      B(this.props.steps, this.props.min || a.defaultProps.min)
-    ), this.state = {
+    }, this.snapTime = N(B(this.props.steps, this.props.min || a.defaultProps.min)), this.state = {
       activeListIndex: -1
     }, this.hasActiveButton = this.hasActiveButton.bind(this);
   }
@@ -75,11 +77,7 @@ const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`)
     return this._element;
   }
   get value() {
-    return W(
-      this.snapTime(O(this.props.value || _)),
-      this.min,
-      this.max
-    );
+    return W(this.snapTime(O(this.props.value || _)), this.min, this.max);
   }
   get intl() {
     return k(this);
@@ -110,17 +108,7 @@ const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`)
    * @hidden
    */
   render() {
-    const {
-      format: i,
-      smoothScroll: s,
-      onNowClick: e,
-      className: o,
-      disabled: r,
-      mobileMode: w,
-      show: D,
-      onNowKeyDown: E,
-      unstyled: g
-    } = this.props, m = g && g.uTime;
+    const { format: i, smoothScroll: s, onNowClick: e, className: o, disabled: r, mobileMode: w, show: D, onNowKeyDown: E, unstyled: g } = this.props, m = g && g.uTime;
     this.snapTime = N(B(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(i || a.defaultProps.format).filter(this.timeFormatFilter);
     const F = l(
       h.part({
@@ -149,63 +137,55 @@ const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`)
         tabIndex: r ? -1 : 0
       },
       b.toLanguageString(I, x[I])
-    )), /* @__PURE__ */ n.createElement(
+    )), /* @__PURE__ */ n.createElement("div", { className: l(h.listContainer({ c: m })), onKeyDown: this.handleKeyDown }, /* @__PURE__ */ n.createElement("span", { className: l(h.highlight({ c: m })) }), this.dateFormatParts.map((u, c) => u.type !== "literal" ? /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: l(h.listContainer({ c: m })),
-        onKeyDown: this.handleKeyDown
+        key: c,
+        className: l(
+          h.listWrapper({
+            c: m,
+            focused: c === this.state.activeListIndex
+          })
+        ),
+        role: "presentation",
+        tabIndex: -1
       },
-      /* @__PURE__ */ n.createElement("span", { className: l(h.highlight({ c: m })) }),
-      this.dateFormatParts.map((u, c) => u.type !== "literal" ? /* @__PURE__ */ n.createElement(
-        "div",
+      /* @__PURE__ */ n.createElement(
+        "span",
         {
-          key: c,
-          className: l(
-            h.listWrapper({
-              c: m,
-              focused: c === this.state.activeListIndex
-            })
-          ),
-          role: "presentation",
-          tabIndex: -1
-        },
-        /* @__PURE__ */ n.createElement("span", { className: l(h.title({ c: m })), onMouseDown: (p) => {
-          p.preventDefault();
-        } }, this.intl.dateFieldName(u)),
-        /* @__PURE__ */ n.createElement(
-          P,
-          {
-            min: this.min,
-            max: this.max,
-            boundRange: this.boundRange,
-            part: u,
-            step: u.type ? this.steps[u.type] : 1,
-            smoothScroll: s,
-            ref: (p) => {
-              p && this.timeLists.push(p);
-            },
-            id: c,
-            onFocus: () => {
-              this.handleListFocus(c);
-            },
-            onBlur: this.handleListBlur,
-            onChange: this.handleChange,
-            value: this.value,
-            disabled: r,
-            show: D,
-            mobileMode: w,
-            unstyled: g
+          className: l(h.title({ c: m })),
+          onMouseDown: (p) => {
+            p.preventDefault();
           }
-        )
-      ) : /* @__PURE__ */ n.createElement(
-        "div",
-        {
-          key: c,
-          className: l(h.separator({ c: m }))
         },
-        u.pattern
-      ))
-    ));
+        this.intl.dateFieldName(u)
+      ),
+      /* @__PURE__ */ n.createElement(
+        P,
+        {
+          min: this.min,
+          max: this.max,
+          boundRange: this.boundRange,
+          part: u,
+          step: u.type ? this.steps[u.type] : 1,
+          smoothScroll: s,
+          ref: (p) => {
+            p && this.timeLists.push(p);
+          },
+          id: c,
+          onFocus: () => {
+            this.handleListFocus(c);
+          },
+          onBlur: this.handleListBlur,
+          onChange: this.handleChange,
+          value: this.value,
+          disabled: r,
+          show: D,
+          mobileMode: w,
+          unstyled: g
+        }
+      )
+    ) : /* @__PURE__ */ n.createElement("div", { key: c, className: l(h.separator({ c: m })) }, u.pattern))));
   }
   nextTick(i) {
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());