@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/MultiColumnComboBox/MultiColumnComboBox.mjs

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

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