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

package/panelbar/util.mjs

@@ -5,101 +5,104 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as f from "react";
+import * as i from "react";
 import { PanelBarItem as g } from "./PanelBarItem.mjs";
 import { NavigationAction as d } from "./interfaces/NavigationAction.mjs";
-const I = (r) => typeof r != "object" || !("type" in r) || r.type !== g, F = ({
+const q = (r) => typeof r != "object" || !("type" in r) || r.type !== g, C = ({
   animation: r = !0,
   keepItemsMounted: n = !1,
   state: e,
   expanded: p,
   handleSelect: t,
   children: o,
-  parentExpanded: i = !0,
+  parentExpanded: f = !0,
   level: s = 0,
-  parentPrivateKey: c = []
+  parentPrivateKey: c = [],
+  activeDescendantRef: m
 }) => {
-  const l = f.Children.toArray(o).filter(I), b = l.length ? l : o;
-  return f.Children.map(b, (a, x) => {
-    if (a && a.type === g) {
-      let y;
-      const u = m(a, c, x);
-      if (a.props.children) {
-        const v = {
+  const y = i.Children.toArray(o).filter(q), v = y.length ? y : o;
+  return i.Children.map(v, (u, x) => {
+    if (u && u.type === g) {
+      let b;
+      const a = l(u, c, x);
+      if (u.props.children) {
+        const F = {
           animation: r,
           keepItemsMounted: n,
           state: e,
           expanded: p,
           handleSelect: t,
-          children: a.props.children,
-          parentExpanded: (p || []).indexOf(u) > -1,
+          children: u.props.children,
+          parentExpanded: (p || []).indexOf(a) > -1,
           level: s + 1,
-          parentPrivateKey: [...c, u]
+          parentPrivateKey: [...c, a],
+          activeDescendantRef: m
         };
-        y = F(v);
+        b = C(F);
       }
-      return f.cloneElement(a, {
-        ...a.props,
-        animation: a.props.animation !== void 0 ? a.props.animation : r,
+      const E = u.props.id || `k-panelbar-item-default-${a}`;
+      return m && e.wrapperFocused && e.focused === a && (m.current = E), i.cloneElement(u, {
+        ...u.props,
+        animation: u.props.animation !== void 0 ? u.props.animation : r,
         keepItemsMounted: n,
-        id: a.props.id || `k-panelbar-item-default-${u}`,
-        uniquePrivateKey: u,
+        id: E,
+        uniquePrivateKey: a,
         parentUniquePrivateKey: c,
-        parentExpanded: i,
+        parentExpanded: f,
         level: s,
-        expanded: (p || []).indexOf(u) > -1,
-        focused: e.focused === u && e.wrapperFocused,
-        selected: e.selected === u,
-        children: y,
+        expanded: (p || []).indexOf(a) > -1,
+        focused: e.focused === a && e.wrapperFocused,
+        selected: e.selected === a,
+        children: b,
         onSelect: t
       });
     }
-    return /* @__PURE__ */ f.createElement("div", { className: "k-panelbar-content" }, a);
+    return /* @__PURE__ */ i.createElement("div", { className: "k-panelbar-content", "aria-hidden": f ? void 0 : "true" }, u);
   });
-}, $ = (r) => {
-  const n = f.Children.toArray(r.children)[0];
-  return n ? m(n, [], 0) : "";
-}, q = (r, n, e = {
+}, K = (r) => {
+  const n = i.Children.toArray(r.children)[0];
+  return n ? l(n, [], 0) : "";
+}, k = (r, n, e = {
   expanded: r.expanded || [],
   selected: r.selected || "",
   focused: r.focused || "",
   wrapperFocused: !1
-}, p = !0, t = []) => (f.Children.map(r.children, (o, i) => {
+}, p = !0, t = []) => (i.Children.map(r.children, (o, f) => {
   if (o && o.type === g) {
-    const s = m(o, t, i);
-    !o.props.disabled && p && (o.props.selected && (e.selected = s), o.props.focused && (e.focused = s), o.props.expanded && (n === "multiple" ? e.expanded.push(s) : n === "single" && (e.expanded = [s])), o.props.children && (e = q(o.props, n, e, !!o.props.expanded, [
+    const s = l(o, t, f);
+    !o.props.disabled && p && (o.props.selected && (e.selected = s), o.props.focused && (e.focused = s), o.props.expanded && (n === "multiple" ? e.expanded.push(s) : n === "single" && (e.expanded = [s])), o.props.children && (e = k(o.props, n, e, !!o.props.expanded, [
       ...t,
       s
     ])));
   }
-}), e), m = (r, n, e) => r && r.props && r.props.id ? r.props.id : n.length ? n[n.length - 1] + `.${e}` : `.${e}`;
-function C(r, n = []) {
+}), e), l = (r, n, e) => r && r.props && r.props.id ? r.props.id : n.length ? n[n.length - 1] + `.${e}` : `.${e}`;
+function w(r, n = []) {
   return (r || []).forEach((e) => {
-    e.disabled || (n.push(e), e.expanded && e.children && C(e.children, n));
+    e.disabled || (n.push(e), e.expanded && e.children && w(e.children, n));
   }), n;
 }
-function k(r, n = []) {
-  return f.Children.forEach(r, (e) => {
-    e && e.props && !e.props.disabled && (n.push(e), e.props.children && k(e.props.children, n));
+function P(r, n = []) {
+  return i.Children.forEach(r, (e) => {
+    e && e.props && !e.props.disabled && (n.push(e), e.props.children && P(e.props.children, n));
   }), n;
 }
-function P(r, n = []) {
-  return f.Children.forEach(r, (e) => {
-    e && e.props && (e.props.expanded || e.props.parentExpanded) && (n.push(e), e.props.children && P(e.props.children, n));
+function A(r, n = []) {
+  return i.Children.forEach(r, (e) => {
+    e && e.props && (e.props.expanded || e.props.parentExpanded) && (n.push(e), e.props.children && A(e.props.children, n));
   }), n;
 }
-const B = (r) => r != null;
-var E;
+const L = (r) => r != null;
+var I;
 ((r) => {
   function n(e) {
     return e.map((p, t) => {
       let o;
-      return p.content && (o = p.content), p.children && (o = n(p.children)), /* @__PURE__ */ f.createElement(g, { ...p, children: o, key: p.id || t });
+      return p.content && (o = p.content), p.children && (o = n(p.children)), /* @__PURE__ */ i.createElement(g, { ...p, children: o, key: p.id || t });
     });
   }
   r.mapItemsToComponents = n;
-})(E || (E = {}));
-const K = (r, n) => r.length !== n.length ? !1 : r.every((e, p) => e === n[p]), L = (r, n, e, p, t) => {
+})(I || (I = {}));
+const N = (r, n) => r.length !== n.length ? !1 : r.every((e, p) => e === n[p]), O = (r, n, e, p, t) => {
   let o;
   if (t === d.First || t === d.Last)
     switch (t) {
@@ -111,8 +114,8 @@ const K = (r, n) => r.length !== n.length ? !1 : r.every((e, p) => e === n[p]),
         break;
     }
   else
-    r.forEach((i, s) => {
-      if (i.props.uniquePrivateKey === (e.uniquePrivateKey || p)) {
+    r.forEach((f, s) => {
+      if (f.props.uniquePrivateKey === (e.uniquePrivateKey || p)) {
         const c = s + n < 0 ? r.length - 1 : s + n > r.length - 1 ? 0 : s + n;
         o = r[c];
       }
@@ -120,14 +123,14 @@ const K = (r, n) => r.length !== n.length ? !1 : r.every((e, p) => e === n[p]),
   return o;
 };
 export {
-  E as PanelBarUtils,
-  k as flatChildren,
-  P as flatVisibleChildren,
-  C as flatVisibleItems,
-  $ as getFirstId,
-  L as getFocusedChild,
-  q as getInitialState,
-  K as isArrayEqual,
-  B as isPresent,
-  F as renderChildren
+  I as PanelBarUtils,
+  P as flatChildren,
+  A as flatVisibleChildren,
+  w as flatVisibleItems,
+  K as getFirstId,
+  O as getFocusedChild,
+  k as getInitialState,
+  N as isArrayEqual,
+  L as isPresent,
+  C as renderChildren
 };

package/splitter/SplitterBar.d.ts

@@ -40,6 +40,7 @@ export declare class SplitterBar extends React.Component<SplitterBarProps, Split
     constructor(props: SplitterBarProps);
     /** @hidden */
     componentDidMount(): void;
+    private get ariaValueNow();
     render(): React.JSX.Element;
     private onDrag;
     private onFocus;

package/splitter/SplitterBar.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"),g=require("@progress/kendo-react-common"),c=require("@progress/kendo-svg-icons");function f(p){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(o,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return o.default=p,Object.freeze(o)}const l=f(b);class d extends l.Component{constructor(o){super(o),this.draggable=null,this.spliterBarRef=l.createRef(),this.onDrag=(t,s,i)=>{const{event:r}=t,{onDrag:a,index:e}=this.props,h=this.draggable&&this.draggable.element;h&&!this.isStatic&&this.isDraggable&&a(r,h,e,s,i)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=t=>{const{onToggle:s,index:i,prev:r,next:a}=this.props;(r.collapsible||a.collapsible)&&s(r.collapsible?i:i+1,t)},this.onPrevToggle=t=>{const{onToggle:s,index:i,prev:r}=this.props;r.collapsible&&s(i,t)},this.onNextToggle=t=>{const{onToggle:s,index:i,next:r}=this.props;r.collapsible&&s(i+1,t)},this.onKeyDown=t=>{this.navigation.triggerKeyboardEvent(t)},this.state={focused:!1}}get isStatic(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsible||t.collapsible;return!s&&!i}get isDraggable(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsed||t.collapsed;return!!s&&!i}get isHorizontal(){return this.props.orientation==="horizontal"}componentDidMount(){const o=this.draggable&&this.draggable.element,{index:t,onKeyboardResize:s}=this.props,i=this.isHorizontal;o&&(this.navigation=new g.Navigation({tabIndex:0,root:this.spliterBarRef,selectors:[".k-splitter .k-splitbar"],keyboardEvents:{keydown:{ArrowLeft:(r,a,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},ArrowRight:(r,a,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowDown:(r,a,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowUp:(r,a,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},Enter:(r,a,e)=>{e.preventDefault(),this.onToggle(e)}}}}))}render(){const o=this.isDraggable,t=this.isStatic,s=this.isHorizontal;let i,r;if(this.props.prev.collapsible)if(s){const n=!!this.props.prev.collapsed!=!!this.props.isRtl;i=n?"chevron-right":"chevron-left",r=n?c.chevronRightIcon:c.chevronLeftIcon}else i=this.props.prev.collapsed?"chevron-down":"chevron-up",r=this.props.prev.collapsed?c.chevronDownIcon:c.chevronUpIcon;let a,e;if(this.props.next.collapsible)if(s){const n=!!this.props.next.collapsed==!!this.props.isRtl;a=n?"chevron-right":"chevron-left",e=n?c.chevronRightIcon:c.chevronLeftIcon}else a=this.props.next.collapsed?"chevron-up":"chevron-down",e=this.props.next.collapsed?c.chevronUpIcon:c.chevronDownIcon;const h=g.classNames("k-splitbar",{"k-focus":this.state.focused,"k-splitbar-horizontal":s,"k-splitbar-vertical":!s,"k-splitbar-draggable-horizontal":s&&o,"k-splitbar-draggable-vertical":!s&&o,"k-splitbar-static-horizontal":s&&t,"k-splitbar-static-vertical":!s&&t});return l.createElement(g.Draggable,{onPress:n=>this.onDrag(n,!0,!1),onDrag:n=>this.onDrag(n,!1,!1),onRelease:n=>this.onDrag(n,!1,!0),ref:n=>{this.draggable=n}},l.createElement("div",{ref:this.spliterBarRef,tabIndex:t?-1:0,role:"separator","aria-valuenow":0,"aria-label":this.props.ariaLabel,"aria-orientation":s?"vertical":void 0,"aria-keyshortcuts":"ArrowLeft ArrowRight ArrowUp ArrowDown",className:h,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&l.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},l.createElement(g.IconWrap,{name:i,icon:r,size:"xsmall"})),l.createElement("div",{className:"k-resize-handle"}),this.props.next.collapsible&&l.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},l.createElement(g.IconWrap,{name:a,icon:e,size:"xsmall"}))))}}exports.SplitterBar=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),h=require("@progress/kendo-react-common"),c=require("@progress/kendo-svg-icons");function f(p){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(o,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return o.default=p,Object.freeze(o)}const l=f(b);class d extends l.Component{constructor(o){super(o),this.draggable=null,this.spliterBarRef=l.createRef(),this.onDrag=(t,s,i)=>{const{event:r}=t,{onDrag:n,index:e}=this.props,g=this.draggable&&this.draggable.element;g&&!this.isStatic&&this.isDraggable&&n(r,g,e,s,i)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=t=>{const{onToggle:s,index:i,prev:r,next:n}=this.props;(r.collapsible||n.collapsible)&&s(r.collapsible?i:i+1,t)},this.onPrevToggle=t=>{const{onToggle:s,index:i,prev:r}=this.props;r.collapsible&&s(i,t)},this.onNextToggle=t=>{const{onToggle:s,index:i,next:r}=this.props;r.collapsible&&s(i+1,t)},this.onKeyDown=t=>{this.navigation.triggerKeyboardEvent(t)},this.state={focused:!1}}get isStatic(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsible||t.collapsible;return!s&&!i}get isDraggable(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsed||t.collapsed;return!!s&&!i}get isHorizontal(){return this.props.orientation==="horizontal"}componentDidMount(){const o=this.draggable&&this.draggable.element,{index:t,onKeyboardResize:s}=this.props,i=this.isHorizontal;o&&(this.navigation=new h.Navigation({tabIndex:0,root:this.spliterBarRef,selectors:[".k-splitter .k-splitbar"],keyboardEvents:{keydown:{ArrowLeft:(r,n,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},ArrowRight:(r,n,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowDown:(r,n,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowUp:(r,n,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},Enter:(r,n,e)=>{e.preventDefault(),this.onToggle(e)}}}}))}get ariaValueNow(){const{prev:o}=this.props;if(!this.isStatic&&o.size){const t=parseFloat(o.size);if(!isNaN(t))return t}}render(){const o=this.isDraggable,t=this.isStatic,s=this.isHorizontal;let i,r;if(this.props.prev.collapsible)if(s){const a=!!this.props.prev.collapsed!=!!this.props.isRtl;i=a?"chevron-right":"chevron-left",r=a?c.chevronRightIcon:c.chevronLeftIcon}else i=this.props.prev.collapsed?"chevron-down":"chevron-up",r=this.props.prev.collapsed?c.chevronDownIcon:c.chevronUpIcon;let n,e;if(this.props.next.collapsible)if(s){const a=!!this.props.next.collapsed==!!this.props.isRtl;n=a?"chevron-right":"chevron-left",e=a?c.chevronRightIcon:c.chevronLeftIcon}else n=this.props.next.collapsed?"chevron-up":"chevron-down",e=this.props.next.collapsed?c.chevronUpIcon:c.chevronDownIcon;const g=h.classNames("k-splitbar",{"k-focus":this.state.focused,"k-splitbar-horizontal":s,"k-splitbar-vertical":!s,"k-splitbar-draggable-horizontal":s&&o,"k-splitbar-draggable-vertical":!s&&o,"k-splitbar-static-horizontal":s&&t,"k-splitbar-static-vertical":!s&&t});return l.createElement(h.Draggable,{onPress:a=>this.onDrag(a,!0,!1),onDrag:a=>this.onDrag(a,!1,!1),onRelease:a=>this.onDrag(a,!1,!0),ref:a=>{this.draggable=a}},l.createElement("div",{ref:this.spliterBarRef,tabIndex:t?-1:0,role:"separator","aria-label":this.props.ariaLabel,"aria-valuenow":this.ariaValueNow,"aria-orientation":s?"vertical":void 0,"aria-keyshortcuts":"ArrowLeft ArrowRight ArrowUp ArrowDown",className:g,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&l.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},l.createElement(h.IconWrap,{name:i,icon:r,size:"xsmall"})),l.createElement("div",{className:"k-resize-handle","aria-hidden":"true"}),this.props.next.collapsible&&l.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},l.createElement(h.IconWrap,{name:n,icon:e,size:"xsmall"}))))}}exports.SplitterBar=d;

package/splitter/SplitterBar.mjs

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as n from "react";
-import { Navigation as d, classNames as m, Draggable as u, IconWrap as p } from "@progress/kendo-react-common";
+import { Navigation as d, classNames as u, Draggable as m, IconWrap as p } from "@progress/kendo-react-common";
 import { chevronDownIcon as h, chevronUpIcon as g, chevronRightIcon as b, chevronLeftIcon as f } from "@progress/kendo-svg-icons";
 class w extends n.Component {
   constructor(i) {
-    super(i), this.draggable = null, this.spliterBarRef = n.createRef(), this.onDrag = (s, t, o) => {
-      const { event: r } = s, { onDrag: l, index: e } = this.props, c = this.draggable && this.draggable.element;
-      c && !this.isStatic && this.isDraggable && l(r, c, e, t, o);
+    super(i), this.draggable = null, this.spliterBarRef = n.createRef(), this.onDrag = (t, s, o) => {
+      const { event: a } = t, { onDrag: l, index: e } = this.props, c = this.draggable && this.draggable.element;
+      c && !this.isStatic && this.isDraggable && l(a, c, e, s, o);
     }, this.onFocus = () => {
       this.setState({
         focused: !0
@@ -21,104 +21,112 @@ class w extends n.Component {
       this.setState({
         focused: !1
       });
-    }, this.onToggle = (s) => {
-      const { onToggle: t, index: o, prev: r, next: l } = this.props;
-      (r.collapsible || l.collapsible) && t(r.collapsible ? o : o + 1, s);
-    }, this.onPrevToggle = (s) => {
-      const { onToggle: t, index: o, prev: r } = this.props;
-      r.collapsible && t(o, s);
-    }, this.onNextToggle = (s) => {
-      const { onToggle: t, index: o, next: r } = this.props;
-      r.collapsible && t(o + 1, s);
-    }, this.onKeyDown = (s) => {
-      this.navigation.triggerKeyboardEvent(s);
+    }, this.onToggle = (t) => {
+      const { onToggle: s, index: o, prev: a, next: l } = this.props;
+      (a.collapsible || l.collapsible) && s(a.collapsible ? o : o + 1, t);
+    }, this.onPrevToggle = (t) => {
+      const { onToggle: s, index: o, prev: a } = this.props;
+      a.collapsible && s(o, t);
+    }, this.onNextToggle = (t) => {
+      const { onToggle: s, index: o, next: a } = this.props;
+      a.collapsible && s(o + 1, t);
+    }, this.onKeyDown = (t) => {
+      this.navigation.triggerKeyboardEvent(t);
     }, this.state = {
       focused: !1
     };
   }
   get isStatic() {
-    const { prev: i, next: s } = this.props, t = i.resizable && s.resizable, o = i.collapsible || s.collapsible;
-    return !t && !o;
+    const { prev: i, next: t } = this.props, s = i.resizable && t.resizable, o = i.collapsible || t.collapsible;
+    return !s && !o;
   }
   get isDraggable() {
-    const { prev: i, next: s } = this.props, t = i.resizable && s.resizable, o = i.collapsed || s.collapsed;
-    return !!t && !o;
+    const { prev: i, next: t } = this.props, s = i.resizable && t.resizable, o = i.collapsed || t.collapsed;
+    return !!s && !o;
   }
   get isHorizontal() {
     return this.props.orientation === "horizontal";
   }
   /** @hidden */
   componentDidMount() {
-    const i = this.draggable && this.draggable.element, { index: s, onKeyboardResize: t } = this.props, o = this.isHorizontal;
+    const i = this.draggable && this.draggable.element, { index: t, onKeyboardResize: s } = this.props, o = this.isHorizontal;
     i && (this.navigation = new d({
       tabIndex: 0,
       root: this.spliterBarRef,
       selectors: [".k-splitter .k-splitbar"],
       keyboardEvents: {
         keydown: {
-          ArrowLeft: (r, l, e) => {
-            o && (e.preventDefault(), this.isDraggable && t(i, s, -10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
+          ArrowLeft: (a, l, e) => {
+            o && (e.preventDefault(), this.isDraggable && s(i, t, -10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
           },
-          ArrowRight: (r, l, e) => {
-            o && (e.preventDefault(), this.isDraggable && t(i, s, 10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
+          ArrowRight: (a, l, e) => {
+            o && (e.preventDefault(), this.isDraggable && s(i, t, 10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
           },
-          ArrowDown: (r, l, e) => {
-            o || (e.preventDefault(), this.isDraggable && t(i, s, 10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
+          ArrowDown: (a, l, e) => {
+            o || (e.preventDefault(), this.isDraggable && s(i, t, 10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
           },
-          ArrowUp: (r, l, e) => {
-            o || (e.preventDefault(), this.isDraggable && t(i, s, -10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
+          ArrowUp: (a, l, e) => {
+            o || (e.preventDefault(), this.isDraggable && s(i, t, -10, e), (e.metaKey || e.ctrlKey) && (s(i, t, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
           },
-          Enter: (r, l, e) => {
+          Enter: (a, l, e) => {
             e.preventDefault(), this.onToggle(e);
           }
         }
       }
     }));
   }
+  get ariaValueNow() {
+    const { prev: i } = this.props;
+    if (!this.isStatic && i.size) {
+      const t = parseFloat(i.size);
+      if (!isNaN(t))
+        return t;
+    }
+  }
   render() {
-    const i = this.isDraggable, s = this.isStatic, t = this.isHorizontal;
-    let o, r;
+    const i = this.isDraggable, t = this.isStatic, s = this.isHorizontal;
+    let o, a;
     if (this.props.prev.collapsible)
-      if (t) {
-        const a = !!this.props.prev.collapsed != !!this.props.isRtl;
-        o = a ? "chevron-right" : "chevron-left", r = a ? b : f;
+      if (s) {
+        const r = !!this.props.prev.collapsed != !!this.props.isRtl;
+        o = r ? "chevron-right" : "chevron-left", a = r ? b : f;
       } else
-        o = this.props.prev.collapsed ? "chevron-down" : "chevron-up", r = this.props.prev.collapsed ? h : g;
+        o = this.props.prev.collapsed ? "chevron-down" : "chevron-up", a = this.props.prev.collapsed ? h : g;
     let l, e;
     if (this.props.next.collapsible)
-      if (t) {
-        const a = !!this.props.next.collapsed == !!this.props.isRtl;
-        l = a ? "chevron-right" : "chevron-left", e = a ? b : f;
+      if (s) {
+        const r = !!this.props.next.collapsed == !!this.props.isRtl;
+        l = r ? "chevron-right" : "chevron-left", e = r ? b : f;
       } else
         l = this.props.next.collapsed ? "chevron-up" : "chevron-down", e = this.props.next.collapsed ? g : h;
-    const c = m("k-splitbar", {
+    const c = u("k-splitbar", {
       "k-focus": this.state.focused,
-      "k-splitbar-horizontal": t,
-      "k-splitbar-vertical": !t,
-      "k-splitbar-draggable-horizontal": t && i,
-      "k-splitbar-draggable-vertical": !t && i,
-      "k-splitbar-static-horizontal": t && s,
-      "k-splitbar-static-vertical": !t && s
+      "k-splitbar-horizontal": s,
+      "k-splitbar-vertical": !s,
+      "k-splitbar-draggable-horizontal": s && i,
+      "k-splitbar-draggable-vertical": !s && i,
+      "k-splitbar-static-horizontal": s && t,
+      "k-splitbar-static-vertical": !s && t
     });
     return /* @__PURE__ */ n.createElement(
-      u,
+      m,
       {
-        onPress: (a) => this.onDrag(a, !0, !1),
-        onDrag: (a) => this.onDrag(a, !1, !1),
-        onRelease: (a) => this.onDrag(a, !1, !0),
-        ref: (a) => {
-          this.draggable = a;
+        onPress: (r) => this.onDrag(r, !0, !1),
+        onDrag: (r) => this.onDrag(r, !1, !1),
+        onRelease: (r) => this.onDrag(r, !1, !0),
+        ref: (r) => {
+          this.draggable = r;
         }
       },
       /* @__PURE__ */ n.createElement(
         "div",
         {
           ref: this.spliterBarRef,
-          tabIndex: s ? -1 : 0,
+          tabIndex: t ? -1 : 0,
           role: "separator",
-          "aria-valuenow": 0,
           "aria-label": this.props.ariaLabel,
-          "aria-orientation": t ? "vertical" : void 0,
+          "aria-valuenow": this.ariaValueNow,
+          "aria-orientation": s ? "vertical" : void 0,
           "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
           className: c,
           style: { touchAction: "none" },
@@ -127,8 +135,8 @@ class w extends n.Component {
           onDoubleClick: this.onToggle,
           onKeyDown: this.onKeyDown
         },
-        this.props.prev.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-prev", onClick: this.onPrevToggle }, /* @__PURE__ */ n.createElement(p, { name: o, icon: r, size: "xsmall" })),
-        /* @__PURE__ */ n.createElement("div", { className: "k-resize-handle" }),
+        this.props.prev.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-prev", onClick: this.onPrevToggle }, /* @__PURE__ */ n.createElement(p, { name: o, icon: a, size: "xsmall" })),
+        /* @__PURE__ */ n.createElement("div", { className: "k-resize-handle", "aria-hidden": "true" }),
         this.props.next.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-next", onClick: this.onNextToggle }, /* @__PURE__ */ n.createElement(p, { name: l, icon: e, size: "xsmall" }))
       )
     );

package/stepper/Step.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 ee=require("react"),n=require("prop-types"),te=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ne=require("@progress/kendo-react-intl"),j=require("@progress/kendo-svg-icons"),D=require("./contants.js"),L=require("./messages/index.js");function ae(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const m=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(p,i,m.get?m:{enumerable:!0,get:()=>s[i]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),y=e.forwardRef((s,p)=>{const{children:i,className:m,current:v,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:l,optional:k,style:T,tabIndex:oe=se.tabIndex,text:q,..._}=s,{animationDuration:I,isVertical:g,item:z,linear:P,mode:F,numOfSteps:r,value:d,onChange:N,onFocus:x,successIcon:V,errorIcon:w,successSVGIcon:H,errorSVGIcon:W}=e.useContext(te.StepperContext),f=e.useRef(null),R=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),E=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,E);const C=!P||a===d-1||a===d||a===d+1,S=F==="labels"||!!b&&!!l,$=ne.useLocalization(),B=(u=>$.toLanguageString(u,L.messages[u]))(L.optionalText),G=typeof I=="number"?I:I!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(u=>{N&&!o&&c.dispatchEvent(N,u,E(),{value:a})},[N,d,o]),K=e.useCallback(u=>{x&&!o&&c.dispatchEvent(x,u,E(),void 0)},[x,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<d,"k-step-current":v,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,d,v,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:g?void 0:`calc(100% / ${r})`,maxHeight:g?`calc(100% / ${r})`:void 0,pointerEvents:C?void 0:"none",...T}),[g,r,T,C]),A=t?V:w,h=A?e.createElement("span",{className:"k-step-indicator-icon "+A,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?H||j.checkIcon:W||j.exclamationCircleIcon}),X=e.createElement(e.Fragment,null,F!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:G+"ms"}},b||M?!S&&t!==void 0?h:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?h:e.createElement("span",{className:"k-step-indicator-text"},q||a+1)):null),Y=(l||S||k)&&e.createElement("span",{className:"k-step-label"},l&&e.createElement("span",{className:"k-step-text"},l),S&&t!==void 0&&h,k&&e.createElement("span",{className:"k-step-label-optional"},B)),Z=e.createElement(e.Fragment,null,X,Y);return e.createElement("li",{ref:f,className:J,style:Q,..._},e.createElement("a",{className:"k-step-link",title:l||void 0,onClick:U,onFocus:K,"aria-current":v?"step":void 0,"aria-disabled":o||!C||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?i:Z))});y.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const se={tabIndex:0};y.displayName="KendoStep";exports.Step=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react"),n=require("prop-types"),se=require("./context/StepperContext.js"),l=require("@progress/kendo-react-common"),oe=require("@progress/kendo-react-intl"),P=require("@progress/kendo-svg-icons"),V=require("./contants.js"),T=require("./messages/index.js");function ce(s){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const b=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(m,i,b.get?b:{enumerable:!0,get:()=>s[i]})}}return m.default=s,Object.freeze(m)}const e=ce(ae),q=e.forwardRef((s,m)=>{const{children:i,className:b,current:g,disabled:o,focused:A,icon:r,svgIcon:N,index:a,isValid:t,label:c,optional:k,style:F,tabIndex:ie=le.tabIndex,text:f,...$}=s,{animationDuration:x,isVertical:E,item:z,linear:w,mode:L,numOfSteps:d,value:u,onChange:C,onFocus:S,successIcon:H,errorIcon:W,successSVGIcon:B,errorSVGIcon:G}=e.useContext(se.StepperContext),v=e.useRef(null),R=e.useCallback(()=>{v.current&&l.focusFirstFocusableChild(v.current)},[]),y=e.useCallback(()=>({element:v.current,focus:R}),[R]);e.useImperativeHandle(m,y);const h=!w||a===u-1||a===u||a===u+1,O=L==="labels"||!!r&&!!c,U=oe.useLocalization(),j=p=>U.toLanguageString(p,T.messages[p]),K=j(T.optionalText),J=typeof x=="number"?x:x!==!1?V.DEFAULT_ANIMATION_DURATION:V.NO_ANIMATION,Q=e.useCallback(p=>{C&&!o&&l.dispatchEvent(C,p,y(),{value:a})},[C,u,o]),X=e.useCallback(p=>{S&&!o&&l.dispatchEvent(S,p,y(),void 0)},[S,o]),Y=e.useMemo(()=>l.classNames("k-step",{"k-step-first":a===0,"k-step-last":d&&a===d-1,"k-step-done":a<u,"k-step-current":g,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":A},b),[a,d,u,g,k,o,A,t,b]),Z=e.useMemo(()=>({maxWidth:E?void 0:`calc(100% / ${d})`,maxHeight:E?`calc(100% / ${d})`:void 0,pointerEvents:h?void 0:"none",...F}),[E,d,F,h]),D=t?H:W,M=D?e.createElement("span",{className:"k-step-indicator-icon "+D,"aria-hidden":"true"}):e.createElement(l.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?B||P.checkIcon:G||P.exclamationCircleIcon}),ee=e.createElement(e.Fragment,null,L!=="labels"?e.createElement("span",{className:"k-step-indicator",style:{transitionDuration:J+"ms"}},r||N?!O&&t!==void 0?M:e.createElement(l.IconWrap,{className:"k-step-indicator-icon",name:r&&l.toIconName(r),icon:N}):t!==void 0?M:e.createElement("span",{className:"k-step-indicator-text"},f||a+1)):null),te=(c||O||k)&&e.createElement("span",{className:"k-step-label"},c&&e.createElement("span",{className:"k-step-text"},c),O&&t!==void 0&&M,k&&e.createElement("span",{className:"k-step-label-optional"},K)),ne=e.createElement(e.Fragment,null,ee,te),_=j(T.stepAriaLabel);let I=c;return I||(f?I=`${_} ${f}`:(r||N)&&(I=_)),e.createElement("li",{ref:v,className:Y,style:Z,...$},e.createElement("a",{className:"k-step-link",title:c||void 0,onClick:Q,onFocus:X,"aria-current":g?"step":void 0,"aria-disabled":o||!h||void 0,"aria-invalid":t!==void 0&&!t||void 0,"aria-label":I},z?i:ne))});q.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const le={tabIndex:0};q.displayName="KendoStep";exports.Step=q;