@progress/kendo-react-buttons 13.3.0 → 13.4.0-develop.1

package/FloatingActionButton/FloatingActionButton.mjs

@@ -7,33 +7,33 @@
  */
 import * as t from "react";
 import o from "prop-types";
-import { useZIndexContext as ye, useId as Y, useDir as Ie, dispatchEvent as b, getActiveElement as ve, Keys as c, classNames as N, kendoThemeMaps as Ee, ZIndexContext as xe, getTabIndex as De, svgIconPropType as Ne, IconWrap as we } from "@progress/kendo-react-common";
+import { useZIndexContext as ye, useId as Y, useDir as ve, dispatchEvent as b, getActiveElement as Ie, Keys as c, classNames as w, kendoThemeMaps as Ee, ZIndexContext as xe, getTabIndex as De, IconWrap as Ne, svgIconPropType as we } from "@progress/kendo-react-common";
 import { FloatingActionButtonItem as Re } from "./FloatingActionButtonItem.mjs";
-import { position as Ae, getTextDirectionClass as Fe, getAnchorAlign as Oe, getPopupAlign as ze } from "./utils.mjs";
+import { position as Ae, getTextDirectionClass as Fe, getPopupAlign as Oe, getAnchorAlign as ze } from "./utils.mjs";
 import { Popup as Te } from "@progress/kendo-react-popup";
 const Be = 2, Me = 100, ee = t.forwardRef(
   (P, te) => {
     const {
-      align: u = h.align,
+      align: d = h.align,
       alignOffset: $,
       className: K,
-      disabled: d,
-      icon: w,
-      svgIcon: R,
+      disabled: u,
+      icon: R,
+      svgIcon: A,
       iconClass: S,
       id: W,
-      items: n,
+      items: s,
       item: oe,
       text: C,
-      positionMode: A = h.positionMode,
+      positionMode: F = h.positionMode,
       size: y = h.size,
       style: ae,
-      rounded: I = h.rounded,
-      themeColor: F = h.themeColor,
-      overlayStyle: ne,
-      tabIndex: se,
+      rounded: v = h.rounded,
+      themeColor: I = h.themeColor,
+      overlayStyle: se,
+      tabIndex: ne,
       accessKey: le,
-      popupSettings: v = {},
+      popupSettings: E = {},
       modal: ie,
       onClick: O,
       onItemClick: Z,
@@ -43,7 +43,7 @@ const Be = 2, Me = 100, ee = t.forwardRef(
       onOpen: H,
       onClose: j,
       ...re
-    } = P, L = ye(), X = L ? L + Be : Me, U = t.useRef(null), l = t.useRef(null), ce = t.useRef(null), ue = t.useRef(null), G = t.useCallback(() => {
+    } = P, L = ye(), X = L ? L + Be : Me, U = t.useRef(null), l = t.useRef(null), ce = t.useRef(null), de = t.useRef(null), G = t.useCallback(() => {
       l.current && l.current.focus();
     }, []), f = t.useCallback(
       () => ({
@@ -56,95 +56,95 @@ const Be = 2, Me = 100, ee = t.forwardRef(
       te,
       () => U.current
     );
-    const [i, r] = t.useState(!1), [E, p] = t.useState(!1), [g, s] = t.useState(-1), de = Y() + "-button-id", T = Ie(l, P.dir), k = T === "rtl", x = Y() + "-list-id";
+    const [i, r] = t.useState(!1), [x, p] = t.useState(!1), [g, n] = t.useState(-1), ue = Y() + "-button-id", T = ve(l, P.dir), k = T === "rtl", D = Y() + "-list-id";
     t.useEffect(() => {
-      Ae(l, u, $, k);
-    }, [l, u, $, k]), t.useEffect(() => {
-      E && l && l.current && l.current.focus();
-    }, [E, l]);
+      Ae(l, d, $, k);
+    }, [l, d, $, k]), t.useEffect(() => {
+      x && l && l.current && l.current.focus();
+    }, [x, l]);
     const m = t.useCallback(
       (e, a) => {
-        n && b(a ? H : j, e, f(), void 0);
+        s && b(a ? H : j, e, f(), void 0);
       },
-      [H, j, n]
+      [H, j, s]
     ), J = t.useCallback(
       (e) => {
-        !e.target || d || (!n && O ? b(
+        !e.target || u || (!s && O ? b(
           O,
           e,
           f(),
           void 0
-        ) : (r(!i), p(!0), s(i ? -1 : 0), m(e, !i)));
+        ) : (r(!i), p(!0), n(i ? -1 : 0), m(e, !i)));
       },
-      [r, p, s, O, m, i, n, d]
+      [r, p, n, O, m, i, s, u]
     ), fe = t.useCallback(
       (e) => {
-        p(!0), s(i ? 0 : -1), z && b(
+        p(!0), n(i ? 0 : -1), z && b(
           z,
           e,
           f(),
           void 0
         );
       },
-      [z, p, s]
+      [z, p, n]
     ), pe = t.useCallback(
       (e) => {
-        p(!1), r(!1), s(-1), b(
+        p(!1), r(!1), n(-1), b(
           q,
           e,
           f(),
           void 0
         ), i && m(e, !1);
       },
-      [q, p, r, s, m]
+      [q, p, r, n, m]
     ), me = t.useCallback((e) => {
       e.preventDefault();
     }, []), B = t.useCallback(
       (e, a) => {
-        n && (n[a].disabled || b(Z, e, f(), {
-          itemProps: n[a],
+        s && (s[a].disabled || b(Z, e, f(), {
+          itemProps: s[a],
           itemIndex: a
         }));
       },
       [Z]
     ), be = t.useCallback(
       (e, a) => {
-        !e.target || !n || (s(a), r(!1), B(e, a), m(e, !1));
+        !e.target || !s || (n(a), r(!1), B(e, a), m(e, !1));
       },
-      [s, r, B, m]
+      [n, r, B, m]
     ), ge = t.useCallback(
       (e) => {
-        ve(document) === l.current && e.preventDefault();
+        Ie(document) === l.current && e.preventDefault();
       },
       [l]
     ), ke = t.useCallback(
       (e) => {
-        const a = g, M = n ? n.length : -1;
+        const a = g, M = s ? s.length : -1;
         if (e.altKey) {
-          !i && e.keyCode === c.down && (e.preventDefault(), r(!0), s(0)), i && e.keyCode === c.up && (e.preventDefault(), r(!1), s(-1));
+          !i && e.keyCode === c.down && (e.preventDefault(), r(!0), n(0)), i && e.keyCode === c.up && (e.preventDefault(), r(!1), n(-1));
           return;
         }
         switch (e.keyCode) {
           case c.enter:
           case c.space:
-            a >= 0 && B(e, a), n || J(e), e.preventDefault(), r(!i), s(i ? -1 : 0);
+            a >= 0 && B(e, a), s || J(e), e.preventDefault(), r(!i), n(i ? -1 : 0);
             break;
           case c.esc:
-            e.preventDefault(), r(!1), s(-1);
+            e.preventDefault(), r(!1), n(-1);
             break;
           case c.home:
-            e.preventDefault(), s(0);
+            e.preventDefault(), n(0);
             break;
           case c.end:
-            e.preventDefault(), s(M - 1);
+            e.preventDefault(), n(M - 1);
             break;
           case c.down:
           case c.right:
-            e.preventDefault(), s(a + 1 >= M ? 0 : a + 1);
+            e.preventDefault(), n(a + 1 >= M ? 0 : a + 1);
             break;
           case c.up:
           case c.left:
-            e.preventDefault(), s(a - 1 < 0 ? M - 1 : a - 1);
+            e.preventDefault(), n(a - 1 < 0 ? M - 1 : a - 1);
             break;
         }
         b(
@@ -154,59 +154,60 @@ const Be = 2, Me = 100, ee = t.forwardRef(
           void 0
         );
       },
-      [_, g, s, k, r]
+      [_, g, n, k, r]
     ), he = t.useMemo(
-      () => N(
-        "k-fab k-fab-solid",
+      () => w(
+        "k-fab",
         {
           "k-fab-sm": y === "small",
           "k-fab-md": y === "medium",
           "k-fab-lg": y === "large",
-          "k-disabled": d,
-          "k-pos-absolute": A === "absolute",
-          "k-pos-fixed": A === "fixed",
-          "k-focus": E,
-          [`k-rounded-${Ee.roundedMap[I] || I}`]: I,
-          [`k-fab-solid-${F}`]: F
+          "k-disabled": u,
+          "k-pos-absolute": F === "absolute",
+          "k-pos-fixed": F === "fixed",
+          "k-focus": x,
+          [`k-rounded-${Ee.roundedMap[v] || v}`]: v,
+          "k-fab-solid": I,
+          [`k-fab-solid-${I}`]: I
         },
-        `k-${u.vertical}-${u.horizontal}`,
+        `k-${d.vertical}-${d.horizontal}`,
         K
       ),
-      [F, y, I, d, A, u, E, K]
-    ), Ce = n && n.map((e, a) => /* @__PURE__ */ t.createElement(
+      [I, y, v, u, F, d, x, K]
+    ), Ce = s && s.map((e, a) => /* @__PURE__ */ t.createElement(
       Re,
       {
         ...e,
         key: a,
         index: a,
-        id: `${x}-${a}`,
-        disabled: d || e.disabled,
+        id: `${D}-${a}`,
+        disabled: u || e.disabled,
         focused: g === a,
         dataItem: e,
         item: oe,
-        className: N(e.className, Fe(T || "ltr", u.horizontal)),
+        className: w(e.className, Fe(T || "ltr", d.horizontal)),
         onClick: be,
         onDown: ge
       }
-    )), Q = !!((w || R) && !C), V = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
-    let D;
-    return w || R ? D = /* @__PURE__ */ t.createElement(we, { className: "k-fab-icon", name: w, icon: R }) : S ? D = /* @__PURE__ */ t.createElement("span", { role: "presentation", className: S }) : D = null, /* @__PURE__ */ t.createElement(xe.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    )), Q = !!((R || A) && !C), V = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
+    let N;
+    return R || A ? N = /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: R, icon: A }) : S ? N = /* @__PURE__ */ t.createElement("span", { role: "presentation", className: S }) : N = null, /* @__PURE__ */ t.createElement(xe.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
       "button",
       {
         ref: l,
-        id: W || de,
+        id: W || ue,
         role: "button",
         type: "button",
-        "aria-disabled": d,
-        "aria-expanded": n ? i : void 0,
-        "aria-haspopup": !!n,
+        "aria-disabled": u,
+        "aria-expanded": s ? i : void 0,
+        "aria-haspopup": !!s,
         "aria-label": `${C || ""} floatingactionbutton`,
-        "aria-owns": n ? x : void 0,
-        "aria-activedescendant": g >= 0 && n ? `${x}-${g}` : void 0,
-        tabIndex: De(se, d),
+        "aria-owns": s ? D : void 0,
+        "aria-activedescendant": g >= 0 && s ? `${D}-${g}` : void 0,
+        tabIndex: De(ne, u),
         accessKey: le,
         dir: T,
-        disabled: d,
+        disabled: u,
         className: he,
         style: ae,
         onClick: J,
@@ -216,7 +217,7 @@ const Be = 2, Me = 100, ee = t.forwardRef(
         onKeyDown: ke,
         ...re
       },
-      D,
+      N,
       C && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, C)
     ), ie && i && /* @__PURE__ */ t.createElement(
       "div",
@@ -224,19 +225,19 @@ const Be = 2, Me = 100, ee = t.forwardRef(
         className: "k-overlay",
         style: {
           zIndex: X,
-          ...ne
+          ...se
         }
       }
     ), /* @__PURE__ */ t.createElement(
       Te,
       {
-        ref: ue,
+        ref: de,
         anchor: l.current,
         show: i,
-        animate: v.animate,
-        popupClass: N("k-popup-transparent k-fab-popup", v.popupClass),
-        anchorAlign: v.anchorAlign || Oe(u, k),
-        popupAlign: v.popupAlign || ze(u, k),
+        animate: E.animate,
+        popupClass: w("k-popup-transparent k-fab-popup", E.popupClass),
+        anchorAlign: E.anchorAlign || ze(d, k),
+        popupAlign: E.popupAlign || Oe(d, k),
         style: { boxShadow: "none" }
       },
       /* @__PURE__ */ t.createElement(
@@ -245,10 +246,10 @@ const Be = 2, Me = 100, ee = t.forwardRef(
           ref: ce,
           role: "menu",
           "aria-labelledby": W,
-          id: x,
-          className: N("k-fab-items", {
-            "k-fab-items-bottom": u.vertical !== "bottom",
-            "k-fab-items-top": u.vertical === "bottom"
+          id: D,
+          className: w("k-fab-items", {
+            "k-fab-items-bottom": d.vertical !== "bottom",
+            "k-fab-items-top": d.vertical === "bottom"
           }),
           style: {
             paddingLeft: Q ? V : void 0,
@@ -269,7 +270,7 @@ ee.propTypes = {
   accessKey: o.string,
   disabled: o.bool,
   icon: o.string,
-  svgIcon: Ne,
+  svgIcon: we,
   iconClass: o.string,
   text: o.string,
   alignOffset: o.shape({
@@ -281,10 +282,9 @@ ee.propTypes = {
     horizontal: o.oneOf(["start", "center", "end"]).isRequired
   }),
   positionMode: o.oneOf(["absolute", "fixed"]),
-  size: o.oneOf([null, "small", "medium", "large"]),
-  rounded: o.oneOf([null, "small", "medium", "large", "full"]),
+  size: o.oneOf(["small", "medium", "large"]),
+  rounded: o.oneOf(["small", "medium", "large", "full"]),
   themeColor: o.oneOf([
-    null,
     "primary",
     "secondary",
     "tertiary",
@@ -301,9 +301,9 @@ ee.propTypes = {
 };
 const h = {
   align: { vertical: "bottom", horizontal: "end" },
-  size: "medium",
-  rounded: "full",
-  themeColor: "primary",
+  size: void 0,
+  rounded: void 0,
+  themeColor: void 0,
   positionMode: "fixed"
 };
 ee.displayName = "KendoFloatingActionButton";

package/FloatingActionButton/FloatingActionButtonItem.d.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * The FloatingActionButtonItemHandle ref.
+ */
+export interface FloatingActionButtonItemHandle {
+    /**
+     * The FloatingActionButtonItemHandle element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the FloatingActionButtonItem.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the props of the [KendoReact FloatingActionButtonItem component](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton).
+ */
+export interface FloatingActionButtonItemProps {
+    /**
+     * Sets additional CSS styles to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem style={{ margin: '10px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem className="custom-item" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Represents the children that are passed to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem>Custom Content</FloatingActionButtonItem>
+     * ```
+     */
+    children?: any;
+    /**
+     * Specifies if the Floating Action Button Item is disabled [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/disabled-item).
+     *
+     * @default false
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the index of the Floating Action Button Item that you use to identify it.
+     */
+    index?: number;
+    /**
+     * Defines the icon that renders in the FloatingActionButtonItem
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/data-binding).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon that renders in the FloatingActionButtonItem.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies the text of the FloatingActionButtonItem
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/data-binding).
+     */
+    text?: string;
+    /**
+     * Sets the `tabIndex` property of the FloatingActionButtonItem.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the FloatingActionButtonItem props that are
+     * returned from the `onItemClick` FloatingActionButton event
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/customization#toc-items-rendering).
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    onDown?: (event: any) => void;
+    /**
+     * @hidden
+     */
+    onClick?: (event: any, index: number) => void;
+}
+/**
+ * Represents the [KendoReact FloatingActionButtonItem component](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <FloatingActionButton items={[{icon: 'pencil', text: 'Edit'}, {icon: 'close', text: 'Remove'}] icon: 'plus'} />
+ *   );
+ * };
+ * ```
+ */
+export declare const FloatingActionButtonItem: React.ForwardRefExoticComponent<Omit<FloatingActionButtonItemProps, "ref"> & React.RefAttributes<FloatingActionButtonItemHandle | null>>;

package/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The FloatingActionButton ref.
+ */
+export interface FloatingActionButtonHandle {
+    /**
+     * The FloatingActionButton element.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Focus the FloatingActionButton.
+     */
+    focus: () => void;
+}

package/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Align, PopupAnimation } from '@progress/kendo-react-popup';
+/**
+ * Represents the settings that can be passed to the Popup inside the FloatingActionButtonPopupSettings.
+ */
+export interface FloatingActionButtonPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/customization#toc-popup-behavior).
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup
+     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/items/customization#toc-popup-behavior).
+     */
+    popupClass?: string;
+    /**
+     * @hidden
+     */
+    anchorAlign?: Align;
+    /**
+     * @hidden
+     */
+    popupAlign?: Align;
+}