@progress/kendo-react-dropdowns 7.5.0-develop.9 → 8.0.0-develop.2

package/common/DropDownBase.mjs

@@ -7,69 +7,69 @@
  */
 "use client";
 import * as m from "react";
-import i from "prop-types";
-import v from "./VirtualScroll.mjs";
+import s from "prop-types";
+import { VirtualScroll as v } from "./VirtualScrollStatic.mjs";
 import { Navigation as y } from "./Navigation.mjs";
 import { scrollToItem as S, areSame as g } from "./utils.mjs";
 const a = class a {
   constructor(n) {
-    this.wrapper = null, this.list = null, this.vs = new v(), this.navigation = new y(), this.handleItemClick = (s, e) => {
-      const t = this.initState();
-      t.syntheticEvent = e, e.stopPropagation(), this.component.handleItemSelect(s, t), this.togglePopup(t), this.applyState(t);
-    }, this.handleFocus = (s) => {
+    this.wrapper = null, this.list = null, this.vs = new v(), this.navigation = new y(), this.handleItemClick = (i, t) => {
+      const e = this.initState();
+      e.syntheticEvent = t, t.stopPropagation(), this.component.handleItemSelect(i, e), this.togglePopup(e), this.applyState(e);
+    }, this.handleFocus = (i) => {
       if (!this.component.state.focused) {
-        const e = this.initState();
-        e.data.focused = !0, e.events.push({ type: "onFocus" }), e.syntheticEvent = s, this.applyState(e);
+        const t = this.initState();
+        t.data.focused = !0, t.events.push({ type: "onFocus" }), t.syntheticEvent = i, this.applyState(t);
       }
-    }, this.filterChanged = (s, e) => {
-      const { textField: t, filterable: o } = this.component.props;
-      o && e.events.push({
+    }, this.filterChanged = (i, t) => {
+      const { textField: e, filterable: o } = this.component.props;
+      o && t.events.push({
         type: "onFilterChange",
         filter: {
-          field: t,
+          field: e,
           operator: "contains",
           ignoreCase: !0,
-          value: s
+          value: i
         }
       });
-    }, this.togglePopup = (s) => {
-      const e = this.component.props, t = e.opened !== void 0 ? e.opened : this.component.state.opened;
-      e.opened === void 0 && (s.data.opened = !t), t ? s.events.push({ type: "onClose" }) : (s.events.push({ type: "onOpen" }), this.calculatePopupWidth());
-    }, this.pageChange = (s, e) => {
-      const t = this.initState();
-      t.syntheticEvent = e, this.triggerOnPageChange(t, s.skip, s.take), this.applyState(t);
-    }, this.scrollToVirtualItem = (s, e) => {
-      const t = this.vs;
-      if (t.enabled = !1, s.skip === 0)
-        t.reset();
-      else if (s.skip + s.pageSize === s.total)
-        t.scrollToEnd();
+    }, this.togglePopup = (i) => {
+      const t = this.component.props, e = t.opened !== void 0 ? t.opened : this.component.state.opened;
+      t.opened === void 0 && (i.data.opened = !e), e ? i.events.push({ type: "onClose" }) : (i.events.push({ type: "onOpen" }), this.calculatePopupWidth());
+    }, this.pageChange = (i, t) => {
+      const e = this.initState();
+      e.syntheticEvent = t, this.triggerOnPageChange(e, i.skip, i.take), this.applyState(e);
+    }, this.scrollToVirtualItem = (i, t) => {
+      const e = this.vs;
+      if (i.skip === 0)
+        e.reset();
       else {
-        let o = t.translate;
-        o === 0 && (t.calcScrollElementHeight(), o = t.itemHeight * s.skip, t.translateTo(o - t.itemHeight)), t.container && (t.container.scrollTop = o), this.scrollToItem(e, !0);
+        let o = e.translate;
+        o === 0 && (e.calcScrollElementHeight(), o = e.itemHeight * i.skip, e.translateTo(o, !0)), t < 0 && o > 0 && (o += e.itemHeight * (i.pageSize / 4)), e.container && (e.container.scrollTop = o), this.scrollToItem(t, !0);
       }
-      window.setTimeout(() => t.enabled = !0, 10);
-    }, this.scrollPopupByPageSize = (s) => {
+    }, this.scrollPopupByPageSize = (i) => {
       var r, l, h, c, u, d;
-      const e = this.vs, t = (l = (r = this.list) == null ? void 0 : r.parentElement) == null ? void 0 : l.scrollTop, o = e.enabled && e.itemHeight ? e.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, p = (c = (h = this.list) == null ? void 0 : h.parentElement) == null ? void 0 : c.offsetHeight;
-      t !== void 0 && p !== void 0 && ((d = (u = this.list) == null ? void 0 : u.parentElement) == null || d.scroll({ top: t + s * Math.floor(p / o) * o }));
+      const t = this.vs, e = (l = (r = this.list) == null ? void 0 : r.parentElement) == null ? void 0 : l.scrollTop, o = t.enabled && t.itemHeight ? t.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, p = (c = (h = this.list) == null ? void 0 : h.parentElement) == null ? void 0 : c.offsetHeight;
+      e !== void 0 && p !== void 0 && ((d = (u = this.list) == null ? void 0 : u.parentElement) == null || d.scroll({ top: e + i * Math.floor(p / o) * o }));
     }, this.renderScrollElement = () => {
-      const s = this.vs;
-      return s.enabled && /* @__PURE__ */ m.createElement(
+      const i = this.vs;
+      return i.enabled && /* @__PURE__ */ m.createElement(
         "div",
         {
-          ref: (e) => s.scrollElement = e,
+          ref: (t) => i.scrollElement = t,
           key: "scrollElementKey"
         }
       );
-    }, this.resetGroupStickyHeader = (s, e) => {
-      s !== e.state.group && e.setState({ ...e.state, group: s });
+    }, this.resetGroupStickyHeader = (i, t) => {
+      i !== t.state.group && t.setState({ ...t.state, group: i });
     }, this.listBoxId = n.props.id + "list", this.guid = n.props.id, this.component = n, this.vs.PageChange = this.pageChange;
   }
+  didUpdate() {
+    this.vs.listTransform && this.vs.list && (this.vs.list.style.transform = this.vs.listTransform, this.vs.listTransform = "");
+  }
   didMount() {
-    const n = this.component.props, s = n.popupSettings || {}, e = n.style || {}, t = s.width;
+    const n = this.component.props, i = n.popupSettings || {}, t = n.style || {}, e = i.width;
     let o = n.opened === !0;
-    t === void 0 && this.calculatePopupWidth(), n.dir === void 0 && e.direction === void 0 && (this.calculateDir(), o = !0), o && this.component.forceUpdate();
+    e === void 0 && this.calculatePopupWidth(), n.dir === void 0 && t.direction === void 0 && (this.calculateDir(), o = !0), o && this.component.forceUpdate();
   }
   calculateDir() {
     const n = this.component.element;
@@ -78,13 +78,17 @@ const a = class a {
   calculatePopupWidth() {
     this.wrapper && (this.popupWidth = this.wrapper.offsetWidth + "px");
   }
-  scrollToItem(n, s, e) {
-    const t = this.list || this.vs.list;
-    if (!t && !e && setTimeout(() => {
-      this.scrollToItem(n, s, !0);
-    }, 10), t && n >= 0) {
-      const o = this.vs, p = o.container || t.parentNode, r = s !== void 0 ? s : o.enabled;
-      S(p, t, n, o.translate, r);
+  scrollToItem(n, i, t) {
+    const e = this.list || this.vs.list;
+    if (!e && !t && setTimeout(() => {
+      this.scrollToItem(n, i, !0);
+    }, 10), n === 0 && i && this.vs.skip === 0) {
+      this.vs.reset();
+      return;
+    }
+    if (e && n >= 0) {
+      const o = this.vs, p = o.container || e.parentNode, r = i !== void 0 ? i : o.enabled;
+      S(p, e, n, o.translate, r);
     }
   }
   initState() {
@@ -96,35 +100,35 @@ const a = class a {
   }
   applyState(n) {
     Object.keys(n.data).length > 0 && this.component.setState(n.data);
-    const s = {
+    const i = {
       syntheticEvent: n.syntheticEvent,
       nativeEvent: n.syntheticEvent ? n.syntheticEvent.nativeEvent : void 0,
       target: this.component,
       value: this.component.value
     };
-    n.events.forEach((e) => {
-      const t = e.type;
-      delete e.type;
-      const o = t && this.component.props[t];
+    n.events.forEach((t) => {
+      const e = t.type;
+      delete t.type;
+      const o = e && this.component.props[e];
       o && o.call(void 0, {
-        ...s,
-        ...e
+        ...i,
+        ...t
       });
     });
   }
-  triggerOnPageChange(n, s, e) {
-    const t = this.component.props.virtual;
-    if (t) {
-      const o = Math.min(Math.max(0, s), Math.max(0, t.total - e));
-      o !== t.skip && n.events.push({
+  triggerOnPageChange(n, i, t) {
+    const e = this.component.props.virtual;
+    if (e) {
+      const o = Math.min(Math.max(0, i), Math.max(0, e.total - t));
+      o !== e.skip && n.events.push({
         type: "onPageChange",
-        page: { skip: o, take: e }
+        page: { skip: o, take: t }
       });
     }
   }
-  triggerPageChangeCornerItems(n, s) {
-    const e = this.component.props, { data: t = [], dataItemKey: o, virtual: p } = e, r = e.opened !== void 0 ? e.opened : this.component.state.opened;
-    n && p && this.vs.enabled && (p.skip > 0 && g(n, t[0], o) ? this.triggerOnPageChange(s, p.skip - 1, p.pageSize) : !r && p.skip + p.pageSize < p.total && g(n, t[t.length - 1], o) && this.triggerOnPageChange(s, p.skip + 1, p.pageSize));
+  triggerPageChangeCornerItems(n, i) {
+    const t = this.component.props, { data: e = [], dataItemKey: o, virtual: p } = t, r = t.opened !== void 0 ? t.opened : this.component.state.opened;
+    n && p && this.vs.enabled && (p.skip > 0 && g(n, e[0], o) ? this.triggerOnPageChange(i, p.skip - 1, p.pageSize) : !r && p.skip + p.pageSize < p.total && g(n, e[e.length - 1], o) && this.triggerOnPageChange(i, p.skip + 1, p.pageSize));
   }
   getPopupSettings() {
     return Object.assign({}, a.defaultProps.popupSettings, this.component.props.popupSettings);
@@ -133,58 +137,58 @@ const a = class a {
     const n = this.getPopupSettings();
     return n.animate !== void 0 ? n.animate : !0;
   }
-  getGroupedDataModernMode(n, s) {
-    let e = [];
-    return n.forEach((t, o) => {
-      n[o - 1] && t[s] !== n[o - 1][s] && e.push({ [s]: t[s] }), e.push(n[o]);
-    }), e;
+  getGroupedDataModernMode(n, i) {
+    const t = [];
+    return n.forEach((e, o) => {
+      n[o - 1] && e[i] !== n[o - 1][i] && t.push({ [i]: e[i] }), t.push(n[o]);
+    }), t;
   }
 };
 a.basicPropTypes = {
-  opened: i.bool,
-  disabled: i.bool,
-  dir: i.string,
-  tabIndex: i.number,
-  accessKey: i.string,
-  data: i.array,
-  textField: i.string,
-  className: i.string,
-  label: i.string,
-  loading: i.bool,
-  popupSettings: i.shape({
-    animate: i.oneOfType([i.bool, i.shape({
-      openDuration: i.number,
-      closeDuration: i.number
+  opened: s.bool,
+  disabled: s.bool,
+  dir: s.string,
+  tabIndex: s.number,
+  accessKey: s.string,
+  data: s.array,
+  textField: s.string,
+  className: s.string,
+  label: s.string,
+  loading: s.bool,
+  popupSettings: s.shape({
+    animate: s.oneOfType([s.bool, s.shape({
+      openDuration: s.number,
+      closeDuration: s.number
     })]),
-    popupClass: i.string,
-    className: i.string,
-    appendTo: i.any,
-    width: i.oneOfType([i.string, i.number]),
-    height: i.oneOfType([i.string, i.number])
+    popupClass: s.string,
+    className: s.string,
+    appendTo: s.any,
+    width: s.oneOfType([s.string, s.number]),
+    height: s.oneOfType([s.string, s.number])
   }),
-  onOpen: i.func,
-  onClose: i.func,
-  onFocus: i.func,
-  onBlur: i.func,
-  onChange: i.func,
-  itemRender: i.func,
-  listNoDataRender: i.func,
-  focusedItemIndex: i.func,
-  header: i.node,
-  footer: i.node
+  onOpen: s.func,
+  onClose: s.func,
+  onFocus: s.func,
+  onBlur: s.func,
+  onChange: s.func,
+  itemRender: s.func,
+  listNoDataRender: s.func,
+  focusedItemIndex: s.func,
+  header: s.node,
+  footer: s.node
 }, a.propTypes = {
   ...a.basicPropTypes,
-  value: i.any,
-  defaultValue: i.any,
-  filterable: i.bool,
-  filter: i.string,
-  virtual: i.shape({
-    pageSize: i.number.isRequired,
-    skip: i.number.isRequired,
-    total: i.number.isRequired
+  value: s.any,
+  defaultValue: s.any,
+  filterable: s.bool,
+  filter: s.string,
+  virtual: s.shape({
+    pageSize: s.number.isRequired,
+    skip: s.number.isRequired,
+    total: s.number.isRequired
   }),
-  onFilterChange: i.func,
-  onPageChange: i.func
+  onFilterChange: s.func,
+  onPageChange: s.func
 }, a.defaultProps = {
   popupSettings: {
     height: "200px"

package/common/VirtualScrollStatic.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 n=require("@progress/kendo-react-common"),u=require("react");function p(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const i in l)if(i!=="default"){const e=Object.getOwnPropertyDescriptor(l,i);Object.defineProperty(t,i,e.get?e:{enumerable:!0,get:()=>l[i]})}}return t.default=l,Object.freeze(t)}const S=p(u),m=17895697,c=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent);class H{constructor(){this.table=null,this.total=0,this.enabled=!1,this.skip=0,this.pageSize=0,this.PageChange=null,this.scrollElement=null,this.listTransform="",this.itemHeight=0,this.containerHeight=0,this.reactVersion=Number.parseFloat(S.version),this.scrollSyncing=!1,this.lastLoaded=0,this.firstLoaded=0,this.lastScrollTop=0,this.listTranslate=0,this.list=null,this.container=null,this.calcScrollElementHeight=()=>{var h;this.scrollSyncing=!0;let t=!1;this.itemHeight=this.list?this.list.children[0].offsetHeight:this.itemHeight;const i=this.itemHeight*this.total-(((h=this.list)==null?void 0:h.offsetHeight)||0);this.containerHeight=c?Math.min(m,i):i;const e=this.containerHeight;return this.scrollElement&&(t=this.scrollElement.style.height!==e+"px",t&&(this.scrollElement.style.height=e+"px")),this.scrollSyncing=!1,t},this.scrollerRef=t=>{this.container=t,t&&(t.setAttribute("unselectable","on"),window.setTimeout(this.calcScrollElementHeight.bind(this),0))},this.getRowHeightService=n.memoizeOne((t,i)=>new n.RowHeightService(i,t,0)),this.firstLoaded=this.pageSize,this.lastLoaded=this.skip+this.pageSize,this.scrollHandler=this.scrollHandler.bind(this)}get translate(){return this.listTranslate}translateTo(t,i){this.listTranslate=t,this.enabled&&this.list&&(c||this.reactVersion<=17||i?this.list.style.transform="translateY("+t+"px)":this.listTransform="translateY("+t+"px)")}changePage(t,i){const e=Math.min(Math.max(0,t),this.total-this.pageSize);e!==this.skip&&this.PageChange&&this.PageChange({skip:e,take:this.pageSize},i)}reset(){this.container&&(this.calcScrollElementHeight(),this.container.scrollTop=0,this.translateTo(0,!0))}scrollToEnd(){if(this.container&&this.list){this.calcScrollElementHeight();const{scrollHeight:t,offsetHeight:i}=this.container;this.container.scrollTop=t,this.translateTo(t-i,!0)}}scrollHandler(t){if(!this.enabled||!this.container||!this.list)return;if(this.scrollSyncing){this.scrollSyncing=!1;return}this.rowHeightService=this.getRowHeightService(this.itemHeight,this.total);const i=this.container.scrollTop,e=this.lastScrollTop>=i,h=!e,f=Math.abs(i-this.lastScrollTop);this.lastScrollTop=i;let s=this.rowHeightService.index(i),r=this.rowHeightService.offset(s);const{offsetHeight:g}=this.container,d=this.rowHeightService.index(i+g);if(h&&d>=this.lastLoaded&&this.lastLoaded<this.total){const o=s+this.pageSize-this.total;o>0&&(s=s-o,r=this.rowHeightService.offset(s)),this.firstLoaded=s,this.translateTo(r);const a=this.firstLoaded+this.pageSize;this.lastLoaded=Math.min(a,this.total),this.changePage(this.firstLoaded,t)}else if(e&&s-1<=this.firstLoaded){const o=f===this.itemHeight;if(this.skip===0&&o)this.lastScrollTop=0,this.firstLoaded=0,this.lastLoaded=this.pageSize,this.container.scrollTop=0,this.translateTo(0,!0);else{const a=Math.floor(this.pageSize*.3);this.firstLoaded=Math.max(s-a,0),this.translateTo(this.rowHeightService.offset(this.firstLoaded)),this.lastLoaded=Math.min(this.firstLoaded+this.pageSize,this.total),this.changePage(this.firstLoaded,t)}}}}exports.VirtualScroll=H;

package/common/VirtualScrollStatic.mjs

@@ -0,0 +1,77 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { memoizeOne as f, RowHeightService as d } from "@progress/kendo-react-common";
+import * as p from "react";
+const S = 17895697, r = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent);
+class u {
+  constructor() {
+    this.table = null, this.total = 0, this.enabled = !1, this.skip = 0, this.pageSize = 0, this.PageChange = null, this.scrollElement = null, this.listTransform = "", this.itemHeight = 0, this.containerHeight = 0, this.reactVersion = Number.parseFloat(p.version), this.scrollSyncing = !1, this.lastLoaded = 0, this.firstLoaded = 0, this.lastScrollTop = 0, this.listTranslate = 0, this.list = null, this.container = null, this.calcScrollElementHeight = () => {
+      var h;
+      this.scrollSyncing = !0;
+      let t = !1;
+      this.itemHeight = this.list ? this.list.children[0].offsetHeight : this.itemHeight;
+      const i = this.itemHeight * this.total - (((h = this.list) == null ? void 0 : h.offsetHeight) || 0);
+      this.containerHeight = r ? Math.min(S, i) : i;
+      const s = this.containerHeight;
+      return this.scrollElement && (t = this.scrollElement.style.height !== s + "px", t && (this.scrollElement.style.height = s + "px")), this.scrollSyncing = !1, t;
+    }, this.scrollerRef = (t) => {
+      this.container = t, t && (t.setAttribute("unselectable", "on"), window.setTimeout(this.calcScrollElementHeight.bind(this), 0));
+    }, this.getRowHeightService = f((t, i) => new d(i, t, 0)), this.firstLoaded = this.pageSize, this.lastLoaded = this.skip + this.pageSize, this.scrollHandler = this.scrollHandler.bind(this);
+  }
+  get translate() {
+    return this.listTranslate;
+  }
+  translateTo(t, i) {
+    this.listTranslate = t, this.enabled && this.list && (r || this.reactVersion <= 17 || i ? this.list.style.transform = "translateY(" + t + "px)" : this.listTransform = "translateY(" + t + "px)");
+  }
+  changePage(t, i) {
+    const s = Math.min(Math.max(0, t), this.total - this.pageSize);
+    s !== this.skip && this.PageChange && this.PageChange({ skip: s, take: this.pageSize }, i);
+  }
+  reset() {
+    this.container && (this.calcScrollElementHeight(), this.container.scrollTop = 0, this.translateTo(0, !0));
+  }
+  scrollToEnd() {
+    if (this.container && this.list) {
+      this.calcScrollElementHeight();
+      const { scrollHeight: t, offsetHeight: i } = this.container;
+      this.container.scrollTop = t, this.translateTo(t - i, !0);
+    }
+  }
+  scrollHandler(t) {
+    if (!this.enabled || !this.container || !this.list)
+      return;
+    if (this.scrollSyncing) {
+      this.scrollSyncing = !1;
+      return;
+    }
+    this.rowHeightService = this.getRowHeightService(this.itemHeight, this.total);
+    const i = this.container.scrollTop, s = this.lastScrollTop >= i, h = !s, n = Math.abs(i - this.lastScrollTop);
+    this.lastScrollTop = i;
+    let e = this.rowHeightService.index(i), a = this.rowHeightService.offset(e);
+    const { offsetHeight: c } = this.container, g = this.rowHeightService.index(i + c);
+    if (h && g >= this.lastLoaded && this.lastLoaded < this.total) {
+      const l = e + this.pageSize - this.total;
+      l > 0 && (e = e - l, a = this.rowHeightService.offset(e)), this.firstLoaded = e, this.translateTo(a);
+      const o = this.firstLoaded + this.pageSize;
+      this.lastLoaded = Math.min(o, this.total), this.changePage(this.firstLoaded, t);
+    } else if (s && e - 1 <= this.firstLoaded) {
+      const l = n === this.itemHeight;
+      if (this.skip === 0 && l)
+        this.lastScrollTop = 0, this.firstLoaded = 0, this.lastLoaded = this.pageSize, this.container.scrollTop = 0, this.translateTo(0, !0);
+      else {
+        const o = Math.floor(this.pageSize * 0.3);
+        this.firstLoaded = Math.max(e - o, 0), this.translateTo(this.rowHeightService.offset(this.firstLoaded)), this.lastLoaded = Math.min(this.firstLoaded + this.pageSize, this.total), this.changePage(this.firstLoaded, t);
+      }
+    }
+  }
+}
+export {
+  u as VirtualScroll
+};