@progress/kendo-react-layout 14.5.0-develop.9 → 15.0.0-develop.2

package/panelbar/PanelBar.mjs

@@ -6,169 +6,172 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as a from "react";
-import b from "prop-types";
+import y from "prop-types";
 import { PanelBarItem as L } from "./PanelBarItem.mjs";
-import { getInitialState as J, getFirstId as Q, flatChildren as X, isArrayEqual as Y, flatVisibleChildren as Z, getFocusedChild as _, renderChildren as ee } from "./util.mjs";
-import { Keys as m, classNames as re } from "@progress/kendo-react-common";
+import { getInitialState as Q, getFirstId as X, flatChildren as Y, isArrayEqual as Z, flatVisibleChildren as _, getFocusedChild as ee, renderChildren as te } from "./util.mjs";
+import { useWebMcpRegister as re, Keys as m, classNames as ne } from "@progress/kendo-react-common";
 import { NavigationAction as n } from "./interfaces/NavigationAction.mjs";
-const U = (p) => {
+const U = (c) => {
   const {
-    animation: d = !0,
+    animation: u = !0,
     children: o,
     dir: N,
     selected: w,
     expanded: O,
     expandMode: I = "multiple",
     className: A,
-    keepItemsMounted: T = !1,
+    keepItemsMounted: R = !1,
     onSelect: C,
     style: D,
     isControlled: W
-  } = p, v = a.useRef(null), E = a.useRef(void 0), x = a.useRef(null), [c, f] = a.useState(() => {
-    const l = J(p, I || "multiple");
-    return l.focused || (l.focused = Q(p)), l;
-  }), F = I || "multiple", R = w !== void 0 ? w : c.selected, h = W ? O || [] : c.expanded, S = a.useCallback((r) => {
-    x.current = window.setTimeout(() => r());
+  } = c, v = a.useRef(null), $ = a.useRef(null), T = a.useRef(void 0), x = a.useRef(null);
+  re("panelbar", $, c, c.webMcp);
+  const [p, f] = a.useState(() => {
+    const i = Q(c, I || "multiple");
+    return i.focused || (i.focused = X(c)), i;
+  }), E = I || "multiple", F = w !== void 0 ? w : p.selected, h = W ? O || [] : p.expanded, M = a.useCallback((t) => {
+    x.current = window.setTimeout(() => t());
   }, []), g = a.useCallback(
-    (r) => {
-      const l = K, s = X(a.Children.toArray(l));
-      let t, i;
+    (t) => {
+      const i = K, s = Y(a.Children.toArray(i));
+      let r, l;
       switch (s.forEach((e) => {
-        e.props.uniquePrivateKey === (r.uniquePrivateKey || c.focused) && (t = e);
-      }), F) {
+        e.props.uniquePrivateKey === (t.uniquePrivateKey || p.focused) && (r = e);
+      }), E) {
         case "single":
-          i = [...t.props.parentUniquePrivateKey, t.props.uniquePrivateKey], Y(h, i) && (t.props.parentUniquePrivateKey ? i = [...t.props.parentUniquePrivateKey] : i = []);
+          l = [...r.props.parentUniquePrivateKey, r.props.uniquePrivateKey], Z(h, l) && (r.props.parentUniquePrivateKey ? l = [...r.props.parentUniquePrivateKey] : l = []);
           break;
         case "multiple": {
-          i = h.slice();
-          const e = i.indexOf(t.props.uniquePrivateKey);
-          e === -1 ? i.push(t.props.uniquePrivateKey) : i.splice(e, 1);
+          l = h.slice();
+          const e = l.indexOf(r.props.uniquePrivateKey);
+          e === -1 ? l.push(r.props.uniquePrivateKey) : l.splice(e, 1);
           break;
         }
         default:
-          i = h.slice();
+          l = h.slice();
           break;
       }
-      f((e) => ({ ...e, selected: t.props.uniquePrivateKey, expanded: i })), C && C({
-        target: t,
-        expandedItems: i
+      f((e) => ({ ...e, selected: r.props.uniquePrivateKey, expanded: l })), C && C({
+        target: r,
+        expandedItems: l
       });
     },
-    [o, c.focused, F, h, C]
-  ), u = a.useCallback(
-    (r, l = 0, s) => {
-      const t = K, i = Z(a.Children.toArray(t)), e = _(i, l, r, c.focused, s);
+    [o, p.focused, E, h, C]
+  ), d = a.useCallback(
+    (t, i = 0, s) => {
+      const r = K, l = _(a.Children.toArray(r)), e = ee(l, i, t, p.focused, s);
       if (e) {
         const k = h.slice();
         if (s === n.Right && e && e.props && e.props.children && e.props.children.length > 0) {
-          if (k.push(e.props.uniquePrivateKey), f((y) => ({ ...y, expanded: [...new Set(k)] })), e.props.expanded) {
-            const y = e.props.children[0].props.uniquePrivateKey;
-            f((P) => ({ ...P, focused: y }));
+          if (k.push(e.props.uniquePrivateKey), f((b) => ({ ...b, expanded: [...new Set(k)] })), e.props.expanded) {
+            const b = e.props.children[0];
+            f((P) => ({ ...P, focused: b.props.uniquePrivateKey }));
           }
         } else if (s === n.Left && (e && e.props && e.props.parentUniquePrivateKey && e.props.parentUniquePrivateKey.length > 0 || e && e.props && !e.props.disabled && e.props.children && e.props.children.length > 0)) {
-          const y = e.props.parentUniquePrivateKey;
+          const b = e.props.parentUniquePrivateKey;
           if (e.props.expanded) {
             const P = e.props.uniquePrivateKey, q = k.indexOf(P);
-            k.splice(q, 1), f((H) => ({ ...H, expanded: k }));
+            k.splice(q, 1), f((J) => ({ ...J, expanded: k }));
           } else if (e.props.level > 0) {
-            const P = e.props.parentUniquePrivateKey[y.length - 1];
+            const P = e.props.parentUniquePrivateKey[b.length - 1];
             f((q) => ({ ...q, focused: P }));
           }
         } else
-          E.current = e.props.id, f((y) => ({ ...y, focused: e.props.uniquePrivateKey }));
+          f((b) => ({ ...b, focused: e.props.uniquePrivateKey }));
       }
     },
-    [o, c.focused, h]
+    [o, p.focused, h]
   ), B = a.useCallback(
-    (r) => {
-      g(r), u(r);
+    (t) => {
+      g(t), d(t);
     },
-    [g, u]
-  ), K = a.useMemo(() => ee({
-    animation: d,
-    keepItemsMounted: T,
-    state: { ...c, selected: R },
+    [g, d]
+  ), K = a.useMemo(() => te({
+    animation: u,
+    keepItemsMounted: R,
+    state: { ...p, selected: F },
     expanded: h,
     handleSelect: B,
-    children: o
-  }), [d, T, c, R, h, o, B]), M = a.useCallback(
-    (r, l) => {
+    children: o,
+    activeDescendantRef: T
+  }), [u, R, p, F, h, o, B]), S = a.useCallback(
+    (t, i) => {
       let s;
-      switch (l) {
+      switch (i) {
         case n.First:
-          u(r, s, n.First);
+          d(t, s, n.First);
           break;
         case n.Last:
-          u(r, s, n.Last);
+          d(t, s, n.Last);
           break;
         case n.Left:
-          u(r, s, n.Left);
+          d(t, s, n.Left);
           break;
         case n.Right:
-          u(r, s, n.Right);
+          d(t, s, n.Right);
           break;
         case n.Previous:
-          s = -1, u(r, s);
+          s = -1, d(t, s);
           break;
         case n.Next:
-          s = 1, u(r, s);
+          s = 1, d(t, s);
           break;
         case n.Toggle:
-          g(r);
+          g(t);
           break;
       }
     },
-    [u, g]
-  ), $ = a.useCallback(() => {
-    clearTimeout(x.current), c.wrapperFocused || f((r) => ({ ...r, wrapperFocused: !0 }));
-  }, [c.wrapperFocused]), V = a.useCallback(() => {
-    S(() => {
-      f((r) => ({ ...r, wrapperFocused: !1 }));
+    [d, g]
+  ), H = a.useCallback(() => {
+    clearTimeout(x.current), p.wrapperFocused || f((t) => ({ ...t, wrapperFocused: !0 }));
+  }, [p.wrapperFocused]), V = a.useCallback(() => {
+    M(() => {
+      f((t) => ({ ...t, wrapperFocused: !1 }));
     });
-  }, [S]), j = a.useCallback(
-    (r) => {
-      const l = v.current && getComputedStyle(v.current).direction === "rtl" || !1;
-      if (r.target === r.currentTarget) {
-        const s = r.keyCode;
-        let t;
+  }, [M]), j = a.useCallback(
+    (t) => {
+      const i = v.current && getComputedStyle(v.current).direction === "rtl" || !1;
+      if (t.target === t.currentTarget) {
+        const s = t.keyCode;
+        let r;
         switch (s) {
           case m.left:
-            t = l ? n.Right : n.Left;
+            r = i ? n.Right : n.Left;
             break;
           case m.up:
-            t = n.Previous;
+            r = n.Previous;
             break;
           case m.right:
-            t = l ? n.Left : n.Right;
+            r = i ? n.Left : n.Right;
             break;
           case m.down:
-            t = n.Next;
+            r = n.Next;
             break;
           case m.home:
-            t = n.First;
+            r = n.First;
             break;
           case m.end:
-            t = n.Last;
+            r = n.Last;
             break;
           case m.space:
           case m.enter:
-            t = n.Toggle;
+            r = n.Toggle;
             break;
           default:
-            t = null;
+            r = null;
             break;
         }
-        t !== null && (r.preventDefault(), M(r, t));
+        r !== null && (t.preventDefault(), S(t, r));
       }
     },
-    [M]
+    [S]
   );
   a.useEffect(() => () => {
     x.current && clearTimeout(x.current);
   }, []);
   const z = {
-    "aria-activedescendant": E.current
-  }, G = re("k-panelbar", A);
+    "aria-activedescendant": T.current
+  }, G = ne("k-panelbar", A);
   return /* @__PURE__ */ a.createElement(
     "ul",
     {
@@ -177,7 +180,7 @@ const U = (p) => {
       role: "tree",
       tabIndex: 0,
       onKeyDown: j,
-      onFocus: $,
+      onFocus: H,
       onBlur: V,
       className: G,
       style: D,
@@ -190,12 +193,12 @@ U.propTypes = {
   /**
    * A collection of `PanelBarItem` components.
    */
-  children: b.oneOfType([
-    b.arrayOf(function(p, d) {
-      return p[d].type !== L ? new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem.") : null;
+  children: y.oneOfType([
+    y.arrayOf(function(c, u) {
+      return c[u].type !== L ? new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem.") : null;
     }),
-    function(p, d) {
-      const o = p[d];
+    function(c, u) {
+      const o = c[u];
       return o && o.type !== L ? new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem.") : null;
     }
   ]),
@@ -203,29 +206,29 @@ U.propTypes = {
    * Expands the item or items that match the `selected` property while respecting the `expandMode` property (see [example]({% slug expandModes_panelbar %}#toc-single-expandMode)).
    * To expand the item on the initial load of the PanelBar, define the `expanded` property of each PanelBarItem.
    */
-  selected: b.string,
+  selected: y.string,
   /**
    * Sets the expand mode of the PanelBar through the `single`, `multiple`, or `default` keywords (see [example]({% slug expandModes_panelbar %})).
    */
-  expandMode(p, d) {
-    const o = p[d];
+  expandMode(c, u) {
+    const o = c[u];
     return o !== "single" && o !== "multiple" && o !== "default" ? new Error(
-      `Invalid value '${o}' given to '${d}'. It must be either 'single', 'multiple' or 'default'.`
+      `Invalid value '${o}' given to '${u}'. It must be either 'single', 'multiple' or 'default'.`
     ) : null;
   },
   /**
    * Enables or disables the animation of the PanelBar items.
    */
-  animation: b.bool,
+  animation: y.bool,
   /**
    * When enabled, keeps PanelBarItem content mounted in the DOM even when collapsed.
    */
-  keepItemsMounted: b.bool,
+  keepItemsMounted: y.bool,
   /**
    * Fires when the expand mode of the PanelBar is set to `single` or `multiple`
    * and an item is toggled (see [example]({% slug overview_panelbar %}#toc-expanded-state-management)).
    */
-  onSelect: b.func
+  onSelect: y.func
 };
 U.defaultProps = {
   expandMode: "multiple",

package/panelbar/PanelBarItem.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 z=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("@progress/kendo-svg-icons"),G=require("@progress/kendo-react-animation");function $(a){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(c,r,t.get?t:{enumerable:!0,get:()=>a[r]})}}return c.default=a,Object.freeze(c)}const e=$(z);function J({imageUrl:a,icon:c,svgIcon:r,iconClass:t}){return a?e.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:a}):c||r?e.createElement(i.IconWrap,{className:"k-panelbar-item-icon",name:c,icon:r}):t?e.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+t}):null}const d=e.forwardRef((a,c)=>{const{id:r,children:t,title:E=h.title,uniquePrivateKey:u,disabled:l,selected:b,focused:C,expanded:o,className:P,level:k,headerClassName:R,animation:y,keepItemsMounted:s,onSelect:m,imageUrl:S,icon:B,svgIcon:x,iconClass:O}=a,p=e.useRef({props:a}),D=e.useRef(null);e.useImperativeHandle(p,()=>({props:a})),e.useImperativeHandle(c,()=>p.current);const[w,g]=e.useState(o||!1),T=e.useCallback(()=>{m&&!l&&m({uniquePrivateKey:u,id:r,target:p.current})},[m,l,u,r]),q=e.useCallback(f=>s?e.cloneElement(f,{...f.props,in:o}):f,[s,o]),A=e.useCallback(()=>{s&&g(!0)},[s]),j=e.useCallback(()=>{s&&g(!1)},[s]),U={role:"treeitem","aria-disabled":l,"aria-hidden":!l&&!o?"true":"false","aria-selected":!l&&b,"aria-expanded":!l&&o&&!!t},M=i.classNames("k-panelbar-item",{"k-panelbar-header":k===0,"k-expanded":o&&!!t,"k-disabled":l},`k-level-${k}`,P),_=i.classNames("k-link",{"k-selected":!l&&b,"k-focus":C},R),H={display:"block"},L=J({imageUrl:S,icon:B,svgIcon:x,iconClass:O}),F=!l&&t?e.createElement(i.IconWrap,{name:o?"chevron-up":"chevron-down",icon:o?N.chevronUpIcon:N.chevronDownIcon,className:i.classNames("k-panelbar-toggle",o?"k-panelbar-collapse":"k-panelbar-expand")}):null;let I=!1;t&&t[0]&&Array.isArray(t)&&(I=t[0].type===d);const K=s&&!w?"none":"block",v=!l&&o||s?I?e.createElement("ul",{role:"group","aria-hidden":o?"false":"true",className:"k-panelbar-group",style:{display:K}},t):t:null,W=(y===void 0||y)&&!l&&t?e.createElement(G.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:u+"_animation",style:H,children:v,childFactory:s?q:void 0,unmountOnExit:!s,onBeforeEnter:A,onAfterExited:j}):v;return e.createElement("li",{ref:D,id:r,className:M,...U},e.createElement("span",{className:_,onClick:T},L,e.createElement("span",{className:"k-panelbar-item-text"},E),F),W)}),h={title:"Untitled"};d.propTypes={animation:n.bool,children:n.any,className:n.string,icon:n.string,iconClass:n.string,imageUrl:n.string,svgIcon:i.svgIconPropType,expanded:n.bool,disabled:n.bool,onSelect:n.func,selected:n.bool,level:n.number,title:n.oneOfType([n.string,n.element]),id:n.oneOfType([n.string,n.number]),focused:n.bool,keepItemsMounted:n.bool};d.displayName="KendoReactPanelBarItem";exports.PanelBarItem=d;exports.panelBarItemDefaultProps=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("@progress/kendo-svg-icons"),G=require("@progress/kendo-react-animation");function $(a){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(c,r,t.get?t:{enumerable:!0,get:()=>a[r]})}}return c.default=a,Object.freeze(c)}const e=$(z);function J({imageUrl:a,icon:c,svgIcon:r,iconClass:t}){return a?e.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:a}):c||r?e.createElement(i.IconWrap,{className:"k-panelbar-item-icon",name:c,icon:r}):t?e.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+t}):null}const d=e.forwardRef((a,c)=>{const{id:r,children:t,title:h=E.title,uniquePrivateKey:m,disabled:l,selected:b,focused:C,expanded:s,className:P,level:k,headerClassName:R,animation:y,keepItemsMounted:o,onSelect:u,imageUrl:S,icon:B,svgIcon:x,iconClass:O}=a,p=e.useRef({props:a}),D=e.useRef(null);e.useImperativeHandle(p,()=>({props:a})),e.useImperativeHandle(c,()=>p.current);const[w,g]=e.useState(s||!1),T=e.useCallback(()=>{u&&!l&&u({uniquePrivateKey:m,id:r,target:p.current})},[u,l,m,r]),q=e.useCallback(f=>o?e.cloneElement(f,{...f.props,in:s}):f,[o,s]),A=e.useCallback(()=>{o&&g(!0)},[o]),j=e.useCallback(()=>{o&&g(!1)},[o]),U={role:"treeitem","aria-disabled":l,"aria-selected":!l&&b,"aria-expanded":t?!l&&s:void 0},M=i.classNames("k-panelbar-item",{"k-panelbar-header":k===0,"k-expanded":s&&!!t,"k-disabled":l},`k-level-${k}`,P),_=i.classNames("k-link",{"k-selected":!l&&b,"k-focus":C},R),H={display:"block"},L=J({imageUrl:S,icon:B,svgIcon:x,iconClass:O}),F=!l&&t?e.createElement(i.IconWrap,{name:s?"chevron-up":"chevron-down",icon:s?N.chevronUpIcon:N.chevronDownIcon,className:i.classNames("k-panelbar-toggle",s?"k-panelbar-collapse":"k-panelbar-expand")}):null;let I=!1;t&&t[0]&&Array.isArray(t)&&(I=t[0].type===d);const K=o&&!w?"none":"block",v=!l&&s||o?I?e.createElement("ul",{role:"group",className:"k-panelbar-group",style:{display:K}},t):t:null,W=(y===void 0||y)&&!l&&t?e.createElement(G.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:m+"_animation",style:H,children:v,childFactory:o?q:void 0,unmountOnExit:!o,onBeforeEnter:A,onAfterExited:j}):v;return e.createElement("li",{ref:D,id:r,className:M,...U},e.createElement("span",{className:_,onClick:T},L,e.createElement("span",{className:"k-panelbar-item-text"},h),F),W)}),E={title:"Untitled"};d.propTypes={animation:n.bool,children:n.any,className:n.string,icon:n.string,iconClass:n.string,imageUrl:n.string,svgIcon:i.svgIconPropType,expanded:n.bool,disabled:n.bool,onSelect:n.func,selected:n.bool,level:n.number,title:n.oneOfType([n.string,n.element]),id:n.oneOfType([n.string,n.number]),focused:n.bool,keepItemsMounted:n.bool};d.displayName="KendoReactPanelBarItem";exports.PanelBarItem=d;exports.panelBarItemDefaultProps=E;

package/panelbar/PanelBarItem.mjs

@@ -7,21 +7,21 @@
  */
 import * as e from "react";
 import n from "prop-types";
-import { classNames as u, IconWrap as v, svgIconPropType as _ } from "@progress/kendo-react-common";
+import { classNames as u, IconWrap as E, svgIconPropType as _ } from "@progress/kendo-react-common";
 import { chevronUpIcon as $, chevronDownIcon as j } from "@progress/kendo-svg-icons";
 import { Reveal as z } from "@progress/kendo-react-animation";
 function J({ imageUrl: o, icon: i, svgIcon: s, iconClass: a }) {
-  return o ? /* @__PURE__ */ e.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: o }) : i || s ? /* @__PURE__ */ e.createElement(v, { className: "k-panelbar-item-icon", name: i, icon: s }) : a ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + a }) : null;
+  return o ? /* @__PURE__ */ e.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: o }) : i || s ? /* @__PURE__ */ e.createElement(E, { className: "k-panelbar-item-icon", name: i, icon: s }) : a ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + a }) : null;
 }
 const f = e.forwardRef((o, i) => {
   const {
     id: s,
     children: a,
-    title: E = Q.title,
+    title: N = Q.title,
     uniquePrivateKey: c,
     disabled: t,
     selected: k,
-    focused: N,
+    focused: h,
     expanded: r,
     className: C,
     level: b,
@@ -57,9 +57,8 @@ const f = e.forwardRef((o, i) => {
   }, [l]), L = {
     role: "treeitem",
     "aria-disabled": t,
-    "aria-hidden": !t && !r ? "true" : "false",
     "aria-selected": !t && k,
-    "aria-expanded": !t && r && !!a
+    "aria-expanded": a ? !t && r : void 0
   }, O = u(
     "k-panelbar-item",
     {
@@ -73,24 +72,23 @@ const f = e.forwardRef((o, i) => {
     "k-link",
     {
       "k-selected": !t && k,
-      "k-focus": N
+      "k-focus": h
     },
     x
   ), K = { display: "block" }, M = J({ imageUrl: B, icon: R, svgIcon: w, iconClass: P }), q = !t && a ? /* @__PURE__ */ e.createElement(
-    v,
+    E,
     {
       name: r ? "chevron-up" : "chevron-down",
       icon: r ? $ : j,
       className: u("k-panelbar-toggle", r ? "k-panelbar-collapse" : "k-panelbar-expand")
     }
   ) : null;
-  let I = !1;
-  a && a[0] && Array.isArray(a) && (I = a[0].type === f);
-  const G = l && !A ? "none" : "block", h = !t && r || l ? I ? /* @__PURE__ */ e.createElement(
+  let v = !1;
+  a && a[0] && Array.isArray(a) && (v = a[0].type === f);
+  const G = l && !A ? "none" : "block", I = !t && r || l ? v ? /* @__PURE__ */ e.createElement(
     "ul",
     {
       role: "group",
-      "aria-hidden": r ? "false" : "true",
       className: "k-panelbar-group",
       style: { display: G }
     },
@@ -102,14 +100,14 @@ const f = e.forwardRef((o, i) => {
       transitionExitDuration: 200,
       key: c + "_animation",
       style: K,
-      children: h,
+      children: I,
       childFactory: l ? T : void 0,
       unmountOnExit: !l,
       onBeforeEnter: U,
       onAfterExited: H
     }
-  ) : h;
-  return /* @__PURE__ */ e.createElement("li", { ref: S, id: s, className: O, ...L }, /* @__PURE__ */ e.createElement("span", { className: F, onClick: D }, M, /* @__PURE__ */ e.createElement("span", { className: "k-panelbar-item-text" }, E), q), W);
+  ) : I;
+  return /* @__PURE__ */ e.createElement("li", { ref: S, id: s, className: O, ...L }, /* @__PURE__ */ e.createElement("span", { className: F, onClick: D }, M, /* @__PURE__ */ e.createElement("span", { className: "k-panelbar-item-text" }, N), q), W);
 }), Q = {
   title: "Untitled"
 };

package/panelbar/interfaces/PanelBarProps.d.ts

@@ -6,6 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { PanelBarSelectEventArguments } from '../../index.js';
+import { WebMcpProps } from '@progress/kendo-react-common';
 /**
  * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
  */
@@ -137,4 +138,11 @@ export interface PanelBarProps {
      * ```
      */
     style?: React.CSSProperties;
+    /**
+     * Enables Web MCP tool registration so AI agents can interact with this PanelBar.
+     * Set to `true` to use the provider-level `dataName`, or pass a config object to override.
+     *
+     * Requires a `WebMcpProvider` ancestor from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
 }

package/panelbar/interfaces/RenderPanelBarItem.d.ts

@@ -19,4 +19,5 @@ export interface RenderPanelBarItem {
     parentExpanded?: boolean;
     level?: number;
     parentPrivateKey?: string[];
+    activeDescendantRef?: React.MutableRefObject<string | undefined>;
 }

package/panelbar/util.d.ts

@@ -14,7 +14,7 @@ import * as React from 'react';
 /**
  * @hidden
  */
-export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React.ReactNode;
+export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey, activeDescendantRef }: RenderPanelBarItem) => React.ReactNode;
 /**
  * @hidden
  */

package/panelbar/util.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 B=require("react"),l=require("./PanelBarItem.js"),d=require("./interfaces/NavigationAction.js");function F(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return r.default=n,Object.freeze(r)}const i=F(B),O=n=>typeof n!="object"||!("type"in n)||n.type!==l.PanelBarItem,y=({animation:n=!0,keepItemsMounted:r=!1,state:e,expanded:o,handleSelect:a,children:t,parentExpanded:c=!0,level:s=0,parentPrivateKey:f=[]})=>{const b=i.Children.toArray(t).filter(O),q=b.length?b:t;return i.Children.map(q,(p,C)=>{if(p&&p.type===l.PanelBarItem){let m;const u=g(p,f,C);if(p.props.children){const A={animation:n,keepItemsMounted:r,state:e,expanded:o,handleSelect:a,children:p.props.children,parentExpanded:(o||[]).indexOf(u)>-1,level:s+1,parentPrivateKey:[...f,u]};m=y(A)}return i.cloneElement(p,{...p.props,animation:p.props.animation!==void 0?p.props.animation:n,keepItemsMounted:r,id:p.props.id||`k-panelbar-item-default-${u}`,uniquePrivateKey:u,parentUniquePrivateKey:f,parentExpanded:c,level:s,expanded:(o||[]).indexOf(u)>-1,focused:e.focused===u&&e.wrapperFocused,selected:e.selected===u,children:m,onSelect:a})}return i.createElement("div",{className:"k-panelbar-content"},p)})},x=n=>{const r=i.Children.toArray(n.children)[0];return r?g(r,[],0):""},I=(n,r,e={expanded:n.expanded||[],selected:n.selected||"",focused:n.focused||"",wrapperFocused:!1},o=!0,a=[])=>(i.Children.map(n.children,(t,c)=>{if(t&&t.type===l.PanelBarItem){const s=g(t,a,c);!t.props.disabled&&o&&(t.props.selected&&(e.selected=s),t.props.focused&&(e.focused=s),t.props.expanded&&(r==="multiple"?e.expanded.push(s):r==="single"&&(e.expanded=[s])),t.props.children&&(e=I(t.props,r,e,!!t.props.expanded,[...a,s])))}}),e),g=(n,r,e)=>n&&n.props&&n.props.id?n.props.id:r.length?r[r.length-1]+`.${e}`:`.${e}`;function P(n,r=[]){return(n||[]).forEach(e=>{e.disabled||(r.push(e),e.expanded&&e.children&&P(e.children,r))}),r}function v(n,r=[]){return i.Children.forEach(n,e=>{e&&e.props&&!e.props.disabled&&(r.push(e),e.props.children&&v(e.props.children,r))}),r}function E(n,r=[]){return i.Children.forEach(n,e=>{e&&e.props&&(e.props.expanded||e.props.parentExpanded)&&(r.push(e),e.props.children&&E(e.props.children,r))}),r}const N=n=>n!=null;exports.PanelBarUtils=void 0;(n=>{function r(e){return e.map((o,a)=>{let t;return o.content&&(t=o.content),o.children&&(t=r(o.children)),i.createElement(l.PanelBarItem,{...o,children:t,key:o.id||a})})}n.mapItemsToComponents=r})(exports.PanelBarUtils||(exports.PanelBarUtils={}));const S=(n,r)=>n.length!==r.length?!1:n.every((e,o)=>e===r[o]),j=(n,r,e,o,a)=>{let t;if(a===d.NavigationAction.First||a===d.NavigationAction.Last)switch(a){case d.NavigationAction.First:t=n[0];break;case d.NavigationAction.Last:t=n[n.length-1];break}else n.forEach((c,s)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||o)){const f=s+r<0?n.length-1:s+r>n.length-1?0:s+r;t=n[f]}});return t};exports.flatChildren=v;exports.flatVisibleChildren=E;exports.flatVisibleItems=P;exports.getFirstId=x;exports.getFocusedChild=j;exports.getInitialState=I;exports.isArrayEqual=S;exports.isPresent=N;exports.renderChildren=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),l=require("./PanelBarItem.js"),d=require("./interfaces/NavigationAction.js");function N(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>r[e]})}}return n.default=r,Object.freeze(n)}const a=N(O),S=r=>typeof r!="object"||!("type"in r)||r.type!==l.PanelBarItem,P=({animation:r=!0,keepItemsMounted:n=!1,state:e,expanded:o,handleSelect:p,children:t,parentExpanded:c=!0,level:s=0,parentPrivateKey:f=[],activeDescendantRef:g})=>{const m=a.Children.toArray(t).filter(S),F=m.length?m:t;return a.Children.map(F,(i,A)=>{if(i&&i.type===l.PanelBarItem){let y;const u=b(i,f,A);if(i.props.children){const B={animation:r,keepItemsMounted:n,state:e,expanded:o,handleSelect:p,children:i.props.children,parentExpanded:(o||[]).indexOf(u)>-1,level:s+1,parentPrivateKey:[...f,u],activeDescendantRef:g};y=P(B)}const I=i.props.id||`k-panelbar-item-default-${u}`;return g&&e.wrapperFocused&&e.focused===u&&(g.current=I),a.cloneElement(i,{...i.props,animation:i.props.animation!==void 0?i.props.animation:r,keepItemsMounted:n,id:I,uniquePrivateKey:u,parentUniquePrivateKey:f,parentExpanded:c,level:s,expanded:(o||[]).indexOf(u)>-1,focused:e.focused===u&&e.wrapperFocused,selected:e.selected===u,children:y,onSelect:p})}return a.createElement("div",{className:"k-panelbar-content","aria-hidden":c?void 0:"true"},i)})},j=r=>{const n=a.Children.toArray(r.children)[0];return n?b(n,[],0):""},v=(r,n,e={expanded:r.expanded||[],selected:r.selected||"",focused:r.focused||"",wrapperFocused:!1},o=!0,p=[])=>(a.Children.map(r.children,(t,c)=>{if(t&&t.type===l.PanelBarItem){const s=b(t,p,c);!t.props.disabled&&o&&(t.props.selected&&(e.selected=s),t.props.focused&&(e.focused=s),t.props.expanded&&(n==="multiple"?e.expanded.push(s):n==="single"&&(e.expanded=[s])),t.props.children&&(e=v(t.props,n,e,!!t.props.expanded,[...p,s])))}}),e),b=(r,n,e)=>r&&r.props&&r.props.id?r.props.id:n.length?n[n.length-1]+`.${e}`:`.${e}`;function E(r,n=[]){return(r||[]).forEach(e=>{e.disabled||(n.push(e),e.expanded&&e.children&&E(e.children,n))}),n}function q(r,n=[]){return a.Children.forEach(r,e=>{e&&e.props&&!e.props.disabled&&(n.push(e),e.props.children&&q(e.props.children,n))}),n}function C(r,n=[]){return a.Children.forEach(r,e=>{e&&e.props&&(e.props.expanded||e.props.parentExpanded)&&(n.push(e),e.props.children&&C(e.props.children,n))}),n}const x=r=>r!=null;exports.PanelBarUtils=void 0;(r=>{function n(e){return e.map((o,p)=>{let t;return o.content&&(t=o.content),o.children&&(t=n(o.children)),a.createElement(l.PanelBarItem,{...o,children:t,key:o.id||p})})}r.mapItemsToComponents=n})(exports.PanelBarUtils||(exports.PanelBarUtils={}));const h=(r,n)=>r.length!==n.length?!1:r.every((e,o)=>e===n[o]),k=(r,n,e,o,p)=>{let t;if(p===d.NavigationAction.First||p===d.NavigationAction.Last)switch(p){case d.NavigationAction.First:t=r[0];break;case d.NavigationAction.Last:t=r[r.length-1];break}else r.forEach((c,s)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||o)){const f=s+n<0?r.length-1:s+n>r.length-1?0:s+n;t=r[f]}});return t};exports.flatChildren=q;exports.flatVisibleChildren=C;exports.flatVisibleItems=E;exports.getFirstId=j;exports.getFocusedChild=k;exports.getInitialState=v;exports.isArrayEqual=h;exports.isPresent=x;exports.renderChildren=P;