@progress/kendo-react-layout 8.6.0-develop.1 → 9.0.0-develop.10

package/stepper/Stepper.mjs

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

package/tabstrip/TabStripContent.mjs

@@ -64,16 +64,7 @@ const l = class l extends n.Component {
           hidden: !o,
           "aria-labelledby": `${this.props.navItemId}-${r}`
         },
-        this.props.animation ? /* @__PURE__ */ n.createElement(
-          d,
-          {
-            key: `${r}-${o}`,
-            appear: !0,
-            enter: !0,
-            exit: !1
-          },
-          s.props.children
-        ) : s.props.children
+        this.props.animation ? /* @__PURE__ */ n.createElement(d, { key: `${r}-${o}`, appear: !0, enter: !0, exit: !1 }, s.props.children) : s.props.children
       );
     });
   }
@@ -100,10 +91,7 @@ const l = class l extends n.Component {
 };
 l.propTypes = {
   animation: i.bool,
-  children: i.oneOfType([
-    i.element,
-    i.arrayOf(i.element)
-  ]),
+  children: i.oneOfType([i.element, i.arrayOf(i.element)]),
   selected: i.number,
   style: i.object
 };

package/tabstrip/TabStripTab.mjs

@@ -19,15 +19,8 @@ const n = class n extends o.Component {
 n.propTypes = {
   disabled: e.bool,
   contentClassName: e.string,
-  children: e.oneOfType([
-    e.element,
-    e.node
-  ]),
-  title: e.oneOfType([
-    e.string,
-    e.element,
-    e.node
-  ])
+  children: e.oneOfType([e.element, e.node]),
+  title: e.oneOfType([e.string, e.element, e.node])
 };
 let t = n;
 export {

package/tilelayout/InternalTile.mjs

@@ -102,7 +102,11 @@ const m = 200, h = class h extends p.Component {
         ref: (s) => {
           this.draggable = s ? { element: s } : null;
         },
-        className: g("k-tilelayout-item k-card", { "k-cursor-grab": this.reorderable }, this.props.className),
+        className: g(
+          "k-tilelayout-item k-card",
+          { "k-cursor-grab": this.reorderable },
+          this.props.className
+        ),
         style: { height: "100%", ...n, ...this.props.style }
       },
       this.props.children,
@@ -116,29 +120,37 @@ const m = 200, h = class h extends p.Component {
         }
       )
     );
-    return /* @__PURE__ */ p.createElement("div", { ref: (s) => {
-      this.element = s;
-    }, style: n }, /* @__PURE__ */ p.createElement(
+    return /* @__PURE__ */ p.createElement(
       "div",
       {
         ref: (s) => {
-          this.hintElement = s;
+          this.element = s;
         },
-        style: { position: "absolute", ...i },
-        className: g("k-layout-item-hint", this.props.hintClassName)
-      }
-    ), /* @__PURE__ */ p.createElement(
-      y,
-      {
-        ref: (s) => {
-          this.draggable = s;
-        },
-        onDrag: this.props.reorderable ? this.handleDrag : void 0,
-        onRelease: this.props.reorderable ? this.handleRelease : void 0,
-        onPress: this.props.reorderable ? this.handlePress : void 0
+        style: n
       },
-      a
-    ));
+      /* @__PURE__ */ p.createElement(
+        "div",
+        {
+          ref: (s) => {
+            this.hintElement = s;
+          },
+          style: { position: "absolute", ...i },
+          className: g("k-layout-item-hint", this.props.hintClassName)
+        }
+      ),
+      /* @__PURE__ */ p.createElement(
+        y,
+        {
+          ref: (s) => {
+            this.draggable = s;
+          },
+          onDrag: this.props.reorderable ? this.handleDrag : void 0,
+          onRelease: this.props.reorderable ? this.handleRelease : void 0,
+          onPress: this.props.reorderable ? this.handlePress : void 0
+        },
+        a
+      )
+    );
   }
   /**
    * @hidden

package/tilelayout/ResizeHandlers.mjs

@@ -19,7 +19,13 @@ const r = (t) => /* @__PURE__ */ n.createElement(
       t.onResize(e.event, !0, t.d);
     }
   },
-  /* @__PURE__ */ n.createElement("div", { className: "k-resize-handle k-cursor-" + t.d + "-resize", style: { bottom: 0, right: 0, ...t.style } })
+  /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      className: "k-resize-handle k-cursor-" + t.d + "-resize",
+      style: { bottom: 0, right: 0, ...t.style }
+    }
+  )
 );
 class h extends n.Component {
   constructor() {

package/tilelayout/TileLayout.mjs

@@ -19,7 +19,11 @@ const O = {
   unset: "k-grid-flow-unset"
 }, h = class h extends n.Component {
   constructor(a) {
-    super(a), this._element = null, this.state = { positions: (this.props.items || []).map((i, o) => Object.assign({ order: o, rowSpan: 1, colSpan: 1 }, i.defaultPosition)) }, this.showLicenseWatermark = !1, this.focus = () => {
+    super(a), this._element = null, this.state = {
+      positions: (this.props.items || []).map(
+        (i, o) => Object.assign({ order: o, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
+      )
+    }, this.showLicenseWatermark = !1, this.focus = () => {
       this._element && this._element.focus();
     }, this.update = (i, o, s, l = 0, u = 0) => {
       if (o === 0 && s === 0 && !u && !l)
@@ -48,7 +52,9 @@ const O = {
     return a.positions ? {
       positions: a.positions.map((o, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, o))
     } : a.items && (!i.positions || a.items.length !== i.positions.length) ? {
-      positions: a.items.map((o, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, o.defaultPosition))
+      positions: a.items.map(
+        (o, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, o.defaultPosition)
+      )
     } : null;
   }
   render() {
@@ -78,24 +84,22 @@ const O = {
         className: N("k-tilelayout k-pos-relative", O[m], a),
         style: d,
         id: this.props.id,
-        children: c.map(
-          (e, p) => /* @__PURE__ */ n.createElement(n.Fragment, { key: this.props.dataItemKey ? E(this.props.dataItemKey)(e) : p }, /* @__PURE__ */ n.createElement(
-            x,
-            {
-              update: this.update,
-              defaultPosition: this.state.positions[p],
-              index: p,
-              resizable: e.resizable,
-              reorderable: e.reorderable,
-              style: e.style,
-              className: e.className,
-              hintClassName: e.hintClassName,
-              hintStyle: e.hintStyle,
-              ignoreDrag: this.props.ignoreDrag
-            },
-            e.item ? e.item : /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, n.isValidElement(e.header) ? e.header : /* @__PURE__ */ n.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
-          ), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(v, null))
-        )
+        children: c.map((e, p) => /* @__PURE__ */ n.createElement(n.Fragment, { key: this.props.dataItemKey ? E(this.props.dataItemKey)(e) : p }, /* @__PURE__ */ n.createElement(
+          x,
+          {
+            update: this.update,
+            defaultPosition: this.state.positions[p],
+            index: p,
+            resizable: e.resizable,
+            reorderable: e.reorderable,
+            style: e.style,
+            className: e.className,
+            hintClassName: e.hintClassName,
+            hintStyle: e.hintStyle,
+            ignoreDrag: this.props.ignoreDrag
+          },
+          e.item ? e.item : /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, n.isValidElement(e.header) ? e.header : /* @__PURE__ */ n.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
+        ), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(v, null)))
       }
     );
   }

package/timeline/TimelineCard.mjs

@@ -52,10 +52,7 @@ const x = (e) => {
     "div",
     {
       "data-testid": "k-timeline-card",
-      className: u(
-        "k-timeline-card",
-        { "k-collapsed": e.collapsible && r }
-      )
+      className: u("k-timeline-card", { "k-collapsed": e.collapsible && r })
     },
     /* @__PURE__ */ t.createElement(
       N,