@progress/kendo-react-dateinputs 8.3.0-develop.1 → 8.3.0-develop.11

package/index.d.mts

@@ -9,6 +9,7 @@ import { Button } from '@progress/kendo-react-buttons';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import { DateFormatOptions } from '@progress/kendo-react-intl';
 import { DateFormatPart } from '@progress/kendo-react-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';
@@ -81,10 +82,6 @@ export declare class CalendarCell extends React_2.Component<CalendarCellProps> {
      * @hidden
      */
     shouldComponentUpdate(nextProps: CalendarCellProps): boolean;
-    /**
-     * @return
-     * Returns a `<td />` element with a `<span className="k-link" />` inside to apply the styles. The text inside is the [`formattedValue`]({% slug api_dateinputs_calendarcellprops %}#toc-formattedvalue) of the `cell`.
-     */
     render(): JSX_2.Element;
     private handleClick;
     private handleMouseEnter;
@@ -104,6 +101,10 @@ export declare interface CalendarCellProps extends CellContext {
     onMouseEnter?: (value: Date, event?: React_2.MouseEvent<any>) => void;
     onMouseLeave?: (value: Date, event?: React_2.MouseEvent<any>) => void;
     [aria: string]: any;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -156,13 +157,7 @@ declare interface CalendarHeaderProps {
  * * [Customizing the title for the current Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)
  * * [Customizing the title for the current MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view)
  */
-export declare class CalendarHeaderTitle extends React_2.PureComponent<CalendarHeaderTitleProps, {}> {
-    /**
-     * @return
-     * Returns a `<span />` element with the [`value`]({% slug api_dateinputs_calendarheadertitleprops %}#toc-value) of the title as a child.
-     */
-    render(): JSX_2.Element;
-}
+export declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom header title of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle).
@@ -179,16 +174,11 @@ export declare interface CalendarHeaderTitleProps {
 }
 
 /**
- * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar. Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem) ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
+ * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar.
+ * Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem)
+ * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
  */
-export declare class CalendarNavigationItem extends React_2.Component<CalendarNavigationItemProps> {
-    /**
-     * @return
-     * Returns a `<li />` element with a `<span />` inside. The text inside represents the [`value`]({% slug api_dateinputs_calendarnavigationitemprops %}#toc-value) of the `navigationItem`.
-     */
-    render(): JSX_2.Element;
-    private handleClick;
-}
+export declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom navigation item of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem).
@@ -229,6 +219,10 @@ export declare interface CalendarProps<T = any> extends CalendarSettings {
      * @hidden
      */
     mobileMode?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -377,14 +371,7 @@ export declare enum CalendarViewEnum {
  * * [Customizing week-column cells in the Calendar]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)
  * * [Customizing week-column cells in the MultiViewCalendar]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-week-column)
  */
-export declare class CalendarWeekCell extends React_2.Component<CalendarWeekCellProps> {
-    /**
-     * @return
-     * Returns a `<td />` element with the [`value`]({% slug api_dateinputs_calendarweekcellprops %}#toc-value) as a child.
-     */
-    private handleClick;
-    render(): JSX_2.Element;
-}
+export declare const CalendarWeekCell: (props: CalendarWeekCellProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom week cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-weekcell).
@@ -398,6 +385,10 @@ export declare interface CalendarWeekCellProps {
     firstDate: Date;
     weekDays?: Date[];
     onClick?: (firstDate: Date, value: Date[], event: React_2.MouseEvent<HTMLTableCellElement>) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /** @hidden */
@@ -741,6 +732,10 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -878,7 +873,7 @@ export declare const dateInputsMessages: {
     "datetimepicker.toggleDateTimeSelector": string;
 };
 
-declare interface DateInputsPopupSettings {
+declare interface DateInputsPopupSettings extends PopupProps {
     /**
      * Controls the popup animation. By default, the open and close animations are enabled.
      */
@@ -1606,6 +1601,8 @@ export declare class DatePickerWithoutContext extends React_2.Component<DatePick
     private handleValueChange;
     private handleFocus;
     private handleBlur;
+    togglePopup: () => void;
+    private handleMouseDownOutside;
     private handleIconClick;
     private handleIconMouseDown;
     private handleKeyDown;
@@ -2251,6 +2248,10 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateTimePicker. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -2789,6 +2790,7 @@ declare interface HeaderProps {
     header?: React_2.ComponentType<CalendarHeaderProps>;
     commands?: React_2.ReactNode;
     verticalView?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3580,6 +3582,7 @@ declare interface TimeListProps {
     disabled?: boolean;
     show?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3693,6 +3696,7 @@ declare interface TimePartProps {
     onNowKeyDown?: (event: React_2.KeyboardEvent) => void;
     show?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3852,6 +3856,10 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4296,6 +4304,7 @@ declare interface TimeSelectorProps {
     show?: boolean;
     footer?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4339,6 +4348,7 @@ declare interface TodayCommandProps {
     onClick?: (event: HeaderEventArguments) => void;
     disabled?: boolean;
     tabIndex?: number;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4465,6 +4475,7 @@ declare interface ViewListProps {
     header?: React_2.ComponentType<CalendarHeaderProps>;
     shouldScroll?: () => boolean;
     tabIndex?: number;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4591,6 +4602,7 @@ declare interface VirtualizationProps {
     total: number;
     role?: string;
     children?: React_2.ReactNode;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**

package/index.d.ts

@@ -9,6 +9,7 @@ import { Button } from '@progress/kendo-react-buttons';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import { DateFormatOptions } from '@progress/kendo-react-intl';
 import { DateFormatPart } from '@progress/kendo-react-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';
@@ -81,10 +82,6 @@ export declare class CalendarCell extends React_2.Component<CalendarCellProps> {
      * @hidden
      */
     shouldComponentUpdate(nextProps: CalendarCellProps): boolean;
-    /**
-     * @return
-     * Returns a `<td />` element with a `<span className="k-link" />` inside to apply the styles. The text inside is the [`formattedValue`]({% slug api_dateinputs_calendarcellprops %}#toc-formattedvalue) of the `cell`.
-     */
     render(): JSX_2.Element;
     private handleClick;
     private handleMouseEnter;
@@ -104,6 +101,10 @@ export declare interface CalendarCellProps extends CellContext {
     onMouseEnter?: (value: Date, event?: React_2.MouseEvent<any>) => void;
     onMouseLeave?: (value: Date, event?: React_2.MouseEvent<any>) => void;
     [aria: string]: any;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -156,13 +157,7 @@ declare interface CalendarHeaderProps {
  * * [Customizing the title for the current Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)
  * * [Customizing the title for the current MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view)
  */
-export declare class CalendarHeaderTitle extends React_2.PureComponent<CalendarHeaderTitleProps, {}> {
-    /**
-     * @return
-     * Returns a `<span />` element with the [`value`]({% slug api_dateinputs_calendarheadertitleprops %}#toc-value) of the title as a child.
-     */
-    render(): JSX_2.Element;
-}
+export declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom header title of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle).
@@ -179,16 +174,11 @@ export declare interface CalendarHeaderTitleProps {
 }
 
 /**
- * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar. Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem) ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
+ * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar.
+ * Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem)
+ * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
  */
-export declare class CalendarNavigationItem extends React_2.Component<CalendarNavigationItemProps> {
-    /**
-     * @return
-     * Returns a `<li />` element with a `<span />` inside. The text inside represents the [`value`]({% slug api_dateinputs_calendarnavigationitemprops %}#toc-value) of the `navigationItem`.
-     */
-    render(): JSX_2.Element;
-    private handleClick;
-}
+export declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom navigation item of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem).
@@ -229,6 +219,10 @@ export declare interface CalendarProps<T = any> extends CalendarSettings {
      * @hidden
      */
     mobileMode?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -377,14 +371,7 @@ export declare enum CalendarViewEnum {
  * * [Customizing week-column cells in the Calendar]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)
  * * [Customizing week-column cells in the MultiViewCalendar]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-week-column)
  */
-export declare class CalendarWeekCell extends React_2.Component<CalendarWeekCellProps> {
-    /**
-     * @return
-     * Returns a `<td />` element with the [`value`]({% slug api_dateinputs_calendarweekcellprops %}#toc-value) as a child.
-     */
-    private handleClick;
-    render(): JSX_2.Element;
-}
+export declare const CalendarWeekCell: (props: CalendarWeekCellProps) => JSX_2.Element;
 
 /**
  * The props which will be received by the custom week cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-weekcell).
@@ -398,6 +385,10 @@ export declare interface CalendarWeekCellProps {
     firstDate: Date;
     weekDays?: Date[];
     onClick?: (firstDate: Date, value: Date[], event: React_2.MouseEvent<HTMLTableCellElement>) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /** @hidden */
@@ -741,6 +732,10 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateInput. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -878,7 +873,7 @@ export declare const dateInputsMessages: {
     "datetimepicker.toggleDateTimeSelector": string;
 };
 
-declare interface DateInputsPopupSettings {
+declare interface DateInputsPopupSettings extends PopupProps {
     /**
      * Controls the popup animation. By default, the open and close animations are enabled.
      */
@@ -1606,6 +1601,8 @@ export declare class DatePickerWithoutContext extends React_2.Component<DatePick
     private handleValueChange;
     private handleFocus;
     private handleBlur;
+    togglePopup: () => void;
+    private handleMouseDownOutside;
     private handleIconClick;
     private handleIconMouseDown;
     private handleKeyDown;
@@ -2251,6 +2248,10 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the DateTimePicker. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -2789,6 +2790,7 @@ declare interface HeaderProps {
     header?: React_2.ComponentType<CalendarHeaderProps>;
     commands?: React_2.ReactNode;
     verticalView?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3580,6 +3582,7 @@ declare interface TimeListProps {
     disabled?: boolean;
     show?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3693,6 +3696,7 @@ declare interface TimePartProps {
     onNowKeyDown?: (event: React_2.KeyboardEvent) => void;
     show?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -3852,6 +3856,10 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4296,6 +4304,7 @@ declare interface TimeSelectorProps {
     show?: boolean;
     footer?: boolean;
     mobileMode?: boolean;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4339,6 +4348,7 @@ declare interface TodayCommandProps {
     onClick?: (event: HeaderEventArguments) => void;
     disabled?: boolean;
     tabIndex?: number;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4465,6 +4475,7 @@ declare interface ViewListProps {
     header?: React_2.ComponentType<CalendarHeaderProps>;
     shouldScroll?: () => boolean;
     tabIndex?: number;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**
@@ -4591,6 +4602,7 @@ declare interface VirtualizationProps {
     total: number;
     role?: string;
     children?: React_2.ReactNode;
+    unstyled?: DateInputsClassStructure;
 }
 
 /**

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-dateinputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1723203555,
+  publishDate: 1724738526,
   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": "8.3.0-develop.1",
+  "version": "8.3.0-develop.11",
   "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,12 @@
   "peerDependencies": {
     "@progress/kendo-date-math": "^1.4.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "8.3.0-develop.1",
-    "@progress/kendo-react-common": "8.3.0-develop.1",
-    "@progress/kendo-react-intl": "8.3.0-develop.1",
-    "@progress/kendo-react-labels": "8.3.0-develop.1",
-    "@progress/kendo-react-layout": "8.3.0-develop.1",
-    "@progress/kendo-react-popup": "8.3.0-develop.1",
+    "@progress/kendo-react-buttons": "8.3.0-develop.11",
+    "@progress/kendo-react-common": "8.3.0-develop.11",
+    "@progress/kendo-react-intl": "8.3.0-develop.11",
+    "@progress/kendo-react-labels": "8.3.0-develop.11",
+    "@progress/kendo-react-layout": "8.3.0-develop.11",
+    "@progress/kendo-react-popup": "8.3.0-develop.11",
     "@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.js

@@ -5,10 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),c=require("prop-types"),v=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-intl"),b=require("../virtualization/Virtualization.js"),u=require("./models/TimePart.js"),x=require("./services/DayPeriodService.js"),y=require("./services/DOMService.js"),I=require("./services/HoursService.js"),M=require("./services/MinutesService.js"),H=require("./services/SecondsService.js"),d=require("../utils.js");function D(o){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>o[e]})}}return s.default=o,Object.freeze(s)}const r=D(T),E=2,g=.05,P=100,R=0,O=9,k={[a.Keys.end]:(o,s)=>o[o.length-1],[a.Keys.home]:(o,s)=>o[0],[a.Keys.up]:(o,s)=>o[s-1],[a.Keys.down]:(o,s)=>o[s+1]},m={[u.TIME_PART.dayperiod]:x.DayPeriodService,[u.TIME_PART.hour]:I.HoursService,[u.TIME_PART.minute]:M.MinutesService,[u.TIME_PART.second]:H.SecondsService},h=class h extends r.Component{constructor(s){super(s),this.intl=null,this._element=null,this.service=null,this.virtualization=null,this.topOffset=0,this.bottomOffset=0,this.itemHeight=0,this.listHeight=0,this.topThreshold=0,this.bottomThreshold=0,this.animateToIndex=!1,this.focus=e=>{Promise.resolve().then(()=>{this.element&&this.element.focus(e)})},this.itemOffset=e=>{if(!this.virtualization||!this.service)return-1;const t=this.service.selectedIndex(this.props.value),i=this.virtualization.activeIndex(),n=this.virtualization.itemOffset(i),l=Math.abs(Math.ceil(e)-n);if(t===i&&l<E)return n;const f=t>i;return f&&l>=this.bottomThreshold||!f&&l>this.topThreshold?this.virtualization.itemOffset(i+1):n},this.calculateHeights=()=>{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+=O,this.bottomOffset+=O*2),this.topThreshold=this.itemHeight*g,this.bottomThreshold=this.itemHeight*(1-g))},this.configureServices=({min:e,max:t,value:i}=this.props)=>{if(this.service){const[n,l]=this.service.limitRange(e||this.min,t||this.max,i||this.props.value);this.service.configure(this.serviceSettings({min:n,max:l}))}},this.serviceSettings=e=>{const t={boundRange:this.props.boundRange||h.defaultProps.boundRange,insertUndividedMax:!1,min:v.cloneDate(this.min),max:v.cloneDate(this.max),part:this.props.part,step:this.step},i=Object.assign({},t,e);return i.boundRange=i.part.type!=="hour"||this.props.boundRange||h.defaultProps.boundRange,i},this.handleScrollAction=({target:e,animationInProgress:t})=>{if(!(!this.virtualization||!this.service)&&e&&!t){this.animateToIndex=!1;const i=this.virtualization.itemIndex(this.itemOffset(e.scrollTop)),n=this.service.data(this.props.value)[i];this.handleChange(n)}},this.handleFocus=e=>{const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleBlur=e=>{const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.handleMouseOver=()=>{if(!this._element)return;const e=a.getActiveElement(document);document&&e!==this._element&&this.props.show&&this._element.focus({preventScroll:!0})},this.handleKeyDown=e=>{if(!this.service)return;const{keyCode:t}=e;(t===a.Keys.down||t===a.Keys.up||t===a.Keys.end||t===a.Keys.home)&&e.preventDefault();const n=(k[e.keyCode]||a.noop)(this.service.data(this.props.value),this.service.selectedIndex(this.props.value));n&&this.handleChange(n)},this.handleChange=d.debounce(e=>{if(!this.service)return;const t=this.service.apply(this.props.value,e.value);if(this.props.value.getTime()===t.getTime())return;const{onChange:i}=this.props;i&&i.call(void 0,t)},P),this.dom=new y.DOMService}get element(){return this._element}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get min(){return this.props.min||h.defaultProps.min}get max(){return this.props.max||h.defaultProps.max}get step(){return this.props.step!==void 0&&this.props.step!==0?Math.floor(this.props.step):h.defaultProps.step}componentDidMount(){Promise.resolve().then(()=>{this._element&&(this.dom.calculateHeights(this._element),this.forceUpdate())})}componentDidUpdate(){if(!this.virtualization||!this.service)return;const s=this.service.selectedIndex(this.props.value);this.virtualization[this.animate?"animateToIndex":"scrollToIndex"](s),this.animateToIndex=!0}render(){if(!this.props.part.type||!m[this.props.part.type])return;this.calculateHeights(),this.intl=S.provideIntlService(this),this.service=new m[this.props.part.type](this.intl),this.configureServices();const s=this.service.data(this.props.value),e="translateY("+this.topOffset+"px)",t=this.service.total(this.props.value),i=r.createElement(r.Fragment,null,r.createElement("ul",{style:{transform:e,msTransform:e},className:"k-reset"},s.map((n,l)=>r.createElement("li",{key:l,className:"k-item",onClick:()=>{this.handleChange(n)}},r.createElement("span",null,n.text)))),r.createElement("div",{className:"k-scrollable-placeholder"}));return r.createElement("div",{className:"k-time-list",id:String(this.props.id||""),tabIndex:this.props.disabled?-1:0,ref:n=>{this._element=n},onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseOver:this.handleMouseOver},this.dom.didCalculate?r.createElement(b.Virtualization,{bottomOffset:this.bottomOffset,children:i,className:"k-time-container",itemHeight:this.itemHeight,maxScrollDifference:this.listHeight,onScrollAction:this.handleScrollAction,ref:n=>{this.virtualization=n},role:"presentation",skip:R,tabIndex:-1,take:t,topOffset:this.topOffset,total:t}):r.createElement("div",{className:"k-time-container k-content k-scrollable"},i))}};h.propTypes={id:c.number,max:c.instanceOf(Date),min:c.instanceOf(Date),part:function(s,e,t){const i=s[e];if(!i||!m[i.type])throw new Error(`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),u=require("prop-types"),T=require("@progress/kendo-date-math"),i=require("@progress/kendo-react-common"),b=require("@progress/kendo-react-intl"),I=require("../virtualization/Virtualization.js"),p=require("./models/TimePart.js"),M=require("./services/DayPeriodService.js"),H=require("./services/DOMService.js"),D=require("./services/HoursService.js"),E=require("./services/MinutesService.js"),P=require("./services/SecondsService.js"),v=require("../utils.js");function R(o){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>o[e]})}}return n.default=o,Object.freeze(n)}const a=R(y),_=2,O=.05,w=100,C=0,S=9,N={[i.Keys.end]:(o,n)=>o[o.length-1],[i.Keys.home]:(o,n)=>o[0],[i.Keys.up]:(o,n)=>o[n-1],[i.Keys.down]:(o,n)=>o[n+1]},g={[p.TIME_PART.dayperiod]:M.DayPeriodService,[p.TIME_PART.hour]:D.HoursService,[p.TIME_PART.minute]:E.MinutesService,[p.TIME_PART.second]:P.SecondsService},l=class l extends a.Component{constructor(n){super(n),this.intl=null,this._element=null,this.service=null,this.virtualization=null,this.topOffset=0,this.bottomOffset=0,this.itemHeight=0,this.listHeight=0,this.topThreshold=0,this.bottomThreshold=0,this.animateToIndex=!1,this.focus=e=>{Promise.resolve().then(()=>{this.element&&this.element.focus(e)})},this.itemOffset=e=>{if(!this.virtualization||!this.service)return-1;const t=this.service.selectedIndex(this.props.value),s=this.virtualization.activeIndex(),r=this.virtualization.itemOffset(s),h=Math.abs(Math.ceil(e)-r);if(t===s&&h<_)return r;const d=t>s;return d&&h>=this.bottomThreshold||!d&&h>this.topThreshold?this.virtualization.itemOffset(s+1):r},this.calculateHeights=()=>{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+=S,this.bottomOffset+=S*2),this.topThreshold=this.itemHeight*O,this.bottomThreshold=this.itemHeight*(1-O))},this.configureServices=({min:e,max:t,value:s}=this.props)=>{if(this.service){const[r,h]=this.service.limitRange(e||this.min,t||this.max,s||this.props.value);this.service.configure(this.serviceSettings({min:r,max:h}))}},this.serviceSettings=e=>{const t={boundRange:this.props.boundRange||l.defaultProps.boundRange,insertUndividedMax:!1,min:T.cloneDate(this.min),max:T.cloneDate(this.max),part:this.props.part,step:this.step},s=Object.assign({},t,e);return s.boundRange=s.part.type!=="hour"||this.props.boundRange||l.defaultProps.boundRange,s},this.handleScrollAction=({target:e,animationInProgress:t})=>{if(!(!this.virtualization||!this.service)&&e&&!t){this.animateToIndex=!1;const s=this.virtualization.itemIndex(this.itemOffset(e.scrollTop)),r=this.service.data(this.props.value)[s];this.handleChange(r)}},this.handleFocus=e=>{const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleBlur=e=>{const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.handleMouseOver=()=>{if(!this._element)return;const e=i.getActiveElement(document);document&&e!==this._element&&this.props.show&&this._element.focus({preventScroll:!0})},this.handleKeyDown=e=>{if(!this.service)return;const{keyCode:t}=e;(t===i.Keys.down||t===i.Keys.up||t===i.Keys.end||t===i.Keys.home)&&e.preventDefault();const r=(N[e.keyCode]||i.noop)(this.service.data(this.props.value),this.service.selectedIndex(this.props.value));r&&this.handleChange(r)},this.handleChange=v.debounce(e=>{if(!this.service)return;const t=this.service.apply(this.props.value,e.value);if(this.props.value.getTime()===t.getTime())return;const{onChange:s}=this.props;s&&s.call(void 0,t)},w),this.dom=new H.DOMService}get element(){return this._element}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get min(){return this.props.min||l.defaultProps.min}get max(){return this.props.max||l.defaultProps.max}get step(){return this.props.step!==void 0&&this.props.step!==0?Math.floor(this.props.step):l.defaultProps.step}componentDidMount(){Promise.resolve().then(()=>{this._element&&(this.dom.calculateHeights(this._element),this.forceUpdate())})}componentDidUpdate(){if(!this.virtualization||!this.service)return;const n=this.service.selectedIndex(this.props.value);this.virtualization[this.animate?"animateToIndex":"scrollToIndex"](n),this.animateToIndex=!0}render(){const{part:n,value:e,unstyled:t}=this.props;if(!n.type||!g[n.type])return;const s=t&&t.uTime;this.calculateHeights(),this.intl=b.provideIntlService(this),this.service=new g[n.type](this.intl),this.configureServices();const r=this.service.data(e),h="translateY("+this.topOffset+"px)",d=this.service.total(e),f=a.createElement(a.Fragment,null,a.createElement("ul",{style:{transform:h,msTransform:h},className:i.classNames(i.uTime.ul({c:s}))},r.map((c,x)=>a.createElement("li",{key:x,className:i.classNames(i.uTime.li({c:s})),onClick:()=>{this.handleChange(c)}},a.createElement("span",null,c.text)))),a.createElement("div",{className:i.classNames(i.uTime.scrollablePlaceholder({c:s}))}));return a.createElement("div",{className:i.classNames(i.uTime.list({c:s})),id:String(this.props.id||""),tabIndex:this.props.disabled?-1:0,ref:c=>{this._element=c},onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseOver:this.handleMouseOver},this.dom.didCalculate?a.createElement(I.Virtualization,{bottomOffset:this.bottomOffset,children:f,className:i.classNames(i.uTime.container({c:s})),itemHeight:this.itemHeight,maxScrollDifference:this.listHeight,onScrollAction:this.handleScrollAction,ref:c=>{this.virtualization=c},role:"presentation",skip:C,tabIndex:-1,take:d,topOffset:this.topOffset,total:d}):a.createElement("div",{className:i.classNames(i.uTime.container({c:s,content:!0,scrollable:!0}))},f))}};l.propTypes={id:u.number,max:u.instanceOf(Date),min:u.instanceOf(Date),part:function(n,e,t){const s=n[e];if(!s||!g[s.type])throw new Error(`
                     Invalid prop '${e}' supplied to ${t}.
                     Supported part types are hour|minute|second|dayperiod.
-                `);return null},step:function(s,e,t){const i=s[e];if(i!==void 0&&i<=0)throw new Error(`
+                `);return null},step:function(n,e,t){const s=n[e];if(s!==void 0&&s<=0)throw new Error(`
                     Invalid prop '${e}' supplied to ${t}.
                     ${e} cannot be less than 1.
-                `);return null},value:c.instanceOf(Date),smoothScroll:c.bool,show:c.bool},h.defaultProps={boundRange:!1,max:d.MAX_TIME,min:d.MIDNIGHT_DATE,step:1,smoothScroll:!0};let p=h;S.registerForIntl(p);exports.TimeList=p;
+                `);return null},value:u.instanceOf(Date),smoothScroll:u.bool,show:u.bool},l.defaultProps={boundRange:!1,max:v.MAX_TIME,min:v.MIDNIGHT_DATE,step:1,smoothScroll:!0};let m=l;b.registerForIntl(m);exports.TimeList=m;