@progress/kendo-react-layout 8.1.0-develop.9 → 8.1.0

package/stepper/Stepper.mjs

@@ -6,134 +6,152 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
-import r from "prop-types";
-import { StepperContext as ee } from "./context/StepperContext.mjs";
-import { validatePackage as te, focusFirstFocusableChild as se, useRtl as ae, dispatchEvent as P, Keys as u, classNames as A, svgIconPropType as F } from "@progress/kendo-react-common";
-import { Step as oe } from "./Step.mjs";
+import * as n from "react";
+import c from "prop-types";
+import { StepperContext as $ } from "./context/StepperContext.mjs";
+import { validatePackage as ee, focusFirstFocusableChild as te, useDir as oe, dispatchEvent as O, Navigation as se, classNames as P, svgIconPropType as A } from "@progress/kendo-react-common";
+import { Step as ne } from "./Step.mjs";
 import { ProgressBar as re } from "@progress/kendo-react-progressbars";
-import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as le } from "./contants.mjs";
-import { packageMetadata as ie } from "../package-metadata.mjs";
+import { DEFAULT_ANIMATION_DURATION as ie, NO_ANIMATION as le } from "./contants.mjs";
+import { packageMetadata as ae } from "../package-metadata.mjs";
 import { useLocalization as ce } from "@progress/kendo-react-intl";
-import { progBarAriaLabel as M, messages as ue } from "./messages/index.mjs";
-const E = a.forwardRef((k, V) => {
-  te(ie);
+import { progBarAriaLabel as T, messages as ue } from "./messages/index.mjs";
+const F = n.forwardRef((x, M) => {
+  ee(ae);
   const {
-    animationDuration: b,
+    animationDuration: v,
     children: L,
-    className: D,
-    disabled: m,
-    errorIcon: z,
-    errorSVGIcon: G,
-    item: N,
-    items: d,
-    linear: p,
+    className: C,
+    disabled: f,
+    errorIcon: V,
+    errorSVGIcon: z,
+    item: S,
+    items: m,
+    linear: g,
     mode: K,
-    orientation: y,
-    style: R,
-    successIcon: _,
-    successSVGIcon: B,
-    onChange: h,
-    onFocus: C
-  } = k, H = ce().toLanguageString(M, ue[M]), g = a.useRef(null), w = a.useCallback(
+    orientation: I,
+    style: N,
+    successIcon: G,
+    successSVGIcon: H,
+    value: u = 0,
+    onChange: k,
+    onFocus: y
+  } = x, U = ce().toLanguageString(T, ue[T]), p = n.useRef(null), w = n.useCallback(
     () => {
-      g.current && se(g.current);
+      p.current && te(p.current);
     },
     []
-  ), I = a.useCallback(
+  ), E = n.useCallback(
     () => ({
-      element: g.current,
+      element: p.current,
       focus: w
     }),
     [w]
   );
-  a.useImperativeHandle(V, I);
-  const l = k.value || O.value, [f, n] = a.useState(l), c = d ? d.length : 0, o = y === "vertical", S = ae(g, k.dir), U = typeof b == "number" ? b : b !== !1 ? ne : le;
-  a.useEffect(() => {
-    n(l);
-  }, [l]);
-  const v = a.useCallback(
-    (t, s) => {
-      const e = s === l - 1, i = s === l, $ = s === l + 1;
-      l !== s && h && !m && (!p || e || i || $) && (P(
-        h,
-        t,
-        I(),
-        { value: s }
-      ), n(s));
+  n.useImperativeHandle(M, E);
+  const [_, a] = n.useState(u), d = m ? m.length : 0, o = I === "vertical", h = oe(p, x.dir), B = typeof v == "number" ? v : v !== !1 ? ie : le;
+  n.useEffect(() => {
+    a(u);
+  }, [u]);
+  const D = n.useCallback(
+    (r, i) => {
+      const e = i === u - 1, t = i === u, l = i === u + 1;
+      u !== i && k && !f && (!g || e || t || l) && (O(
+        k,
+        r,
+        E(),
+        { value: i }
+      ), a(i));
     },
-    [l, p, h, m, n]
-  ), j = a.useCallback(
-    (t) => {
-      let s = t.value, e = t.syntheticEvent;
-      v(e, s);
+    [u, g, k, f, a]
+  ), j = n.useCallback(
+    (r) => {
+      let i = r.value, e = r.syntheticEvent;
+      D(e, i);
     },
-    [v]
-  ), q = a.useCallback(
-    (t) => {
-      C && !m && P(
-        C,
-        t.syntheticEvent,
-        I(),
+    [D]
+  ), q = n.useCallback(
+    (r) => {
+      y && !f && O(
+        y,
+        r.syntheticEvent,
+        E(),
         void 0
       );
     },
-    [C, m]
-  ), x = a.useCallback(
-    (t) => {
-      v(t, f);
-    },
-    [v, f]
-  ), J = a.useCallback(
-    (t) => {
-      const s = S === "rtl", e = f, i = d.length - 1;
-      switch (t.keyCode) {
-        case u.left:
-          t.preventDefault(), !s && e > 0 && n(e - 1), s && e < i && n(e + 1);
-          break;
-        case u.right:
-          t.preventDefault(), !s && e < i && n(e + 1), s && e > 0 && n(e - 1);
-          break;
-        case u.up:
-          t.preventDefault(), !s && e > 0 && n(e - 1), s && e > 0 && n(e - 1);
-          break;
-        case u.down:
-          t.preventDefault(), !s && e < i && n(e + 1), s && e < i && n(e + 1);
-          break;
-        case u.home:
-          t.preventDefault(), n(0);
-          break;
-        case u.end:
-          t.preventDefault(), n(i);
-          break;
-        case u.space:
-          t.preventDefault();
-          break;
-        case u.enter:
-          t.preventDefault(), d[e].disabled || x(t);
-          break;
-      }
+    [y, f]
+  ), b = n.useMemo(
+    () => {
+      const r = h === "rtl", i = m.length - 1;
+      return new se({
+        root: p,
+        selectors: ["ol.k-step-list li.k-step a.k-step-link"],
+        tabIndex: 0,
+        keyboardEvents: {
+          keydown: {
+            ArrowLeft: (e, t, l) => {
+              l.preventDefault();
+              const s = t.elements.indexOf(e);
+              !o && !r && s > 0 ? (t.focusPrevious(e), a(s - 1)) : !o && r && s < i && (t.focusNext(e), a(s + 1));
+            },
+            ArrowRight: (e, t, l) => {
+              l.preventDefault();
+              const s = t.elements.indexOf(e);
+              !o && !r && s < i ? (t.focusNext(e), a(s + 1)) : !o && r && s > 0 && (t.focusPrevious(e), a(s - 1));
+            },
+            ArrowUp: (e, t, l) => {
+              l.preventDefault();
+              const s = t.elements.indexOf(e);
+              o && !r && s > 0 ? (t.focusPrevious(e), a(s - 1)) : o && r && s > 0 && (t.focusPrevious(e), a(s + 1));
+            },
+            ArrowDown: (e, t, l) => {
+              l.preventDefault();
+              const s = t.elements.indexOf(e);
+              o && !r && s < i ? (t.focusNext(e), a(s + 1)) : o && r && s < i && (t.focusNext(e), a(s - 1));
+            },
+            Tab: (e, t, l) => {
+              l.preventDefault();
+              const s = t.elements.indexOf(e);
+              l.shiftKey ? !o && !r && s > 0 ? (t.focusPrevious(e), a(s - 1)) : !o && r && s < i && (t.focusNext(e), a(s + 1)) : !o && !r && s < i ? (t.focusNext(e), a(s + 1)) : !o && r && s > 0 && (t.focusPrevious(e), a(s - 1));
+            },
+            Home: (e, t, l) => {
+              l.preventDefault(), t.focusElement(t.first, e), a(0);
+            },
+            End: (e, t, l) => {
+              l.preventDefault(), t.focusElement(t.last, e), a(i);
+            },
+            Space: (e, t, l) => {
+              l.preventDefault(), e.children[0].click();
+            },
+            Enter: (e, t, l) => {
+              l.preventDefault(), e.children[0].click();
+            }
+          }
+        }
+      });
     },
-    [d, n, f, S, x]
-  ), Q = a.useMemo(
-    () => A(
+    [h, m.length, o, a]
+  );
+  n.useEffect(() => (b.initializeRovingTab(u), () => b.removeFocusListener()), []);
+  const J = n.useCallback(b.triggerKeyboardEvent.bind(b), []), Q = n.useMemo(
+    () => P(
       "k-stepper",
       {
-        "k-stepper-linear": p
+        "k-stepper-linear": g
       },
-      D
+      C
     ),
-    [p, D]
-  ), W = a.useMemo(
+    [g, C]
+  ), W = n.useMemo(
     () => ({
       display: "grid",
-      gridTemplateColumns: o ? void 0 : "repeat(" + c * 2 + ", 1fr)",
-      gridTemplateRows: o ? "repeat(" + c + ", 1fr)" : void 0,
-      ...R
+      gridTemplateColumns: o ? void 0 : "repeat(" + d * 2 + ", 1fr)",
+      gridTemplateRows: o ? "repeat(" + d + ", 1fr)" : void 0,
+      ...N
     }),
-    [o, c, R]
-  ), X = a.useMemo(
-    () => A(
+    [o, d, N]
+  ), X = n.useMemo(
+    () => P(
       "k-step-list",
       {
         "k-step-list-horizontal": !o,
@@ -141,7 +159,7 @@ const E = a.forwardRef((k, V) => {
       }
     ),
     [o]
-  ), Y = a.useMemo(
+  ), Y = n.useMemo(
     () => ({
       gridColumnStart: o ? void 0 : 1,
       gridColumnEnd: o ? void 0 : -1,
@@ -149,105 +167,103 @@ const E = a.forwardRef((k, V) => {
       gridRowEnd: o ? -1 : void 0
     }),
     [o]
-  ), Z = a.useMemo(
+  ), Z = n.useMemo(
     () => ({
       gridColumnStart: o ? void 0 : 2,
-      gridColumnEnd: o ? void 0 : c * 2,
+      gridColumnEnd: o ? void 0 : d * 2,
       gridRowStart: o ? 1 : void 0,
-      gridRowEnd: o ? c : void 0,
+      gridRowEnd: o ? d : void 0,
       top: o ? 17 : void 0
     }),
-    [o, c]
-  ), T = d && d.map((t, s) => {
+    [o, d]
+  ), R = m && m.map((r, i) => {
     const e = {
-      index: s,
-      disabled: m || t.disabled,
-      focused: s === f,
-      current: s === l,
-      ...t
-    }, i = N || oe;
-    return /* @__PURE__ */ a.createElement(i, { key: s, ...e });
+      index: i,
+      disabled: f || r.disabled,
+      focused: i === _,
+      current: i === u,
+      ...r
+    }, t = S || ne;
+    return /* @__PURE__ */ n.createElement(t, { key: i, ...e });
   });
-  return /* @__PURE__ */ a.createElement(
-    ee.Provider,
+  return /* @__PURE__ */ n.createElement(
+    $.Provider,
     {
       value: {
-        animationDuration: b,
+        animationDuration: v,
         isVertical: o,
-        item: N,
-        linear: p,
+        item: S,
+        linear: g,
         mode: K,
-        numOfSteps: c,
-        value: l,
-        successIcon: _,
-        successSVGIcon: B,
-        errorIcon: z,
-        errorSVGIcon: G,
+        numOfSteps: d,
+        value: u,
+        successIcon: G,
+        successSVGIcon: H,
+        errorIcon: V,
+        errorSVGIcon: z,
         onChange: j,
         onFocus: q
       }
     },
-    /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ n.createElement(
       "nav",
       {
         className: Q,
         style: W,
-        dir: S,
+        dir: h,
+        role: "navigation",
+        ref: p,
         onKeyDown: J
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ n.createElement(
         "ol",
         {
           className: X,
           style: Y
         },
-        T || L
+        R || L
       ),
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ n.createElement(
         re,
         {
           style: Z,
           labelPlacement: "start",
-          animation: { duration: U },
-          ariaLabel: H,
+          animation: { duration: B },
+          ariaLabel: U,
           "aria-hidden": !0,
-          max: c - 1,
+          max: d - 1,
           labelVisible: !1,
-          orientation: y,
-          reverse: y === "vertical",
-          value: l,
-          disabled: m,
+          orientation: I,
+          reverse: I === "vertical",
+          value: u,
+          disabled: f,
           tabIndex: -1
         }
       )
     )
   );
 });
-E.propTypes = {
-  animationDuration: r.oneOfType([r.bool, r.number]),
-  children: r.any,
-  className: r.string,
-  dir: r.string,
-  disabled: r.bool,
-  errorIcon: r.string,
-  errorSVGIcon: F,
-  item: r.any,
-  items: r.any,
-  linear: r.bool,
-  mode: r.oneOf(["steps", "labels"]),
-  orientation: r.oneOf(["horizontal", "vertical"]),
-  style: r.object,
-  successIcon: r.string,
-  successSVGIcon: F,
-  value: r.number.isRequired,
-  onChange: r.func,
-  onFocus: r.func
-};
-const O = {
-  value: 0
+F.propTypes = {
+  animationDuration: c.oneOfType([c.bool, c.number]),
+  children: c.any,
+  className: c.string,
+  dir: c.string,
+  disabled: c.bool,
+  errorIcon: c.string,
+  errorSVGIcon: A,
+  item: c.any,
+  items: c.any,
+  linear: c.bool,
+  mode: c.oneOf(["steps", "labels"]),
+  orientation: c.oneOf(["horizontal", "vertical"]),
+  style: c.object,
+  successIcon: c.string,
+  successSVGIcon: A,
+  value: c.number.isRequired,
+  onChange: c.func,
+  onFocus: c.func
 };
-E.defaultProps = O;
-E.displayName = "KendoStepper";
+F.displayName = "KendoStepper";
 export {
-  E as Stepper
+  F as Stepper
 };

package/tabstrip/TabStrip.js

@@ -5,4 +5,4 @@
  * 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 u=require("react"),o=require("prop-types"),p=require("./TabStripNavigation.js"),y=require("./TabStripContent.js"),n=require("@progress/kendo-react-common"),b=require("../package-metadata.js");function f(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>c[e]})}}return s.default=c,Object.freeze(s)}const a=f(u),h=class h extends a.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.keyBinding={[n.Keys.left]:()=>this.prevNavigatableTab(),[n.Keys.right]:()=>this.nextNavigatableTab(),[n.Keys.down]:()=>this.nextNavigatableTab(),[n.Keys.up]:()=>this.prevNavigatableTab(),[n.Keys.home]:()=>0,[n.Keys.end]:()=>a.Children.count(this.props.children)-1},this.onSelect=e=>{this.props.selected!==e&&this.props.onSelect&&this.props.onSelect({selected:e})},this.onKeyDown=e=>{let t;switch(e.keyCode){case n.Keys.left:t=this.keyBinding[this.invertKeys(n.Keys.left,n.Keys.right)];break;case n.Keys.right:t=this.keyBinding[this.invertKeys(n.Keys.right,n.Keys.left)];break;case n.Keys.up:t=this.keyBinding[n.Keys.up];break;case n.Keys.down:t=this.keyBinding[n.Keys.down];break;case n.Keys.home:t=this.keyBinding[n.Keys.home];break;case n.Keys.end:t=this.keyBinding[n.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},this.renderContent=e=>{const{selected:t,children:i,tabContentStyle:r}=e,l=a.Children.count(i);return t<l&&t>-1?a.createElement(y.TabStripContent,{index:t,...e,style:r}):null},this.firstNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let i=0;i<t;i++)if(!e[i].props.disabled)return i}},this.lastNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let i=t-1;i>0;i--)if(!e[i].props.disabled)return i}},this.prevNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,i=t?t-1:-1;if(i<0)return this.lastNavigatableTab();if(e)for(let r=i;r>-1;r--){if(!e[r].props.disabled)return r;if(r===0)return this.lastNavigatableTab()}},this.nextNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,i=t?t+1:1,r=a.Children.count(e);if(i>=r)return this.firstNavigatableTab();if(e)for(let l=i;l<r;l++){if(!e[l].props.disabled)return l;if(l+1===r)return this.firstNavigatableTab()}},n.validatePackage(b.packageMetadata),this.showLicenseWatermark=n.shouldShowValidationUI(b.packageMetadata)}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}render(){const s={...this.props,children:this.children(),contentPanelId:this.contentPanelId,renderAllContent:this.props.renderAllContent,navItemId:this.navItemId,onKeyDown:this.onKeyDown,onSelect:this.onSelect},{tabPosition:e,tabIndex:t=0}=s,i=e==="bottom",r=n.classNames("k-tabstrip k-pos-relative",{"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top","k-tabstrip-scrollable":this.props.scrollable},this.props.className);return a.createElement("div",{id:this.props.id,ref:l=>this._element=l,dir:this.props.dir,className:r,style:this.props.style},!i&&a.createElement(p.TabStripNavigation,{...s,tabIndex:t}),this.renderContent(s),i&&a.createElement(p.TabStripNavigation,{...s,tabIndex:t}),this.showLicenseWatermark&&a.createElement(n.WatermarkOverlay,null))}invertKeys(s,e){return this._element&&getComputedStyle(this._element).direction==="rtl"||!1?e:s}children(){return a.Children.toArray(this.props.children).filter(s=>s)}};h.propTypes={animation:o.bool,children:o.node,onSelect:o.func,selected:o.number,style:o.object,tabContentStyle:o.object,tabPosition:o.string,tabIndex:o.number,className:o.string,dir:o.string},h.defaultProps={animation:!0,tabPosition:"top",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,renderAllContent:!1};let d=h;exports.TabStrip=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),a=require("prop-types"),f=require("./TabStripNavigation.js"),S=require("./TabStripContent.js"),p=require("@progress/kendo-react-common"),m=require("../package-metadata.js");function y(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const t in d)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(d,t);Object.defineProperty(o,t,s.get?s:{enumerable:!0,get:()=>d[t]})}}return o.default=d,Object.freeze(o)}const l=y(g),h=class h extends l.Component{constructor(o){super(o),this.tabStripRef=l.createRef(),this.showLicenseWatermark=!1,this.onSelect=t=>{this.props.selected!==t&&this.props.onSelect&&this.props.onSelect({selected:t})},this.onKeyDown=t=>{this.navigation.triggerKeyboardEvent(t)},this.onKeyboardSelect=t=>{const s=this.children();s&&s[t].props.disabled||this.onSelect(t)},this.renderContent=t=>{const{selected:s,children:n,tabContentStyle:e}=t,i=l.Children.count(n);return s<i&&s>-1?l.createElement(S.TabStripContent,{index:s,...t,style:e}):null},p.validatePackage(m.packageMetadata),this.showLicenseWatermark=p.shouldShowValidationUI(m.packageMetadata)}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}componentDidMount(){var s;const o=this.tabStripRef.current,t=o&&getComputedStyle(o).direction==="rtl"||!1;o&&(this.navigation=new p.Navigation({tabIndex:0,root:this.tabStripRef,rovingTabIndex:!0,focusClass:"k-focus",selectors:[".k-tabstrip .k-tabstrip-item"],keyboardEvents:{keydown:{ArrowLeft:(n,e,i)=>{i.preventDefault();const r=e.elements.indexOf(n),c=r!==0?r-1:e.elements.length-1,u=r!==e.elements.length-1?r+1:0;t?(e.focusNext(n),this.onKeyboardSelect(u)):(e.focusPrevious(n),this.onKeyboardSelect(c))},ArrowRight:(n,e,i)=>{i.preventDefault();const r=e.elements.indexOf(n),c=r!==0?r-1:e.elements.length-1,u=r!==e.elements.length-1?r+1:0;t?(e.focusPrevious(n),this.onKeyboardSelect(c)):(e.focusNext(n),this.onKeyboardSelect(u))},ArrowDown:(n,e,i)=>{i.preventDefault();const r=e.elements.indexOf(n),c=r!==e.elements.length-1?r+1:0;e.focusNext(n),this.onKeyboardSelect(c)},ArrowUp:(n,e,i)=>{i.preventDefault();const r=e.elements.indexOf(n),c=r!==0?r-1:e.elements.length-1;e.focusPrevious(n),this.onKeyboardSelect(c)},Home:(n,e,i)=>{i.preventDefault(),e.focusElement(e.first,n),this.onKeyboardSelect(0)},End:(n,e,i)=>{i.preventDefault(),e.focusElement(e.last,n),this.onKeyboardSelect(e.elements.length-1)}}}}),(s=this.navigation)==null||s.initializeRovingTab(this.props.selected))}componentWillUnmount(){var o;(o=this.navigation)==null||o.removeFocusListener()}render(){const o={...this.props,children:this.children(),contentPanelId:this.contentPanelId,renderAllContent:this.props.renderAllContent,navItemId:this.navItemId,onKeyDown:this.onKeyDown,onSelect:this.onSelect},{tabPosition:t,tabIndex:s}=o,n=t==="bottom",e=p.classNames("k-tabstrip k-pos-relative",{"k-tabstrip-left":t==="left","k-tabstrip-right":t==="right","k-tabstrip-bottom":t==="bottom","k-tabstrip-top":t==="top","k-tabstrip-scrollable":this.props.scrollable},this.props.className);return l.createElement("div",{id:this.props.id,ref:this.tabStripRef,dir:this.props.dir,className:e,style:this.props.style},!n&&l.createElement(f.TabStripNavigation,{...o,tabIndex:s}),this.renderContent(o),n&&l.createElement(f.TabStripNavigation,{...o,tabIndex:s}),this.showLicenseWatermark&&l.createElement(p.WatermarkOverlay,null))}children(){return l.Children.toArray(this.props.children).filter(o=>o)}};h.propTypes={animation:a.bool,children:a.node,onSelect:a.func,selected:a.number,style:a.object,tabContentStyle:a.object,tabPosition:a.string,tabIndex:a.number,className:a.string,dir:a.string},h.defaultProps={animation:!0,tabPosition:"top",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,renderAllContent:!1};let b=h;exports.TabStrip=b;