@progress/kendo-react-layout 9.0.0-develop.2 → 9.0.0-develop.21

package/drawer/Drawer.mjs

@@ -30,16 +30,16 @@ const u = t.forwardRef((l, p) => {
     tabIndex: g,
     onOverlayClick: E,
     onSelect: s
-  } = l, a = t.useRef(null), N = t.useCallback(
-    () => {
-      a.current && a.current.focus();
-    },
-    []
+  } = l, a = t.useRef(null), N = t.useCallback(() => {
+    a.current && a.current.focus();
+  }, []);
+  t.useImperativeHandle(
+    p,
+    () => ({
+      element: a.current,
+      focus: N
+    })
   );
-  t.useImperativeHandle(p, () => ({
-    element: a.current,
-    focus: N
-  }));
   const C = t.useCallback(
     (P, R, d) => {
       if (i && s) {
@@ -82,18 +82,7 @@ const u = t.forwardRef((l, p) => {
         onSelect: C
       }
     },
-    /* @__PURE__ */ t.createElement(
-      "div",
-      {
-        className: D,
-        ref: a,
-        dir: c,
-        style: h,
-        tabIndex: g
-      },
-      i && /* @__PURE__ */ t.createElement(I, null),
-      w
-    )
+    /* @__PURE__ */ t.createElement("div", { className: D, ref: a, dir: c, style: h, tabIndex: g }, i && /* @__PURE__ */ t.createElement(I, null), w)
   );
 });
 u.propTypes = {

package/drawer/DrawerContent.mjs

@@ -11,9 +11,12 @@ import t from "prop-types";
 import { classNames as p } from "@progress/kendo-react-common";
 const s = e.forwardRef((n, a) => {
   const { children: o, className: c, style: l } = n, r = e.useRef(null);
-  e.useImperativeHandle(a, () => ({
-    element: r.current
-  }));
+  e.useImperativeHandle(
+    a,
+    () => ({
+      element: r.current
+    })
+  );
   const m = p(
     {
       "k-drawer-content": !0

package/drawer/DrawerItem.mjs

@@ -25,17 +25,17 @@ const d = e.forwardRef((s, u) => {
     tabIndex: x,
     children: k,
     ...g
-  } = s, { expanded: F, mini: H, item: N } = e.useContext(j), r = e.useRef(null), i = e.useCallback(
-    () => {
-      r.current && r.current.focus();
-    },
-    []
+  } = s, { expanded: F, mini: H, item: N } = e.useContext(j), r = e.useRef(null), i = e.useCallback(() => {
+    r.current && r.current.focus();
+  }, []);
+  e.useImperativeHandle(
+    u,
+    () => ({
+      element: r.current,
+      focus: i,
+      props: s
+    })
   );
-  e.useImperativeHandle(u, () => ({
-    element: r.current,
-    focus: i,
-    props: s
-  }));
   const w = v(
     "k-drawer-item",
     {

package/drawer/DrawerNavigation.mjs

@@ -12,141 +12,120 @@ import { DrawerContext as G } from "./context/DrawerContext.mjs";
 import { DrawerItem as J } from "./DrawerItem.mjs";
 import { validatePackage as Q, shouldShowValidationUI as Y, classNames as h, Navigation as Z, WatermarkOverlay as ee } from "@progress/kendo-react-common";
 import { packageMetadata as E } from "../package-metadata.mjs";
-const te = 240, ae = 50, re = { type: "slide", duration: 200 }, ne = { type: "slide", duration: 0 }, T = t.forwardRef((g, W) => {
-  const { children: x, className: A, style: p } = g;
-  Q(E);
-  const C = Y(E), {
-    animation: m,
-    expanded: d,
-    mode: c,
-    position: o,
-    onOverlayClick: O,
-    mini: s,
-    dir: v,
-    width: y,
-    miniWidth: w,
-    items: f,
-    item: M,
-    onSelect: P
-  } = t.useContext(G), i = t.useRef(null), _ = t.useCallback(
-    () => {
+const te = 240, ae = 50, re = { type: "slide", duration: 200 }, ne = { type: "slide", duration: 0 }, T = t.forwardRef(
+  (g, W) => {
+    const { children: x, className: A, style: p } = g;
+    Q(E);
+    const C = Y(E), {
+      animation: m,
+      expanded: d,
+      mode: c,
+      position: o,
+      onOverlayClick: O,
+      mini: s,
+      dir: v,
+      width: y,
+      miniWidth: w,
+      items: f,
+      item: M,
+      onSelect: P
+    } = t.useContext(G), i = t.useRef(null), _ = t.useCallback(() => {
       i.current && i.current.focus();
-    },
-    []
-  ), e = typeof m != "boolean" ? m : m === !1 ? ne : re, k = y || te, N = w || ae;
-  t.useImperativeHandle(W, () => ({
-    element: i.current,
-    focus: _
-  }));
-  const L = t.useMemo(
-    () => "k-drawer " + h(
-      {
-        "k-drawer-start": o === "start",
-        "k-drawer-end": o === "end"
-      },
-      A
-    ),
-    [o]
-  ), R = {
-    opacity: 1,
-    flexBasis: k,
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, U = {
-    opacity: 1,
-    transform: "translateX(0px)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, X = {
-    opacity: s ? 1 : 0,
-    flexBasis: s ? N : 0,
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, F = {
-    opacity: 0,
-    transform: "translateX(-100%)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, H = {
-    opacity: 0,
-    transform: "translateX(100%)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, b = {
-    transform: "translateX(0%)",
-    WebkitTransitionDuration: (e && e.duration) + "ms",
-    /* Safari */
-    transitionDuration: (e && e.duration) + "ms"
-  }, K = d ? c === "push" ? R : U : c === "push" ? X : v === "ltr" && o === "start" || v === "rtl" && o === "end" ? s ? b : F : s ? b : H, D = t.useMemo(
-    () => new Z({
-      root: i,
-      selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
-      keyboardEvents: {
-        keydown: {
-          ArrowDown: (a, r, n) => {
-            n.preventDefault(), r.focusNext(a);
-          },
-          ArrowUp: (a, r, n) => {
-            n.preventDefault(), r.focusPrevious(a);
-          },
-          Enter: (a, r, n) => {
-            n.preventDefault(), a.click();
+    }, []), e = typeof m != "boolean" ? m : m === !1 ? ne : re, k = y || te, N = w || ae;
+    t.useImperativeHandle(
+      W,
+      () => ({
+        element: i.current,
+        focus: _
+      })
+    );
+    const L = t.useMemo(
+      () => "k-drawer " + h(
+        {
+          "k-drawer-start": o === "start",
+          "k-drawer-end": o === "end"
+        },
+        A
+      ),
+      [o]
+    ), R = {
+      opacity: 1,
+      flexBasis: k,
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, U = {
+      opacity: 1,
+      transform: "translateX(0px)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, X = {
+      opacity: s ? 1 : 0,
+      flexBasis: s ? N : 0,
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, F = {
+      opacity: 0,
+      transform: "translateX(-100%)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, H = {
+      opacity: 0,
+      transform: "translateX(100%)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, b = {
+      transform: "translateX(0%)",
+      WebkitTransitionDuration: (e && e.duration) + "ms",
+      transitionDuration: (e && e.duration) + "ms"
+    }, K = d ? c === "push" ? R : U : c === "push" ? X : v === "ltr" && o === "start" || v === "rtl" && o === "end" ? s ? b : F : s ? b : H, D = t.useMemo(
+      () => new Z({
+        root: i,
+        selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
+        keyboardEvents: {
+          keydown: {
+            ArrowDown: (a, r, n) => {
+              n.preventDefault(), r.focusNext(a);
+            },
+            ArrowUp: (a, r, n) => {
+              n.preventDefault(), r.focusPrevious(a);
+            },
+            Enter: (a, r, n) => {
+              n.preventDefault(), a.click();
+            }
           }
-        }
-      },
-      tabIndex: 0,
-      rovingTabIndex: !0
-    }),
-    []
-  ), S = t.useCallback(
-    D.triggerKeyboardEvent.bind(D),
-    []
-  ), B = f && /* @__PURE__ */ t.createElement(
-    "ul",
-    {
-      className: "k-drawer-items",
-      role: "menubar",
-      "aria-orientation": "vertical",
-      onKeyDown: S
-    },
-    f.map(
-      (a, r) => {
-        const { className: n, level: u, ...j } = a, V = u != null ? u : 0, $ = h(
-          n,
-          s ? "" : `k-level-${V}`
-        ), q = {
-          index: r,
-          className: $,
-          ...j,
-          onSelect: P
-        }, z = M || J;
-        return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
-      }
-    )
-  ), I = /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      style: e ? { ...K, ...p } : p,
-      className: L,
-      ref: i
-    },
-    /* @__PURE__ */ t.createElement(
+        },
+        tabIndex: 0,
+        rovingTabIndex: !0
+      }),
+      []
+    ), S = t.useCallback(D.triggerKeyboardEvent.bind(D), []), B = f && /* @__PURE__ */ t.createElement("ul", { className: "k-drawer-items", role: "menubar", "aria-orientation": "vertical", onKeyDown: S }, f.map((a, r) => {
+      const { className: n, level: u, ...j } = a, V = u != null ? u : 0, $ = h(n, s ? "" : `k-level-${V}`), q = {
+        index: r,
+        className: $,
+        ...j,
+        onSelect: P
+      }, z = M || J;
+      return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
+    })), I = /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: "k-drawer-wrapper",
-        style: !d && s && c === "overlay" ? { width: N } : { width: k }
+        style: e ? { ...K, ...p } : p,
+        className: L,
+        ref: i
       },
-      B || x
-    ),
-    C && /* @__PURE__ */ t.createElement(ee, null)
-  );
-  return c === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, d && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: O }), I) : I;
-});
+      /* @__PURE__ */ t.createElement(
+        "div",
+        {
+          className: "k-drawer-wrapper",
+          style: !d && s && c === "overlay" ? { width: N } : { width: k }
+        },
+        B || x
+      ),
+      C && /* @__PURE__ */ t.createElement(ee, null)
+    );
+    return c === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, d && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: O }), I) : I;
+  }
+);
 T.propTypes = {
   children: l.any,
   className: l.string,

package/expansionpanel/ExpansionPanel.mjs

@@ -13,10 +13,7 @@ import { packageMetadata as P } from "../package-metadata.mjs";
 import { chevronDownIcon as A, chevronUpIcon as T } from "@progress/kendo-svg-icons";
 const I = e.forwardRef((n, y) => {
   w(P);
-  const i = e.useRef(null), [g, u] = e.useState(!1), r = e.useCallback(
-    () => ({ element: i.current }),
-    []
-  );
+  const i = e.useRef(null), [g, u] = e.useState(!1), r = e.useCallback(() => ({ element: i.current }), []);
   e.useImperativeHandle(y, r);
   const {
     expanded: t = !1,
@@ -30,12 +27,16 @@ const I = e.forwardRef((n, y) => {
     collapseSVGIcon: k
   } = n, N = e.useCallback(
     (l) => {
-      p(s, l, r(), { expanded: t });
+      p(s, l, r(), {
+        expanded: t
+      });
     },
     [s, t]
   ), h = e.useCallback(
     (l) => {
-      (l.keyCode === x.enter || l.keyCode === x.space) && (l.preventDefault(), p(s, l, r(), { expanded: t }));
+      (l.keyCode === x.enter || l.keyCode === x.space) && (l.preventDefault(), p(s, l, r(), {
+        expanded: t
+      }));
     },
     [s, t]
   ), C = e.useCallback(() => {
@@ -47,15 +48,11 @@ const I = e.forwardRef((n, y) => {
     "div",
     {
       ref: i,
-      className: v(
-        "k-expander",
-        n.className,
-        {
-          "k-expanded": t,
-          "k-focus": g && !o,
-          "k-disabled": o
-        }
-      ),
+      className: v("k-expander", n.className, {
+        "k-expanded": t,
+        "k-focus": g && !o,
+        "k-disabled": o
+      }),
       onFocus: B,
       onBlur: R,
       style: n.style,

package/expansionpanel/ExpansionPanelContent.mjs

@@ -8,15 +8,9 @@
 "use client";
 import { classNames as t } from "@progress/kendo-react-common";
 import * as a from "react";
-const r = a.forwardRef((e, n) => /* @__PURE__ */ a.createElement(
-  "div",
-  {
-    ref: n,
-    ...e,
-    className: t("k-expander-content-wrapper", e.className)
-  },
-  /* @__PURE__ */ a.createElement("div", { className: "k-expander-content" }, e.children)
-));
+const r = a.forwardRef(
+  (e, n) => /* @__PURE__ */ a.createElement("div", { ref: n, ...e, className: t("k-expander-content-wrapper", e.className) }, /* @__PURE__ */ a.createElement("div", { className: "k-expander-content" }, e.children))
+);
 r.displayName = "KendoReactExpansionPanelContent";
 export {
   r as ExpansionPanelContent

package/gridlayout/GridLayout.mjs

@@ -47,16 +47,7 @@ const c = i.forwardRef((t, g) => {
     gridTemplateRows: v,
     ...u
   };
-  return /* @__PURE__ */ i.createElement(
-    "div",
-    {
-      ref: r,
-      className: p,
-      style: w,
-      id: h || f
-    },
-    y
-  );
+  return /* @__PURE__ */ i.createElement("div", { ref: r, className: p, style: w, id: h || f }, y);
 }), o = {
   hAlign: "stretch",
   vAlign: "stretch",

package/gridlayout/GridLayoutItem.mjs

@@ -23,16 +23,7 @@ const s = e.forwardRef((n, i) => {
     gridArea: `${u || "auto"} / ${y || "auto"} / ${r ? "span " + r : "auto"} / ${o ? "span " + o : "auto"}`,
     ...m
   };
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      ref: a,
-      className: c,
-      style: g,
-      id: d || f
-    },
-    p
-  );
+  return /* @__PURE__ */ e.createElement("div", { ref: a, className: c, style: g, id: d || f }, p);
 });
 s.propTypes = {
   className: t.string,

package/index.d.mts

@@ -20,45 +20,7 @@ import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
  */
-export declare class ActionSheet extends React_2.Component<ActionSheetProps, ActionSheetState> {
-    /** @hidden */
-    static displayName: string;
-    /** @hidden */
-    static propTypes: {
-        items: PropTypes.Requireable<any[]>;
-        subTitle: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        navigatable: PropTypes.Requireable<boolean>;
-        navigatableElements: PropTypes.Requireable<any[]>;
-    };
-    /** @hidden */
-    static defaultProps: {
-        navigatable: boolean;
-        navigatableElements: never[];
-    };
-    private actionSheetRef;
-    private actionSheetTitleClass;
-    private ariaLabeledBy;
-    private navigation?;
-    private animationDuration;
-    private bottomPosition;
-    /** @hidden */
-    constructor(props: ActionSheetProps);
-    /** @hidden */
-    componentDidMount(): void;
-    /** @hidden */
-    componentDidUpdate(_prevProps: Readonly<ActionSheetProps>, prevState: Readonly<ActionSheetState>): void;
-    /** @hidden */
-    render(): JSX_2.Element;
-    private handleKeyDown;
-    private onTab;
-    private handleOverlayClick;
-    private handleItemClick;
-    private onEnter;
-    private onEscape;
-    private hideActionSheet;
-    private children;
-}
+export declare const ActionSheet: React_2.ForwardRefExoticComponent<ActionSheetProps & React_2.RefAttributes<ActionSheetHandle | null>>;
 
 /**
  * @hidden
@@ -89,11 +51,42 @@ export declare interface ActionSheetContentProps extends ActionSheetChildrenProp
     overflowHidden?: boolean;
 }
 
+/**
+ * The default props of the ActionSheet component.
+ */
+export declare const actionSheetDefaultProps: ActionSheetDefaultPropsType;
+
+/**
+ * The default props interface of the ActionSheet component.
+ */
+export declare type ActionSheetDefaultPropsType = {
+    /**
+     * Specifies if the ActionSheet can be navigatable with keyboard.
+     * Defaults to `true`.
+     *
+     * @default true
+     */
+    navigatable: boolean;
+    /**
+     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     *
+     * @default []
+     */
+    navigatableElements: string[];
+};
+
 /**
  * The KendoReact ActionSheetFooter component.
  */
 export declare const ActionSheetFooter: React_2.FunctionComponent<ActionSheetChildrenProps>;
 
+/**
+ * Represent the `ref` of the ActionSheet component.
+ */
+export declare interface ActionSheetHandle {
+    props: ActionSheetProps;
+}
+
 /**
  * The KendoReact ActionSheetHeader component.
  */
@@ -225,12 +218,16 @@ export declare interface ActionSheetProps {
     /**
      * Specifies if the ActionSheet can be navigatable with keyboard.
      * Defaults to `true`.
+     *
+     * @default true
      */
-    navigatable: boolean;
+    navigatable?: boolean;
     /**
      * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     *
+     * @default []
      */
-    navigatableElements: string[];
+    navigatableElements?: string[];
     /**
      * Controls the popup animation. By default, the open and close animations are disabled.
      */
@@ -3697,6 +3694,11 @@ export declare interface StepperProps {
      * * `vertical`
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Applicable for scenarios when keyboard is used for navigation. Indicates whether
+     * the selection will change upon focus change or it will require additional action
+     * (Enter or Space key press) in order to select the focused step. Defaults to `false`.
+     */
     selectOnFocus?: boolean;
     /**
      * Sets additional CSS styles to the Stepper.