@progress/kendo-react-dropdowns 8.2.0-develop.3 → 8.2.0-develop.31

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -8,29 +8,28 @@
 "use client";
 import * as e from "react";
 import se from "prop-types";
-import { PopupPropsContext as ue } from "@progress/kendo-react-popup";
-import { MultiColumnList as ie } from "../common/MultiColumnList.mjs";
-import { createPropsContext as de, usePropsContext as ce, getScrollbarWidth as pe, getter as P, classNames as G, setScrollbarWidth as me } from "@progress/kendo-react-common";
-import { ComboBox as fe, ComboBoxWithoutContext as ge } from "../ComboBox/ComboBox.mjs";
-import { getItemValue as he } from "../common/utils.mjs";
-import T from "../common/withCustomComponent.mjs";
-const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W = e.forwardRef((u, h) => {
-  const t = ce(ke, u), C = e.useRef(null), a = e.useRef(null), x = pe(), {
+import { MultiColumnList as ue } from "../common/MultiColumnList.mjs";
+import { createPropsContext as ie, usePropsContext as de, getScrollbarWidth as ce, getter as T, classNames as x, setScrollbarWidth as pe } from "@progress/kendo-react-common";
+import { ComboBox as me, ComboBoxWithoutContext as fe } from "../ComboBox/ComboBox.mjs";
+import { getItemValue as ge } from "../common/utils.mjs";
+import W from "../common/withCustomComponent.mjs";
+const he = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, Ce = ie(), P = e.forwardRef((u, h) => {
+  const t = de(Ce, u), C = e.useRef(null), a = e.useRef(null), y = ce(), {
     columns: n = s.columns,
     popupSettings: p = s.popupSettings,
     size: z = s.size,
     rounded: O = s.rounded,
-    fillMode: $ = s.fillMode,
-    className: L,
+    fillMode: L = s.fillMode,
+    className: $,
     prefix: j = void 0,
     suffix: V = void 0,
-    onOpen: y,
-    onClose: w,
-    onFocus: E,
-    onBlur: F,
-    onChange: H,
-    onFilterChange: N,
-    onPageChange: S,
+    onOpen: w,
+    onClose: E,
+    onFocus: F,
+    onBlur: H,
+    onChange: N,
+    onFilterChange: S,
+    onPageChange: M,
     ...A
   } = t;
   e.useImperativeHandle(C, () => ({
@@ -49,10 +48,10 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
   const c = e.useMemo(
     () => {
       if (t.groupField !== void 0 && t.data)
-        return he(t.data[0], t.groupField);
+        return ge(t.data[0], t.groupField);
     },
     [t.data, t.groupField]
-  ), [k, m] = e.useState(c), [M, R] = e.useState(!0), [D] = j ? T(t.prefix || e.Fragment) : [], [J] = V ? T(t.suffix || e.Fragment) : [], Q = e.useMemo(
+  ), [k, m] = e.useState(c), [R, B] = e.useState(!0), [D] = j ? W(t.prefix || e.Fragment) : [], [J] = V ? W(t.suffix || e.Fragment) : [], Q = e.useMemo(
     () => {
       const r = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: n.length }, k);
       return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, n.map(
@@ -63,16 +62,16 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
             style: { width: o.width ? o.width : s.width }
           }
         )
-      )), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o, i) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : i }, o.header || " "))), k && M && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
+      )), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o, i) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : i }, o.header || " "))), k && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
     },
-    [t.header, n, k, M]
+    [t.header, n, k, R]
   ), U = e.useMemo(
     () => (
       // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-      `calc(${n.map((r) => Ce(r.width, s.width)).filter(Boolean).join(" + ")} + ${x}px + 4px)`
+      `calc(${n.map((r) => he(r.width, s.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
     ),
-    [n, x]
-  ), B = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
+    [n, y]
+  ), q = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
     (r, o) => {
       const i = n.map((d, le) => /* @__PURE__ */ e.createElement(
         "span",
@@ -81,14 +80,14 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
           style: t.itemRender ? void 0 : { width: d.width ? d.width : s.width },
           key: d.uniqueKey ? d.uniqueKey : le
         },
-        d.field ? String(P(d.field)(o.dataItem)) : ""
+        d.field ? String(T(d.field)(o.dataItem)) : ""
       ));
-      let f, g, b, v, q = t.data || [];
-      const I = o.index - B;
-      t.groupField !== void 0 && (v = P(t.groupField), g = v(q[I]), b = v(q[I - 1]), g && b && g !== b && (f = g)), f && t.groupMode === "classic" && i.push(/* @__PURE__ */ e.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ e.createElement("span", null, f)));
-      const K = e.cloneElement(r, {
+      let f, g, b, v, I = t.data || [];
+      const K = o.index - q;
+      t.groupField !== void 0 && (v = T(t.groupField), g = v(I[K]), b = v(I[K - 1]), g && b && g !== b && (f = g)), f && t.groupMode === "classic" && i.push(/* @__PURE__ */ e.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ e.createElement("span", null, f)));
+      const G = e.cloneElement(r, {
         ...r.props,
-        className: G("k-table-row", {
+        className: x("k-table-row", {
           "k-table-alt-row": o.index % 2 !== 0,
           "k-focus": o.focused,
           "k-selected": o.selected,
@@ -96,9 +95,9 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
           "k-disabled": o.dataItem.disabled
         })
       }, i);
-      return t.itemRender ? t.itemRender.call(void 0, K, o) : K;
+      return t.itemRender ? t.itemRender.call(void 0, G, o) : G;
     },
-    [n, t.groupField, t.itemRender, t.data, B]
+    [n, t.groupField, t.itemRender, t.data, q]
   ), l = e.useCallback(
     (r, o) => {
       r && r.call(void 0, {
@@ -107,69 +106,64 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
       });
     },
     []
-  ), Y = e.useCallback((r) => (t.virtual || m(c), l(y, r)), [l, y, t.virtual, c]), Z = e.useCallback((r) => l(w, r), [w]), _ = e.useCallback((r) => l(E, r), [E]), ee = e.useCallback((r) => l(F, r), [F]), te = e.useCallback((r) => l(H, r), [H]), re = e.useCallback((r) => l(S, r), [S]), oe = e.useCallback((r) => (m(c), l(N, {
+  ), Y = e.useCallback((r) => (t.virtual || m(c), l(w, r)), [l, w, t.virtual, c]), Z = e.useCallback((r) => l(E, r), [E]), _ = e.useCallback((r) => l(F, r), [F]), ee = e.useCallback((r) => l(H, r), [H]), te = e.useCallback((r) => l(N, r), [N]), re = e.useCallback((r) => l(M, r), [M]), oe = e.useCallback((r) => (m(c), l(S, {
     ...r,
     mobileMode: r.target.mobileMode
-  })), [N]), ae = e.useCallback(
+  })), [S]), ae = e.useCallback(
     (r) => {
       m(r.group);
     },
     []
   );
   e.useEffect(() => {
-    me();
+    pe();
   }), e.useEffect(() => {
     const r = t.data;
-    m(c), r && r.length !== 0 ? R(!0) : R(!1);
+    m(c), r && r.length !== 0 ? B(!0) : B(!1);
   }, [t.data]);
-  const ne = e.useCallback((r) => /* @__PURE__ */ e.createElement(ie, { ...r }), []);
+  const ne = e.useCallback((r) => /* @__PURE__ */ e.createElement(ue, { ...r }), []);
   return /* @__PURE__ */ e.createElement(
-    ue.Provider,
+    me,
     {
-      value: (r) => ({ ...r, popupClass: `k-dropdowngrid-popup ${p.popupClass}` })
-    },
-    /* @__PURE__ */ e.createElement(
-      fe,
-      {
-        ...A,
-        list: ne,
-        popupSettings: {
-          ...p,
-          width: p.width || U,
-          className: p.className
-        },
-        ref: a,
-        header: Q,
-        itemRender: X,
-        groupHeaderItemRender: t.groupHeaderItemRender,
-        size: z,
-        rounded: O,
-        fillMode: $,
-        groupMode: t.groupMode,
-        groupField: t.groupField,
-        isMultiColumn: !0,
-        onOpen: Y,
-        onClose: Z,
-        onFocus: _,
-        onBlur: ee,
-        onChange: te,
-        onFilterChange: oe,
-        onPageChange: re,
-        onGroupScroll: ae,
-        className: G("k-dropdowngrid", L),
-        required: t.required,
-        adaptive: t.adaptive,
-        adaptiveFilter: t.adaptiveFilter,
-        adaptiveTitle: t.adaptiveTitle,
-        footer: t.footer,
-        footerClassName: "k-table-footer",
-        prefix: D,
-        suffix: J
-      }
-    )
+      ...A,
+      list: ne,
+      popupSettings: {
+        ...p,
+        popupClass: x("k-dropdowngrid-popup", p.popupClass),
+        width: p.width || U,
+        className: p.className
+      },
+      ref: a,
+      header: Q,
+      itemRender: X,
+      groupHeaderItemRender: t.groupHeaderItemRender,
+      size: z,
+      rounded: O,
+      fillMode: L,
+      groupMode: t.groupMode,
+      groupField: t.groupField,
+      isMultiColumn: !0,
+      onOpen: Y,
+      onClose: Z,
+      onFocus: _,
+      onBlur: ee,
+      onChange: te,
+      onFilterChange: oe,
+      onPageChange: re,
+      onGroupScroll: ae,
+      className: x("k-dropdowngrid", $),
+      required: t.required,
+      adaptive: t.adaptive,
+      adaptiveFilter: t.adaptiveFilter,
+      adaptiveTitle: t.adaptiveTitle,
+      footer: t.footer,
+      footerClassName: "k-table-footer",
+      prefix: D,
+      suffix: J
+    }
   );
-}), be = {
-  ...ge.propTypes,
+}), ke = {
+  ...fe.propTypes,
   columns: se.any.isRequired
 }, s = {
   columns: [],
@@ -179,9 +173,9 @@ const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W =
   rounded: "medium",
   fillMode: "solid"
 };
-W.displayName = "KendoMultiColumnComboBox";
-W.propTypes = be;
+P.displayName = "KendoMultiColumnComboBox";
+P.propTypes = ke;
 export {
-  W as MultiColumnComboBox,
-  ke as MultiColumnComboBoxPropsContext
+  P as MultiColumnComboBox,
+  Ce as MultiColumnComboBoxPropsContext
 };

package/common/SearchBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const u=require("@progress/kendo-react-common"),h=require("react");function g(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const c=g(h);class b extends c.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:i,suggestedText:n,focused:a}=this.props,r=this.input,p=e!==i||n!==s,l=p&&e.startsWith(i)&&!(s&&n&&s.endsWith(n)),d=u.getActiveElement(document);a&&r&&d!==r&&r.focus(),n&&p&&!l&&r&&r.setSelectionRange(i.length-n.length,i.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:i}=this.props,n=c.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:"k-input-inner",tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:a=>this._input=a,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-required":this.props.ariaRequired});return i?i.call(void 0,n):n}}module.exports=b;
+"use client";"use strict";const u=require("@progress/kendo-react-common"),h=require("react");function b(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const c=b(h);class g extends c.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:i,focused:o}=this.props,r=this.input,p=e!==n||i!==s,l=p&&e.startsWith(n)&&!(s&&i&&s.endsWith(i)),d=u.getActiveElement(document);o&&r&&d!==r&&r.focus(),i&&p&&!l&&r&&r.setSelectionRange(n.length-i.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n}=this.props,i=c.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:"k-input-inner",tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:o=>this._input=o,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired});return n?n.call(void 0,i):i}}module.exports=g;

package/common/SearchBar.mjs

@@ -8,7 +8,7 @@
 "use client";
 import { getActiveElement as c } from "@progress/kendo-react-common";
 import * as p from "react";
-class g extends p.Component {
+class b extends p.Component {
   constructor() {
     super(...arguments), this._input = null;
   }
@@ -19,8 +19,8 @@ class g extends p.Component {
     return this._input;
   }
   componentDidUpdate(t) {
-    const i = t.value, a = t.suggestedText, { value: s, suggestedText: e, focused: n } = this.props, o = this.input, r = i !== s || e !== a, d = r && i.startsWith(s) && !(a && e && a.endsWith(e)), l = c(document);
-    n && o && l !== o && o.focus(), e && r && !d && o && o.setSelectionRange(s.length - e.length, s.length);
+    const i = t.value, a = t.suggestedText, { value: s, suggestedText: e, focused: r } = this.props, o = this.input, n = i !== s || e !== a, l = n && i.startsWith(s) && !(a && e && a.endsWith(e)), d = c(document);
+    r && o && d !== o && o.focus(), e && n && !l && o && o.setSelectionRange(s.length - e.length, s.length);
   }
   render() {
     const { expanded: t = !1, disabled: i, role: a = "listbox", render: s } = this.props, e = /* @__PURE__ */ p.createElement(
@@ -39,7 +39,7 @@ class g extends p.Component {
         name: this.props.name,
         value: this.props.value,
         onChange: this.props.onChange,
-        ref: (n) => this._input = n,
+        ref: (r) => this._input = r,
         onKeyDown: this.props.onKeyDown,
         onFocus: this.props.onFocus,
         onBlur: this.props.onBlur,
@@ -54,6 +54,7 @@ class g extends p.Component {
         "aria-activedescendant": t ? this.props.activedescendant : void 0,
         "aria-describedby": this.props.ariaDescribedBy,
         "aria-labelledby": this.props.ariaLabelledBy,
+        "aria-label": this.props.ariaLabel,
         "aria-required": this.props.ariaRequired
       }
     );
@@ -61,5 +62,5 @@ class g extends p.Component {
   }
 }
 export {
-  g as default
+  b as default
 };