@progress/kendo-react-dropdowns 11.2.0-develop.2 → 11.2.0-develop.4

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -12,14 +12,14 @@ import { createPropsContext as ue, usePropsContext as de, getScrollbarWidth as c
 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 = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P = e.forwardRef(
-  (i, h) => {
-    const t = de(Ce, i), 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: L = s.fillMode,
+const he = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, Ce = ue(), P = e.forwardRef(
+  (s, h) => {
+    const t = de(Ce, s), C = e.useRef(null), i = e.useRef(null), y = ce(), {
+      columns: r = l.columns,
+      popupSettings: p = l.popupSettings,
+      size: z = l.size,
+      rounded: O = l.rounded,
+      fillMode: L = l.fillMode,
       className: $,
       prefix: j = void 0,
       suffix: V = void 0,
@@ -32,19 +32,24 @@ const he = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P =
       onPageChange: M,
       ...A
     } = t;
-    e.useImperativeHandle(C, () => ({
-      element: a.current && a.current.element,
-      focus() {
-        a.current && a.current.focus();
-      },
-      get value() {
-        return a.current && a.current.value;
-      },
-      get name() {
-        return a.current && a.current.name;
-      },
-      props: t
-    })), e.useImperativeHandle(
+    e.useImperativeHandle(C, () => {
+      var o;
+      return {
+        element: ((o = i.current) == null ? void 0 : o.element) || null,
+        focus() {
+          i.current && i.current.focus();
+        },
+        get value() {
+          var a;
+          return (a = i.current) == null ? void 0 : a.value;
+        },
+        get name() {
+          var a;
+          return (a = i.current) == null ? void 0 : a.name;
+        },
+        props: t
+      };
+    }), e.useImperativeHandle(
       h,
       () => C.current
     );
@@ -52,77 +57,77 @@ const he = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P =
       if (t.groupField !== void 0 && t.data)
         return ge(t.data[0], t.groupField);
     }, [t.data, t.groupField]), [b, 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 }, b);
-      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((o, u) => /* @__PURE__ */ e.createElement(
+      const o = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: r.length }, b);
+      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, r.map((a, u) => /* @__PURE__ */ e.createElement(
         "col",
         {
-          key: o.uniqueKey ? o.uniqueKey : u,
-          style: { width: o.width ? o.width : s.width }
+          key: a.uniqueKey ? a.uniqueKey : u,
+          style: { width: a.width ? a.width : l.width }
         }
-      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o, u) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : u }, o.header || " "))), b && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
-    }, [t.header, n, b, R]), U = e.useMemo(
+      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, r.map((a, u) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: a.uniqueKey ? a.uniqueKey : u }, a.header || " "))), b && R && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, o, {}) : o)))));
+    }, [t.header, r, b, R]), U = e.useMemo(
       () => (
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        `calc(${n.map((r) => he(r.width, s.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
+        `calc(${r.map((o) => he(o.width, l.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
       ),
-      [n, y]
+      [r, y]
     ), q = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
-      (r, o) => {
-        const u = n.map((d, le) => /* @__PURE__ */ e.createElement(
+      (o, a) => {
+        const u = r.map((d, le) => /* @__PURE__ */ e.createElement(
           "span",
           {
             className: t.itemRender ? void 0 : "k-table-td",
-            style: t.itemRender ? void 0 : { width: d.width ? d.width : s.width },
+            style: t.itemRender ? void 0 : { width: d.width ? d.width : l.width },
             key: d.uniqueKey ? d.uniqueKey : le
           },
-          d.field ? String(T(d.field)(o.dataItem)) : ""
+          d.field ? String(T(d.field)(a.dataItem)) : ""
         ));
         let f, g, k, v, I = t.data || [];
-        const K = o.index - q;
+        const K = a.index - q;
         t.groupField !== void 0 && (v = T(t.groupField), g = v(I[K]), k = v(I[K - 1]), g && k && g !== k && (f = g)), f && t.groupMode === "classic" && u.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,
+          o,
           {
-            ...r.props,
+            ...o.props,
             className: x("k-table-row", {
-              "k-table-alt-row": o.index % 2 !== 0,
-              "k-focus": o.focused,
-              "k-selected": o.selected,
+              "k-table-alt-row": a.index % 2 !== 0,
+              "k-focus": a.focused,
+              "k-selected": a.selected,
               "k-first": !!f,
-              "k-disabled": o.dataItem.disabled
+              "k-disabled": a.dataItem.disabled
             })
           },
           u
         );
-        return t.itemRender ? t.itemRender.call(void 0, G, o) : G;
+        return t.itemRender ? t.itemRender.call(void 0, G, a) : G;
       },
-      [n, t.groupField, t.itemRender, t.data, q]
-    ), l = e.useCallback((r, o) => {
-      r && r.call(void 0, {
-        ...o,
+      [r, t.groupField, t.itemRender, t.data, q]
+    ), n = e.useCallback((o, a) => {
+      o && o.call(void 0, {
+        ...a,
         target: C.current
       });
     }, []), 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(S, r), [S]), te = e.useCallback((r) => l(H, r), [H]), re = e.useCallback((r) => l(M, r), [M]), oe = e.useCallback(
-      (r) => (m(c), l(N, {
-        ...r,
-        mobileMode: r.target.mobileMode
+      (o) => (t.virtual || m(c), n(w, o)),
+      [n, w, t.virtual, c]
+    ), Z = e.useCallback((o) => n(E, o), [E]), _ = e.useCallback((o) => n(F, o), [F]), ee = e.useCallback((o) => n(S, o), [S]), te = e.useCallback((o) => n(H, o), [H]), oe = e.useCallback((o) => n(M, o), [M]), ae = e.useCallback(
+      (o) => (m(c), n(N, {
+        ...o,
+        mobileMode: o.target.mobileMode
       })),
       [N]
-    ), ae = e.useCallback((r) => {
-      m(r.group);
+    ), re = e.useCallback((o) => {
+      m(o.group);
     }, []);
     e.useEffect(() => {
       pe();
     }), e.useEffect(() => {
-      const r = t.data;
-      m(c), r && r.length !== 0 ? B(!0) : B(!1);
+      const o = t.data;
+      m(c), o && o.length !== 0 ? B(!0) : B(!1);
     }, [t.data]);
-    const ne = e.useCallback((r) => /* @__PURE__ */ e.createElement(ie, { ...r }), []);
+    const ne = e.useCallback((o) => /* @__PURE__ */ e.createElement(ie, { ...o }), []);
     return /* @__PURE__ */ e.createElement(
       me,
       {
@@ -134,7 +139,7 @@ const he = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P =
           width: p.width || U,
           className: p.className
         },
-        ref: a,
+        ref: i,
         header: Q,
         itemRender: X,
         groupHeaderItemRender: t.groupHeaderItemRender,
@@ -149,9 +154,9 @@ const he = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P =
         onFocus: _,
         onBlur: ee,
         onChange: te,
-        onFilterChange: oe,
-        onPageChange: re,
-        onGroupScroll: ae,
+        onFilterChange: ae,
+        onPageChange: oe,
+        onGroupScroll: re,
         className: x("k-dropdowngrid", $),
         required: t.required,
         adaptive: t.adaptive,
@@ -168,7 +173,7 @@ const he = (i, h) => i ? typeof i == "number" ? i + "px" : i : h, Ce = ue(), P =
 ), be = {
   ...fe.propTypes,
   columns: se.any.isRequired
-}, s = {
+}, l = {
   columns: [],
   popupSettings: {},
   width: "200px",

package/MultiSelect/MultiSelect.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react"),v=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),$=require("@progress/kendo-react-labels"),j=require("../common/ListContainer.js"),G=require("../common/List.js"),U=require("../common/GroupStickyHeader.js"),Y=require("./TagList.js"),J=require("../common/SearchBar.js"),F=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),Q=require("../package-metadata.js"),X=require("../common/ClearButton.js"),Z=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout"),te=require("@progress/kendo-react-intl"),se=require("../common/ListFilter.js"),P=require("../common/withCustomComponent.js");function ie(b){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const e in b)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(b,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>b[e]})}}return n.default=b,Object.freeze(n)}const f=ie(H),{sizeMap:w,roundedMap:ae}=r.kendoThemeMaps,oe="Please enter a valid value!",E=b=>b.preventDefault(),_=b=>b===2,I=class I extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new F(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=a[e-p],h=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];h!==-1?(i=this.value,i.splice(h,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.triggerOnChange(i,t),this.base.triggerPageChangeCornerItems(u,t)},this.onTagDelete=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(e,t)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:h}=this.getFocusedState(),i=o&&u,l=a[e-p];l&&h!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):i&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),o=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=o),t.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(o,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:o}=this.props,s=g.getFilteredData(this.props),a=e.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:h,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=e,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,l);const m=()=>{e.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.end){const d=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.home){const d=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(e.shiftKey&&e.keyCode===r.Keys.up){let d;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?d=i!==0?s.slice(i-1,i):[s[i]]:c===i?d=[s[c-1]]:i>=0&&(d=c>i?s.slice(i-1,c):s.slice(c-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.shiftKey&&e.keyCode===r.Keys.down){let d;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?d=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?d=s.slice(i,i+2):i>=0&&(d=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.altKey&&a===r.Keys.up)m();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&t)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[t]);d=c&&s.findIndex(y=>y[t]===c[t])}else if(a===r.Keys.up||a===r.Keys.left){let c;if(i===-1)c=s,d=s.findIndex(y=>!y.disabled&&y[t]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();d=y&&s.findIndex(x=>x[t]===y[t])}}if(d){const c=d-i;this.onNavigate(l,a,c)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=s.slice(i+1).find(c=>!c.disabled);else if(a===r.Keys.up||a===r.Keys.left){const c=s.slice(0,i);for(d=c.pop();d&&d.disabled;)d=c.pop()}if(d){const c=d.id-i-1;this.onNavigate(l,a,c)}else this.onNavigate(l,a)}this.applyState(l),e.preventDefault()}else a===r.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&h===null?this.customItemSelect(e):h&&h.disabled?m():this.selectFocusedItem(e)):a===r.Keys.esc&&m();else e.altKey&&a===r.Keys.down?m():a===r.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,h=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:E},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&p!==void 0&&(d=g.getItemValue(h[0],p)),f.createElement(f.Fragment,null,e&&f.createElement("div",{className:"k-list-header"},e),m,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&d&&h.length!==0&&f.createElement(U,{group:d,groupMode:"modern",render:a}),this.renderList()),this.showLicenseWatermark&&f.createElement(r.WatermarkOverlay,null),t&&f.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:e.popupWidth,p={dir:t!==void 0?t:e.dirCalculated,width:a,popupSettings:{...s,popupClass:r.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(j,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:o,filter:s}=this.props,{windowWidth:a=0}=this.state,p=s!==void 0?s:this.state.text;this.localization=te.provideLocalizationService(this);const u=o?f.createElement(se,{value:p,ref:i=>{this._adaptiveInput=i&&i.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}):null,h={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:i=>this.closePopup(i),windowWidth:a,mobileFilter:u};return f.createElement(Z.AdaptiveMode,{...h},f.createElement(ee.ActionSheetContent,null,f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const{textField:e,listNoDataRender:t,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),h=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${h.translate}px)`;return f.createElement(G,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:e,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{h.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:h.enabled?{transform:m}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:t,onMouseDown:E,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:h.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),h=e.target.scrollTop-t.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let l=1;l<a.length&&!(p*l>h);l++)a[l]&&a[l][s]&&(i=a[l][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!t)return;const s=this.base.initState();s.syntheticEvent=e;const a=o?{[o]:t}:t;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const o=this.base.initState();o.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.handleItemSelect(e,o),this.props.autoClose&&this.base.togglePopup(o),t.stopPropagation(),this.applyState(o)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:o,filterable:s}=this.props;t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},this.validate(n)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}validate(n){if(n.filterable||n.virtual){const e=[];n.filterable&&e.push("filterable"),n.virtual&&e.push("virtualization"),this.showLicenseWatermark=!r.validatePackage(Q.packageMetadata,{component:"MultiSelect",features:e})}}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:e}=this.props,t=[];return n===void 0?this.value.forEach(o=>{t.push({text:g.getItemValue(o,e),data:[o]})}):t.push(...n),t}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:n,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:I.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:I.defaultProps.validityStyles}componentDidUpdate(n,e){var m;const{virtual:t,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=t?t.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:e.opened,h=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),t&&t.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(d)),h&&t?this.base.scrollToVirtualItem(t,c-a):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&d&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,e,t){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),h=o&&a,i=_(p),l=this.base,m=l.vs;if(this.opened&&e===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:e,current:u,max:(m.enabled?m.total:s.length)-1,min:h?-1:0,skipItems:t||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:e,label:t,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:h,rounded:i,fillMode:l,loading:m,filter:d}=this.props,{text:c,focused:y,focusedTag:x,currentValue:q}=this.state,C=this.base.vs,T=this.props.id||this._inputId;C.enabled=u!==void 0,u!==void 0&&(C.skip=u.skip,C.total=u.total,C.pageSize=u.pageSize);const S=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:c)||S&&S.length>0,[B,V]=P(this.props.prefix||f.Fragment),[z,A]=P(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",e,{[`k-input-${w[h]||h}`]:h,[`k-rounded-${ae[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:o,onFocus:k=>{this.mobileMode?this.handleWrapperClick(k):this.handleFocus(k)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${w[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},S&&S.length>0&&f.createElement(Y,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:S,guid:this.base.guid,focused:x?S.find(k=>g.matchTags(k,x,p)):void 0,size:h})),this.renderSearchBar(T)),m&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?f.createElement($.FloatingLabel,{label:t,editorId:T,editorValue:c||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:h,inputAttributes:i}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:m}=this.getFocusedState(),d=this.value.length===0&&!l?a:void 0,c=o&&o.length>0?void 0:a,y=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${m}`,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(J,{id:n,size:Math.max((d||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?c:d,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:h,inputAttributes:i,...x})}onTagsNavigate(n,e){const t=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const h=p!==-1;if(t===r.Keys.left)h?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(t===r.Keys.right)p===s.length-1?u=void 0:h&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(t===r.Keys.home&&!n.shiftKey)u=s[0];else if(t===r.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(t===r.Keys.delete){if(h){const i=this.value;g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e)}}else if(t===r.Keys.backspace){const i=this.value;if(h)g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e);else if(!h&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,e)}}u!==o&&(e.data.focusedTag=u,e.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(n,e){this.props.value===void 0&&(e.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(n,e){const{virtual:t}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),a=t?t.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,e){e.length=0,e.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,h=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:h[n-i],focusedType:1};const m=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=p(h,e,a),{focusedItem:h[l],focusedIndex:l+i,focusedType:1};if(m.length){const d=m[m.length-1];return l=h.findIndex(c=>g.areSame(c,d,o)),h[l]!==void 0?{focusedIndex:l+i,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!e&&i===0){const d=h.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:d,focusedItem:h[d-i],focusedType:1}}return i===0?{focusedItem:h[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const e of n)this.setState({windowWidth:e.target.clientWidth})}updateStateOnKeyboardNavigation(n,e){this.setState({value:n}),this.triggerOnChange(n,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(n,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};I.displayName="MultiSelect",I.propTypes={...F.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,adaptiveSubtitle:v.string,onCancel:v.func,skipDisabledItems:v.bool,inputAttributes:v.object},I.defaultProps={...F.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let K=I;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,r.withAdaptiveModeContext(K)));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react"),v=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),$=require("@progress/kendo-react-labels"),j=require("../common/ListContainer.js"),G=require("../common/List.js"),U=require("../common/GroupStickyHeader.js"),Y=require("./TagList.js"),J=require("../common/SearchBar.js"),F=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),Q=require("../package-metadata.js"),X=require("../common/ClearButton.js"),Z=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout"),te=require("../common/ListFilter.js"),P=require("../common/withCustomComponent.js");function se(b){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const e in b)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(b,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>b[e]})}}return n.default=b,Object.freeze(n)}const f=se(H),{sizeMap:w,roundedMap:ie}=r.kendoThemeMaps,ae="Please enter a valid value!",E=b=>b.preventDefault(),_=b=>b===2,I=class I extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new F(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=a[e-p],h=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];h!==-1?(i=this.value,i.splice(h,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.triggerOnChange(i,t),this.base.triggerPageChangeCornerItems(u,t)},this.onTagDelete=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(e,t)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:h}=this.getFocusedState(),i=o&&u,l=a[e-p];l&&h!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):i&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),o=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=o),t.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(o,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:o}=this.props,s=g.getFilteredData(this.props),a=e.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:h,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=e,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,l);const m=()=>{e.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.end){const d=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.home){const d=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(e.shiftKey&&e.keyCode===r.Keys.up){let d;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?d=i!==0?s.slice(i-1,i):[s[i]]:c===i?d=[s[c-1]]:i>=0&&(d=c>i?s.slice(i-1,c):s.slice(c-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.shiftKey&&e.keyCode===r.Keys.down){let d;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?d=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?d=s.slice(i,i+2):i>=0&&(d=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.altKey&&a===r.Keys.up)m();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&t)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[t]);d=c&&s.findIndex(y=>y[t]===c[t])}else if(a===r.Keys.up||a===r.Keys.left){let c;if(i===-1)c=s,d=s.findIndex(y=>!y.disabled&&y[t]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();d=y&&s.findIndex(x=>x[t]===y[t])}}if(d){const c=d-i;this.onNavigate(l,a,c)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=s.slice(i+1).find(c=>!c.disabled);else if(a===r.Keys.up||a===r.Keys.left){const c=s.slice(0,i);for(d=c.pop();d&&d.disabled;)d=c.pop()}if(d){const c=d.id-i-1;this.onNavigate(l,a,c)}else this.onNavigate(l,a)}this.applyState(l),e.preventDefault()}else a===r.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&h===null?this.customItemSelect(e):h&&h.disabled?m():this.selectFocusedItem(e)):a===r.Keys.esc&&m();else e.altKey&&a===r.Keys.down?m():a===r.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,h=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:E},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&p!==void 0&&(d=g.getItemValue(h[0],p)),f.createElement(f.Fragment,null,e&&f.createElement("div",{className:"k-list-header"},e),m,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&d&&h.length!==0&&f.createElement(U,{group:d,groupMode:"modern",render:a}),this.renderList()),this.showLicenseWatermark&&f.createElement(r.WatermarkOverlay,null),t&&f.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:e.popupWidth,p={dir:t!==void 0?t:e.dirCalculated,width:a,popupSettings:{...s,popupClass:r.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(j,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:o,filter:s}=this.props,{windowWidth:a=0}=this.state,p=s!==void 0?s:this.state.text,u=o?f.createElement(te,{value:p,ref:i=>{this._adaptiveInput=i&&i.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}):null,h={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:i=>this.closePopup(i),windowWidth:a,mobileFilter:u};return f.createElement(Z.AdaptiveMode,{...h},f.createElement(ee.ActionSheetContent,null,f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const{textField:e,listNoDataRender:t,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),h=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${h.translate}px)`;return f.createElement(G,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:e,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{h.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:h.enabled?{transform:m}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:t,onMouseDown:E,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:h.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),h=e.target.scrollTop-t.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let l=1;l<a.length&&!(p*l>h);l++)a[l]&&a[l][s]&&(i=a[l][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!t)return;const s=this.base.initState();s.syntheticEvent=e;const a=o?{[o]:t}:t;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const o=this.base.initState();o.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.handleItemSelect(e,o),this.props.autoClose&&this.base.togglePopup(o),t.stopPropagation(),this.applyState(o)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:o,filterable:s}=this.props;t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ae)},this.validate(n)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}validate(n){if(n.filterable||n.virtual){const e=[];n.filterable&&e.push("filterable"),n.virtual&&e.push("virtualization"),this.showLicenseWatermark=!r.validatePackage(Q.packageMetadata,{component:"MultiSelect",features:e})}}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:e}=this.props,t=[];return n===void 0?this.value.forEach(o=>{t.push({text:g.getItemValue(o,e),data:[o]})}):t.push(...n),t}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:n,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:I.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:I.defaultProps.validityStyles}componentDidUpdate(n,e){var m;const{virtual:t,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=t?t.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:e.opened,h=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),t&&t.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(d)),h&&t?this.base.scrollToVirtualItem(t,c-a):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&d&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,e,t){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),h=o&&a,i=_(p),l=this.base,m=l.vs;if(this.opened&&e===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:e,current:u,max:(m.enabled?m.total:s.length)-1,min:h?-1:0,skipItems:t||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:e,label:t,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:h,rounded:i,fillMode:l,loading:m,filter:d}=this.props,{text:c,focused:y,focusedTag:x,currentValue:q}=this.state,C=this.base.vs,T=this.props.id||this._inputId;C.enabled=u!==void 0,u!==void 0&&(C.skip=u.skip,C.total=u.total,C.pageSize=u.pageSize);const S=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:c)||S&&S.length>0,[B,V]=P(this.props.prefix||f.Fragment),[A,z]=P(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",e,{[`k-input-${w[h]||h}`]:h,[`k-rounded-${ie[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:o,onFocus:k=>{this.mobileMode?this.handleWrapperClick(k):this.handleFocus(k)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${w[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},S&&S.length>0&&f.createElement(Y,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:S,guid:this.base.guid,focused:x?S.find(k=>g.matchTags(k,x,p)):void 0,size:h})),this.renderSearchBar(T)),m&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(A,{...z}),L&&f.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?f.createElement($.FloatingLabel,{label:t,editorId:T,editorValue:c||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:h,inputAttributes:i}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:m}=this.getFocusedState(),d=this.value.length===0&&!l?a:void 0,c=o&&o.length>0?void 0:a,y=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${m}`,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(J,{id:n,size:Math.max((d||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?c:d,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:h,inputAttributes:i,...x})}onTagsNavigate(n,e){const t=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const h=p!==-1;if(t===r.Keys.left)h?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(t===r.Keys.right)p===s.length-1?u=void 0:h&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(t===r.Keys.home&&!n.shiftKey)u=s[0];else if(t===r.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(t===r.Keys.delete){if(h){const i=this.value;g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e)}}else if(t===r.Keys.backspace){const i=this.value;if(h)g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e);else if(!h&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,e)}}u!==o&&(e.data.focusedTag=u,e.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(n,e){this.props.value===void 0&&(e.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(n,e){const{virtual:t}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),a=t?t.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,e){e.length=0,e.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,h=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:h[n-i],focusedType:1};const m=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=p(h,e,a),{focusedItem:h[l],focusedIndex:l+i,focusedType:1};if(m.length){const d=m[m.length-1];return l=h.findIndex(c=>g.areSame(c,d,o)),h[l]!==void 0?{focusedIndex:l+i,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!e&&i===0){const d=h.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:d,focusedItem:h[d-i],focusedType:1}}return i===0?{focusedItem:h[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const e of n)this.setState({windowWidth:e.target.clientWidth})}updateStateOnKeyboardNavigation(n,e){this.setState({value:n}),this.triggerOnChange(n,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(n,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};I.displayName="MultiSelect",I.propTypes={...F.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,adaptiveSubtitle:v.string,onCancel:v.func,skipDisabledItems:v.bool,inputAttributes:v.object},I.defaultProps={...F.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let K=I;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,r.withAdaptiveModeContext(K)));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=K;

package/MultiSelect/MultiSelect.mjs

@@ -22,15 +22,14 @@ import { packageMetadata as pt } from "../package-metadata.mjs";
 import ct from "../common/ClearButton.mjs";
 import { AdaptiveMode as ut } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as ft } from "@progress/kendo-react-layout";
-import { provideLocalizationService as mt } from "@progress/kendo-react-intl";
-import gt from "../common/ListFilter.mjs";
+import mt from "../common/ListFilter.mjs";
 import z from "../common/withCustomComponent.mjs";
-const { sizeMap: D, roundedMap: vt } = et, bt = "Please enter a valid value!", A = (F) => F.preventDefault(), H = (F) => F === 2, y = class y extends f.Component {
+const { sizeMap: D, roundedMap: gt } = et, vt = "Please enter a valid value!", A = (F) => F.preventDefault(), H = (F) => F === 2, y = class y extends f.Component {
   constructor(n) {
     super(n), this.state = {
       activedescendant: w.PopupList,
       currentValue: []
-    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new E(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.showLicenseWatermark = !1, this.focus = () => {
+    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new E(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
       const { dataItemKey: a, virtual: s } = this.props, o = b(this.props), p = s ? s.skip : 0, c = o[t - p], r = this.value.findIndex((m) => M(m, c, a));
@@ -184,10 +183,8 @@ const { sizeMap: D, roundedMap: vt } = et, bt = "Please enter a valid value!", A
       };
       return /* @__PURE__ */ f.createElement(ot, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: a, filter: s } = this.props, { windowWidth: o = 0 } = this.state, p = s !== void 0 ? s : this.state.text;
-      this.localization = mt(this);
-      const c = a ? /* @__PURE__ */ f.createElement(
-        gt,
+      const { adaptiveTitle: t, adaptiveSubtitle: e, filterable: a, filter: s } = this.props, { windowWidth: o = 0 } = this.state, p = s !== void 0 ? s : this.state.text, c = a ? /* @__PURE__ */ f.createElement(
+        mt,
         {
           value: p,
           ref: (i) => {
@@ -309,7 +306,7 @@ const { sizeMap: D, roundedMap: vt } = et, bt = "Please enter a valid value!", A
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || bt
+        this.validity.valid ? "" : this.props.validationMessage || vt
       );
     }, this.validate(n);
   }
@@ -447,7 +444,7 @@ const { sizeMap: D, roundedMap: vt } = et, bt = "Please enter a valid value!", A
         ref: this.componentRef,
         className: I("k-multiselect k-input", t, {
           [`k-input-${D[r] || r}`]: r,
-          [`k-rounded-${vt[i] || i}`]: i,
+          [`k-rounded-${gt[i] || i}`]: i,
           [`k-input-${l}`]: l,
           "k-focus": v && !s,
           "k-invalid": !N,
@@ -692,15 +689,15 @@ y.displayName = "MultiSelect", y.propTypes = {
   suffix: void 0
 };
 let _ = y;
-const It = Q(), yt = X(
+const bt = Q(), It = X(
   Z(
-    It,
+    bt,
     tt(_)
   )
 );
-yt.displayName = "KendoReactMultiSelect";
+It.displayName = "KendoReactMultiSelect";
 export {
-  yt as MultiSelect,
-  It as MultiSelectPropsContext,
+  It as MultiSelect,
+  bt as MultiSelectPropsContext,
   _ as MultiSelectWithoutContext
 };