@progress/kendo-react-dateinputs 14.4.1 → 14.5.0-develop.1

package/calendar/components/ViewList.mjs

@@ -5,233 +5,215 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import o from "prop-types";
-import { classNames as p, uCalendar as m } from "@progress/kendo-react-common";
-import { cloneDate as T, getDate as g, isEqualDate as E } from "@progress/kendo-date-math";
-import { provideIntlService as N, registerForIntl as O } from "@progress/kendo-react-intl";
-import { Virtualization as H } from "../../virtualization/Virtualization.mjs";
-import { View as z } from "./View.mjs";
-import { Header as A } from "./Header.mjs";
-import { WeekNamesService as R } from "../services/WeekNamesService.mjs";
-import { dateInRange as D, isInRange as _, getToday as q } from "../../utils.mjs";
-import { CalendarViewEnum as c } from "../models/CalendarViewEnum.mjs";
-import { TodayCommand as F } from "./TodayCommand.mjs";
-const M = 5, d = class d extends a.Component {
-  constructor(n) {
-    super(n), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.weekService = null, this.focusActiveDate = () => {
-      if (!this._element)
-        return;
-      const e = this._element.querySelector("td.k-focus"), i = this._element.querySelector(".k-state-pending-focus");
-      e && e[0] && e[0].classList.remove("k-focus"), i && i.classList.add("k-focus"), this.isActive = !0;
-    }, this.blurActiveDate = () => {
-      if (!this._element)
-        return;
-      const e = this._element.querySelector("td.k-focus");
-      e && e.classList.remove("k-focus"), this.isActive = !1;
-    }, this.handleVirtualizationMount = (e) => {
-      if (this.virtualization = e, this.virtualization && this.table) {
-        this.table.style.transform = `translateY(${this.viewOffset}px)`;
-        const i = D(this.props.focusedDate, this.props.min, this.props.max), t = this.props.service.skip(i, this.props.min);
-        this.virtualization.scrollToIndex(t);
-      }
-    }, this.buildMonthView = (e, i) => {
-      const { unstyled: t } = this.props, s = t && t.uCalendar;
-      return /* @__PURE__ */ a.createElement(
-        "table",
-        {
-          key: "calendar-view-list-weekdays",
-          className: p(m.table({ c: s, weekdays: !0 })),
-          role: "grid",
-          tabIndex: this.props.tabIndex
-        },
-        /* @__PURE__ */ a.createElement("colgroup", null, e.map((l, r) => /* @__PURE__ */ a.createElement("col", { key: r }))),
-        /* @__PURE__ */ a.createElement("thead", { className: p(m.thead({ c: s })) }, /* @__PURE__ */ a.createElement("tr", { className: p(m.tr({ c: s })) }, i.map((l, r) => /* @__PURE__ */ a.createElement("th", { key: r, className: p(m.th({ c: s })) }, l))))
-      );
-    }, this.buildDates = (e, i) => {
-      const t = this.props.cellUID, { unstyled: s } = this.props, l = s && s.uCalendar;
-      return /* @__PURE__ */ a.createElement(
-        "table",
-        {
-          className: p(m.table({ c: l })),
-          ref: (r) => {
-            this.table = r;
-          },
-          role: "grid",
-          tabIndex: this.props.tabIndex,
-          "aria-activedescendant": t + this.props.focusedDate.getTime()
-        },
-        /* @__PURE__ */ a.createElement("colgroup", null, e.map((r, h) => /* @__PURE__ */ a.createElement("col", { key: h }))),
-        i.map((r) => /* @__PURE__ */ a.createElement(
-          z,
-          {
-            ref: (h) => {
-              this.calendarView || (this.calendarView = h);
-            },
-            key: r.getTime(),
-            activeView: this.props.activeView,
-            viewDate: r,
-            min: this.props.min,
-            max: this.props.max,
-            cellUID: t,
-            focusedDate: this.props.focusedDate,
-            cell: this.props.cell,
-            selectedDate: this.props.value,
-            showWeekNumbers: this.weekNumber,
-            onChange: this.handleDateChange,
-            bus: this.props.bus,
-            service: this.props.service,
-            weekCell: this.props.weekCell,
-            showOtherMonthDays: this.props.showOtherMonthDays,
-            unstyled: s
-          }
-        ))
-      );
-    }, this.calculateHeights = () => {
-      if (!this.props.dom)
-        return;
-      const e = this.props.activeView === c.month ? this.props.dom.scrollableContentHeight : this.props.dom.scrollableYearContentHeight;
-      this.bottomOffset = e - this.props.dom.viewHeight(this.props.activeView), this.viewOffset = -1 * this.props.dom.headerHeight, this.viewHeight = this.props.dom.viewHeight(this.props.activeView) || 1;
-    }, this.getTake = (e, i) => Math.min(i - e, this.take), this.handleScrollAction = ({ index: e, scrollAction: i, pageAction: t }) => {
-      const s = t ? t.skip : this.state.skip;
-      if ((this.state.index !== e || this.state.skip !== s) && this.setState({ index: e, skip: s }), this.table && i) {
-        const l = `translateY(${i.offset}px)`;
-        this.table.style.transform = l;
-      }
-    }, this.handleTodayClick = (e) => {
-      this.shouldScroll = !0, this.handleDateChange.call(void 0, e, !0);
-    }, this.handleDateChange = (e, i = !1) => {
-      const { onChange: t } = this.props;
-      if (t) {
-        const s = {
-          syntheticEvent: e.syntheticEvent,
-          nativeEvent: e.nativeEvent,
-          value: T(e.value),
-          target: this,
-          isTodayClick: i
-        };
-        t.call(void 0, s);
-      }
-    }, this.lastView = this.props.activeView, this.lastFocus = this.props.focusedDate, this.state = {
-      skip: this.props.service.skip(this.props.focusedDate, this.props.min),
-      index: this.props.service.skip(this.props.focusedDate, this.props.min)
-    };
-  }
-  get element() {
-    return this._element;
-  }
-  get weekNames() {
-    return this.intl = N(this), this.weekService = new R(this.intl), this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat);
-  }
-  get weekNumber() {
-    return !!(this.props.showWeekNumbers && this.props.activeView === c.month);
-  }
-  get take() {
-    return this.props.take !== void 0 ? this.props.take : d.defaultProps.take;
-  }
-  get animate() {
-    return !!(this.props.smoothScroll && this.animateToIndex);
-  }
-  get todayIsInRange() {
-    return _(q(), g(this.props.min), g(this.props.max));
-  }
-  componentDidUpdate(n, e) {
-    this.shouldScroll = !1, this.indexToScroll !== void 0 && this.virtualization && this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](this.indexToScroll), this.isActive && this.focusActiveDate(), this.lastView = this.props.activeView, this.indexToScroll = void 0;
-  }
-  render() {
-    const { activeView: n, min: e, max: i, service: t, unstyled: s } = this.props, l = s && s.uCalendar;
-    this.calculateHeights();
-    const r = this.lastView !== n, h = D(this.props.focusedDate, e, i), u = r ? t.skip(h, e) : this.state.skip, w = t.total(e, i), x = this.getTake(u, w), y = t.addToDate(e, u), S = t.addToDate(e, this.state.index), k = new Array(t.rowLength(this.weekNumber)).fill(""), b = n !== this.lastView;
-    this.animateToIndex = !b, (b || !E(this.lastFocus, h) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(h, this.props.min)), this.lastFocus = h;
-    const C = p(
-      m.view({
-        c: l,
-        month: n === c.month,
-        year: n === c.year,
-        decade: n === c.decade,
-        century: n === c.century
-      })
-    ), I = this.buildDates(k, t.datesList(y, x)), V = /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
-      A,
-      {
-        key: "calendar-view-list-header",
-        currentDate: S,
-        min: this.props.min,
-        max: this.props.max,
-        activeView: this.props.activeView,
-        bus: this.props.bus,
-        service: this.props.service,
-        headerTitle: this.props.headerTitle,
-        header: this.props.header,
-        unstyled: s,
-        commands: /* @__PURE__ */ a.createElement(
-          F,
-          {
-            min: this.props.min,
-            max: this.props.max,
-            onClick: this.handleTodayClick,
-            disabled: !this.todayIsInRange,
-            tabIndex: this.props.tabIndex,
-            unstyled: s
-          }
-        )
-      }
-    ), this.props.activeView === c.month && this.buildMonthView(k, this.weekNames), /* @__PURE__ */ a.createElement(
-      H,
-      {
-        key: "calendar-view-list-content",
-        skip: u,
-        take: this.take,
-        total: w,
-        itemHeight: this.viewHeight,
-        topOffset: this.viewOffset,
-        bottomOffset: this.bottomOffset,
-        scrollOffsetSize: this.viewOffset,
-        maxScrollDifference: this.viewHeight,
-        onScroll: this.props.onScroll,
-        onScrollAction: this.handleScrollAction,
-        onMount: (f) => !this.virtualization && this.handleVirtualizationMount(f),
-        children: I,
-        tabIndex: this.props.tabIndex,
-        unstyled: s
-      }
-    ));
-    return /* @__PURE__ */ a.createElement(
-      "div",
-      {
-        ref: (f) => {
-          this._element = f;
-        },
-        className: C
-      },
-      this.props.dom.didCalculate ? V : null
-    );
-  }
-};
-d.propTypes = {
-  activeView: o.number.isRequired,
-  bottomOffset: o.number,
-  cellUID: o.string.isRequired,
-  focusedDate: o.instanceOf(Date).isRequired,
-  max: o.instanceOf(Date).isRequired,
-  min: o.instanceOf(Date).isRequired,
-  onChange: o.func,
-  showWeekNumbers: o.bool,
-  smoothScroll: o.bool,
-  take: o.number,
-  value: o.instanceOf(Date),
-  viewHeight: o.number,
-  viewOffset: o.number,
-  weekDaysFormat: o.oneOf(["short", "abbreviated", "narrow"]),
-  tabIndex: o.number
-}, d.defaultProps = {
-  take: M,
+import * as t from "react";
+import { classNames as p, uCalendar as v } from "@progress/kendo-react-common";
+import { getDate as K, isEqualDate as Se, cloneDate as Ce } from "@progress/kendo-date-math";
+import { useInternationalization as be } from "@progress/kendo-react-intl";
+import { Virtualization as Ne } from "../../virtualization/Virtualization.mjs";
+import { View as Ve } from "./View.mjs";
+import { Header as Te } from "./Header.mjs";
+import { WeekNamesService as xe } from "../services/WeekNamesService.mjs";
+import { isInRange as Ie, getToday as He, dateInRange as j } from "../../utils.mjs";
+import { CalendarViewEnum as u } from "../models/CalendarViewEnum.mjs";
+import { TodayCommand as Le } from "./TodayCommand.mjs";
+const Oe = 5, E = {
+  take: Oe,
   showWeekNumbers: !1,
   weekDaysFormat: "short",
   smoothScroll: !0
-};
-let v = d;
-O(v);
+}, G = t.forwardRef((J, Q) => {
+  const {
+    take: H = E.take,
+    showWeekNumbers: X = E.showWeekNumbers,
+    weekDaysFormat: Z = E.weekDaysFormat,
+    smoothScroll: ee = E.smoothScroll,
+    activeView: n,
+    bus: L,
+    cellUID: O,
+    dom: a,
+    focusedDate: m,
+    max: c,
+    min: r,
+    cell: te,
+    onScroll: ne,
+    onChange: W,
+    service: o,
+    value: re,
+    weekCell: oe,
+    showOtherMonthDays: se,
+    headerTitle: ae,
+    header: ce,
+    shouldScroll: z,
+    tabIndex: f,
+    unstyled: d
+  } = J, S = !!(X && n === u.month), le = Ie(He(), K(r), K(c)), A = () => {
+    if (!i.current)
+      return;
+    const e = i.current.querySelector("td.k-focus"), s = i.current.querySelector(".k-state-pending-focus");
+    e && e[0] && e[0].classList.remove("k-focus"), s && s.classList.add("k-focus"), N.current = !0;
+  }, ie = () => {
+    if (!i.current)
+      return;
+    const e = i.current.querySelector("td.k-focus");
+    e && e.classList.remove("k-focus"), N.current = !1;
+  }, F = (e, s = !1) => {
+    if (W) {
+      const k = {
+        syntheticEvent: e.syntheticEvent,
+        nativeEvent: e.nativeEvent,
+        value: Ce(e.value),
+        target: C.current,
+        isTodayClick: s
+      };
+      W(k);
+    }
+  }, ue = (e) => {
+    V.current = !0, F(e, !0);
+  }, me = ({ index: e, scrollAction: s, pageAction: k }) => {
+    const D = k ? k.skip : void 0;
+    if (de((w) => {
+      const $ = D !== void 0 ? D : w.skip;
+      return w.index !== e || w.skip !== $ ? { index: e, skip: $ } : w;
+    }), g.current && s) {
+      const w = `translateY(${s.offset}px)`;
+      g.current.style.transform = w;
+    }
+  }, fe = (e) => {
+    if (l.current = e, l.current && g.current) {
+      const s = -1 * a.headerHeight;
+      g.current.style.transform = `translateY(${s}px)`;
+      const k = j(m, r, c), D = o.skip(k, r);
+      l.current.scrollToIndex(D);
+    }
+  }, l = t.useRef(null), C = t.useRef(null);
+  t.useImperativeHandle(
+    C,
+    () => ({
+      get element() {
+        return i.current;
+      },
+      get virtualization() {
+        return l.current;
+      },
+      focusActiveDate: A,
+      blurActiveDate: ie
+    })
+  ), t.useImperativeHandle(Q, () => C.current);
+  const i = t.useRef(null), g = t.useRef(null), b = t.useRef(n), q = t.useRef(m), N = t.useRef(!1), M = t.useRef(!0), V = t.useRef(!1), y = t.useRef(void 0), [B, de] = t.useState(() => {
+    const e = o.skip(m, r);
+    return { skip: e, index: e };
+  });
+  t.useEffect(() => {
+    if (V.current = !1, y.current !== void 0 && l.current) {
+      const e = !!(ee && M.current);
+      l.current[e ? "animateToIndex" : "scrollToIndex"](y.current);
+    }
+    N.current && A(), b.current = n, y.current = void 0;
+  });
+  const he = be(), ke = new xe(he).getWeekNames(S, Z), h = d && d.uCalendar;
+  let Y = 0, T = 0, x = 1;
+  a && (Y = (n === u.month ? a.scrollableContentHeight : a.scrollableYearContentHeight) - a.viewHeight(n), T = -1 * a.headerHeight, x = a.viewHeight(n) || 1);
+  const we = b.current !== n, R = j(m, r, c), I = we ? o.skip(R, r) : B.skip, P = o.total(r, c), pe = Math.min(P - I, H), ve = o.addToDate(r, I), ge = o.addToDate(r, B.index), U = Array.from({ length: o.rowLength(S) }, (e, s) => s), _ = n !== b.current;
+  M.current = !_, (_ || !Se(q.current, R) || V.current || !z || z()) && (y.current = o.skip(R, r)), q.current = R;
+  const ye = p(
+    v.view({
+      c: h,
+      month: n === u.month,
+      year: n === u.year,
+      decade: n === u.decade,
+      century: n === u.century
+    })
+  ), Re = /* @__PURE__ */ t.createElement(
+    "table",
+    {
+      className: p(v.table({ c: h })),
+      ref: g,
+      role: "grid",
+      tabIndex: f != null ? f : 0,
+      "aria-activedescendant": O + m.getTime()
+    },
+    /* @__PURE__ */ t.createElement("colgroup", null, U.map((e) => /* @__PURE__ */ t.createElement("col", { key: e }))),
+    o.datesList(ve, pe).map((e) => /* @__PURE__ */ t.createElement(
+      Ve,
+      {
+        key: e.getTime(),
+        activeView: n,
+        viewDate: e,
+        min: r,
+        max: c,
+        cellUID: O,
+        focusedDate: m,
+        cell: te,
+        selectedDate: re,
+        showWeekNumbers: S,
+        onChange: F,
+        bus: L,
+        service: o,
+        weekCell: oe,
+        showOtherMonthDays: se,
+        unstyled: d
+      }
+    ))
+  ), De = n === u.month ? /* @__PURE__ */ t.createElement(
+    "table",
+    {
+      key: "calendar-view-list-weekdays",
+      className: p(v.table({ c: h, weekdays: !0 })),
+      role: "grid",
+      tabIndex: f
+    },
+    /* @__PURE__ */ t.createElement("colgroup", null, U.map((e) => /* @__PURE__ */ t.createElement("col", { key: e }))),
+    /* @__PURE__ */ t.createElement("thead", { className: p(v.thead({ c: h })) }, /* @__PURE__ */ t.createElement("tr", { className: p(v.tr({ c: h })) }, ke.map((e) => /* @__PURE__ */ t.createElement("th", { key: e, className: p(v.th({ c: h })) }, e))))
+  ) : null, Ee = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    Te,
+    {
+      key: "calendar-view-list-header",
+      currentDate: ge,
+      min: r,
+      max: c,
+      activeView: n,
+      bus: L,
+      service: o,
+      headerTitle: ae,
+      header: ce,
+      unstyled: d,
+      commands: /* @__PURE__ */ t.createElement(
+        Le,
+        {
+          min: r,
+          max: c,
+          onClick: ue,
+          disabled: !le,
+          tabIndex: f,
+          unstyled: d
+        }
+      )
+    }
+  ), De, /* @__PURE__ */ t.createElement(
+    Ne,
+    {
+      key: "calendar-view-list-content",
+      skip: I,
+      take: H,
+      total: P,
+      itemHeight: x,
+      topOffset: T,
+      bottomOffset: Y,
+      scrollOffsetSize: T,
+      maxScrollDifference: x,
+      onScroll: ne,
+      onScrollAction: me,
+      onMount: (e) => !l.current && fe(e),
+      tabIndex: f,
+      unstyled: d
+    },
+    Re
+  ));
+  return /* @__PURE__ */ t.createElement("div", { ref: i, className: ye }, a.didCalculate ? Ee : null);
+});
+G.displayName = "KendoReactViewList";
+const $e = G;
 export {
-  v as ViewList
+  $e as ViewList,
+  E as viewListDefaultProps
 };

package/calendar/services/ScrollSyncService.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Virtualization } from '../../virtualization/Virtualization.js';
+import { VirtualizationHandle } from '../../virtualization/Virtualization.js';
 import { DOMService } from './DOMService.js';
 import { CalendarViewEnum } from '../models/CalendarViewEnum.js';
 /**
@@ -21,8 +21,8 @@ export declare class ScrollSyncService {
     private navScrolled;
     constructor(dom: DOMService);
     configure(activeView: CalendarViewEnum): void;
-    sync(navigator: Virtualization, view: Virtualization, e: any): void;
+    sync(navigator: VirtualizationHandle, view: VirtualizationHandle, e: any): void;
     scrollSiblingOf(scrolledElement: any): void;
-    siblingComponent(scrollableElement: HTMLElement): Virtualization;
-    calculateScroll(component: Virtualization, scrollTop: number): number;
+    siblingComponent(scrollableElement: HTMLElement): VirtualizationHandle;
+    calculateScroll(component: VirtualizationHandle, scrollTop: number): number;
 }