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

package/ListButton/DropDownButton.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { DropDownButtonProps } from './models/ListButtonProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface DropDownButtonState {
+    focusedIndex?: number;
+    focused?: boolean;
+    opened: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class DropDownButtonWithoutContext extends React.Component<DropDownButtonProps, DropDownButtonState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        items: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        popupSettings: PropTypes.Requireable<object>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        item: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        buttonClass: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        rounded: PropTypes.Requireable<string>;
+        fillMode: PropTypes.Requireable<string>;
+        themeColor: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        size: undefined;
+        rounded: undefined;
+        fillMode: undefined;
+        themeColor: undefined;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: {
+        opened: boolean;
+        focused: boolean;
+        focusedIndex: number;
+    };
+    private mainButton;
+    private list;
+    private skipFocus;
+    private get guid();
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    private buttonsData;
+    private openedDuringOnChange?;
+    private get opened();
+    constructor(props: DropDownButtonProps);
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * The DOM element of main button.
+     */
+    get element(): HTMLButtonElement | null;
+    private onKeyDown;
+    private switchFocus;
+    private handleFocus;
+    private handleButtonBlur;
+    private handleMenuBlur;
+    private setOpen;
+    private onItemClick;
+    private onItemDown;
+    private mouseDown;
+    private dispatchClickEvent;
+    private renderPopup;
+    private onPopupClose;
+    private listRef;
+    private renderChildItems;
+    private onClickMainButton;
+    private dispatchPopupEvent;
+    private isItemDisabled;
+    private isRtl;
+}
+/**
+ * Represents the PropsContext of the `DropDownButton` component.
+ * Used for global configuration of all `DropDownButton` instances.
+ */
+export declare const DropDownButtonPropsContext: React.Context<(p: DropDownButtonProps) => DropDownButtonProps>;
+/**
+ * Represent the `ref` of the DropDownButton component.
+ */
+export interface DropDownButtonHandle extends Pick<DropDownButtonWithoutContext, keyof DropDownButtonWithoutContext> {
+    /**
+     * The DOM element of main button.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * The props of the DropDownButtonHandle component.
+     */
+    props: Readonly<DropDownButtonProps>;
+}
+/** @hidden */
+export type DropDownButton = DropDownButtonHandle;
+/**
+ * Represents the [KendoReact DropDownButton component](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *        return (
+ *            <DropDownButton text="Act">
+ *                <DropDownButtonItem text="Item1" />
+ *                <DropDownButtonItem text="Item2" />
+ *                <DropDownButtonItem text="Item3" />
+ *            </DropDownButton>
+ *        );
+ * }
+ * ```
+ */
+export declare const DropDownButton: React.ForwardRefExoticComponent<DropDownButtonProps & React.RefAttributes<any>>;

package/ListButton/DropDownButton.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 N=require("react"),i=require("prop-types"),M=require("../Button.js"),e=require("@progress/kendo-react-common"),R=require("./utils/navigation.js"),A=require("./DropDownButtonItem.js"),T=require("./ButtonItem.js"),q=require("@progress/kendo-react-popup"),m=require("./utils/popup.js"),f=require("../package-metadata.js");function L(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 u=L(N),j=12e3,z=2e3,l=class l extends u.Component{constructor(o){super(o),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.showLicenseWatermark=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:s}=this.state;if(t.altKey){!this.opened&&t.keyCode===e.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===e.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===e.Keys.enter||t.keyCode===e.Keys.space){t.preventDefault(),s>=0&&this.dispatchClickEvent(t,s);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===e.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=R.navigate(s,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const p=t.keyCode===e.Keys.up||t.keyCode===e.Keys.down||t.keyCode===e.Keys.left||t.keyCode===e.Keys.right;!t.altKey&&(p||t.keyCode===e.Keys.home||t.keyCode===e.Keys.end)&&t.preventDefault()}this.setState(n)},this.switchFocus=t=>{this.skipFocus=!0,t(),window.setTimeout(()=>this.skipFocus=!1,0)},this.handleFocus=t=>{this.skipFocus||(this.setState({focused:!0,focusedIndex:this.opened?0:-1}),e.dispatchEvent(this.props.onFocus,t,this,void 0))},this.handleButtonBlur=t=>{this.opened||(this.setState({focused:!1}),e.dispatchEvent(this.props.onBlur,t,this,void 0))},this.handleMenuBlur=t=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),e.dispatchEvent(this.props.onBlur,t,this,void 0),setTimeout(()=>{this.setOpen(!1,t)},0))},this.setOpen=(t,s)=>{this.opened!==t&&(this.openedDuringOnChange=t,this.setState({opened:t}),s?this.dispatchPopupEvent(s,t):this.openedDuringOnChange=void 0)},this.onItemClick=(t,s)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(t,s),this.setOpen(!1,t)},this.onItemDown=t=>{e.getActiveElement(document)===this.list&&t.preventDefault()},this.mouseDown=t=>{t.preventDefault();const s=e.getActiveElement(document);this.element&&s!==this.element&&s!==this.list&&this.element.focus()},this.onPopupClose=t=>{var n;const s=e.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||(n=this.list)!=null&&n.contains(s))&&this.switchFocus(()=>{this.element&&this.element.focus({preventScroll:!0})}),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,t)},this.listRef=t=>{this.list=t,t&&this.state.focused&&this.switchFocus(()=>{t.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)})},this.onClickMainButton=t=>{if(e.dispatchEvent(this.props.onClick,t,this,void 0),!this.buttonsData.length)return;const s=!this.opened;this.setState({focused:!0,focusedIndex:s?0:-1}),this.setOpen(s,t)},this.dispatchPopupEvent=(t,s)=>{e.dispatchEvent(s?this.props.onOpen:this.props.onClose,t,this,void 0),this.openedDuringOnChange=void 0},this.showLicenseWatermark=!e.validatePackage(f.packageMetadata,{component:"DropDownButton"}),this.licenseMessage=e.getLicenseMessage(f.packageMetadata)}get guid(){return this.props.id+"-accessibility-id"}get opened(){return this.openedDuringOnChange!==void 0?this.openedDuringOnChange:this.props.opened===void 0?this.state.opened:this.props.opened}render(){const o=this.isRtl(),t=this.props.unstyled&&this.props.unstyled.uDropDownButton,s=o?"rtl":void 0,{id:n,style:a,tabIndex:p,disabled:r,size:C,rounded:y,fillMode:k,themeColor:w,ariaLabel:I,title:b,accessKey:B,icon:O,svgIcon:E,iconClass:v,buttonClass:S,className:x,imageUrl:P,startIcon:K,endIcon:F}=this.props;return this.buttonsData=this.props.items||u.Children.toArray(this.props.children).filter(c=>c&&c.type===A.DropDownButtonItem).map(c=>c.props),u.createElement(u.Fragment,null,u.createElement(M.Button,{id:n,size:C,style:a,rounded:y,fillMode:k,themeColor:w,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":r?"true":void 0,tabIndex:p,accessKey:B,icon:O,svgIcon:E,iconClass:v,className:e.classNames(S,x,e.uDropDownButton.wrapper({c:t,focused:this.state.focused,disabled:r})),imageUrl:P,dir:s,ref:c=>{this.mainButton=(c==null?void 0:c.element)||null},type:"button","aria-expanded":this.opened?"true":"false","aria-label":I,"aria-controls":this.opened?this.guid:void 0,title:b,startIcon:K,endIcon:F},this.props.text),this.showLicenseWatermark&&u.createElement(e.WatermarkOverlay,{message:this.licenseMessage}),this.renderPopup(o))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(o,t){this.isItemDisabled(t)||e.dispatchEvent(this.props.onItemClick,o,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(o){const{popupSettings:t={},_zIndex:s,unstyled:n}=this.props,a=s?s+z:j,p=n&&n.uDropDownButton,{focusedIndex:r}=this.state;return u.createElement(e.ZIndexContext.Provider,{value:a},u.createElement(q.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:e.classNames(e.uDropDownButton.popup({c:p}),t.popupClass),anchorAlign:t.anchorAlign||m.getAnchorAlign(o),popupAlign:t.popupAlign||m.getPopupAlign(o),style:o?{direction:"rtl"}:void 0,onClose:this.onPopupClose},u.createElement("ul",{role:"list",id:this.guid,tabIndex:-1,"aria-activedescendant":r>=0?`${this.guid}-${r}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:e.classNames(e.uDropDownButton.ul({c:p,size:this.props.size}))},this.renderChildItems())))}renderChildItems(){const{item:o,itemRender:t,textField:s,unstyled:n}=this.props,a=n&&n.uDropDownButton;return this.buttonsData.length>0?this.buttonsData.map((p,r)=>u.createElement(T.ButtonItem,{className:e.classNames(e.uDropDownButton.item({c:a}),p.className,{"k-first":r===0},{"k-last":r===this.buttonsData.length-1}),dataItem:p,textField:s,focused:this.state.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:o,index:r,key:r,id:`${this.guid}-${r}`})):null}isItemDisabled(o){return this.buttonsData[o]?this.buttonsData[o].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.mainButton&&getComputedStyle(this.mainButton).direction==="rtl"}};l.propTypes={accessKey:i.string,ariaLabel:i.string,title:i.string,onFocus:i.func,onBlur:i.func,onClick:i.func,onItemClick:i.func,onOpen:i.func,onClose:i.func,items:i.arrayOf(i.any),textField:i.string,tabIndex:i.number,disabled:i.bool,icon:i.string,svgIcon:e.svgIconPropType,iconClass:i.string,imageUrl:i.string,popupSettings:i.object,itemRender:i.func,item:i.func,className:i.string,buttonClass:i.string,dir:i.string},l.defaultProps={size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let h=l;const g=e.createPropsContext(),D=e.withIdHOC(e.withPropsContext(g,e.withUnstyledHOC(e.withZIndexContext(h))));D.displayName="KendoReactDropDownButton";exports.DropDownButton=D;exports.DropDownButtonPropsContext=g;exports.DropDownButtonWithoutContext=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),i=require("prop-types"),M=require("../Button.js"),e=require("@progress/kendo-react-common"),R=require("./utils/navigation.js"),A=require("./DropDownButtonItem.js"),T=require("./ButtonItem.js"),q=require("@progress/kendo-react-popup"),m=require("./utils/popup.js"),f=require("../package-metadata.js");function z(c){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(o,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return o.default=c,Object.freeze(o)}const u=z(N),L=12e3,j=2e3,h=class h extends u.Component{constructor(o){super(o),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.showLicenseWatermark=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:s}=this.state;if(t.altKey){!this.opened&&t.keyCode===e.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===e.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===e.Keys.enter||t.keyCode===e.Keys.space){t.preventDefault(),s>=0&&this.dispatchClickEvent(t,s);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===e.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=R.navigate(s,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const l=t.keyCode===e.Keys.up||t.keyCode===e.Keys.down||t.keyCode===e.Keys.left||t.keyCode===e.Keys.right;!t.altKey&&(l||t.keyCode===e.Keys.home||t.keyCode===e.Keys.end)&&t.preventDefault()}this.setState(n)},this.switchFocus=t=>{this.skipFocus=!0,t(),window.setTimeout(()=>this.skipFocus=!1,0)},this.handleFocus=t=>{this.skipFocus||(this.setState({focused:!0,focusedIndex:this.opened?0:-1}),e.dispatchEvent(this.props.onFocus,t,this,void 0))},this.handleButtonBlur=t=>{this.opened||(this.setState({focused:!1}),e.dispatchEvent(this.props.onBlur,t,this,void 0))},this.handleMenuBlur=t=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),e.dispatchEvent(this.props.onBlur,t,this,void 0),setTimeout(()=>{this.setOpen(!1,t)},0))},this.setOpen=(t,s)=>{this.opened!==t&&(this.openedDuringOnChange=t,this.setState({opened:t}),s?this.dispatchPopupEvent(s,t):this.openedDuringOnChange=void 0)},this.onItemClick=(t,s)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(t,s),this.setOpen(!1,t)},this.onItemDown=t=>{e.getActiveElement(document)===this.list&&t.preventDefault()},this.mouseDown=t=>{t.preventDefault();const s=e.getActiveElement(document);this.element&&s!==this.element&&s!==this.list&&this.element.focus()},this.onPopupClose=t=>{var n;const s=e.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||(n=this.list)!=null&&n.contains(s))&&this.switchFocus(()=>{this.element&&this.element.focus({preventScroll:!0})}),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,t)},this.listRef=t=>{this.list=t,t&&this.state.focused&&this.switchFocus(()=>{t.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)})},this.onClickMainButton=t=>{if(e.dispatchEvent(this.props.onClick,t,this,void 0),!this.buttonsData.length)return;const s=!this.opened;this.setState({focused:!0,focusedIndex:s?0:-1}),this.setOpen(s,t)},this.dispatchPopupEvent=(t,s)=>{e.dispatchEvent(s?this.props.onOpen:this.props.onClose,t,this,void 0),this.openedDuringOnChange=void 0},this.showLicenseWatermark=!e.validatePackage(f.packageMetadata,{component:"DropDownButton"}),this.licenseMessage=e.getLicenseMessage(f.packageMetadata)}get guid(){return this.props.id+"-accessibility-id"}get opened(){return this.openedDuringOnChange!==void 0?this.openedDuringOnChange:this.props.opened===void 0?this.state.opened:this.props.opened}render(){const o=this.isRtl(),t=this.props.unstyled&&this.props.unstyled.uDropDownButton,s=o?"rtl":void 0,{id:n,style:a,tabIndex:l,disabled:r,size:y,rounded:C,fillMode:k,themeColor:w,ariaLabel:I,title:b,accessKey:B,icon:O,svgIcon:v,iconClass:E,buttonClass:S,className:x,imageUrl:P,startIcon:K,endIcon:F}=this.props;return this.buttonsData=this.props.items||u.Children.toArray(this.props.children).filter(p=>p&&p.type===A.DropDownButtonItem).map(p=>p.props),u.createElement(u.Fragment,null,u.createElement(M.Button,{id:n,size:y,style:a,rounded:C,fillMode:k,themeColor:w,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":r?"true":void 0,tabIndex:l,accessKey:B,icon:O,svgIcon:v,iconClass:E,className:e.classNames(S,x,e.uDropDownButton.wrapper({c:t,focused:this.state.focused,disabled:r})),imageUrl:P,dir:s,ref:p=>{this.mainButton=(p==null?void 0:p.element)||null},type:"button","aria-expanded":this.opened?"true":"false","aria-label":I,"aria-controls":this.opened?this.guid:void 0,title:b,startIcon:K,endIcon:F},this.props.text),this.showLicenseWatermark&&u.createElement(e.WatermarkOverlay,{message:this.licenseMessage}),this.renderPopup(o))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(o,t){this.isItemDisabled(t)||e.dispatchEvent(this.props.onItemClick,o,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(o){const{popupSettings:t={},_zIndex:s,unstyled:n}=this.props,a=s?s+j:L,l=n&&n.uDropDownButton,{focusedIndex:r}=this.state;return u.createElement(e.ZIndexContext.Provider,{value:a},u.createElement(q.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:e.classNames(e.uDropDownButton.popup({c:l}),t.popupClass),anchorAlign:t.anchorAlign||m.getAnchorAlign(o),popupAlign:t.popupAlign||m.getPopupAlign(o),style:o?{direction:"rtl"}:void 0,onClose:this.onPopupClose},u.createElement("ul",{role:"list",id:this.guid,tabIndex:-1,"aria-activedescendant":r>=0?`${this.guid}-${r}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:e.classNames(e.uDropDownButton.ul({c:l,size:this.props.size}))},this.renderChildItems())))}renderChildItems(){const{item:o,itemRender:t,textField:s,unstyled:n}=this.props,a=n&&n.uDropDownButton;return this.buttonsData.length>0?this.buttonsData.map((l,r)=>u.createElement(T.ButtonItem,{className:e.classNames(e.uDropDownButton.item({c:a}),l.className,{"k-first":r===0},{"k-last":r===this.buttonsData.length-1}),dataItem:l,textField:s,focused:this.state.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:o,index:r,key:r,id:`${this.guid}-${r}`})):null}isItemDisabled(o){return this.buttonsData[o]?this.buttonsData[o].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.mainButton&&getComputedStyle(this.mainButton).direction==="rtl"}};h.propTypes={accessKey:i.string,ariaLabel:i.string,title:i.string,onFocus:i.func,onBlur:i.func,onClick:i.func,onItemClick:i.func,onOpen:i.func,onClose:i.func,items:i.arrayOf(i.any),textField:i.string,tabIndex:i.number,disabled:i.bool,icon:i.string,svgIcon:e.svgIconPropType,iconClass:i.string,imageUrl:i.string,popupSettings:i.object,itemRender:i.func,item:i.func,className:i.string,buttonClass:i.string,dir:i.string,size:i.oneOf(["small","medium","large"]),rounded:i.oneOf(["small","medium","large","full"]),fillMode:i.oneOf(["flat","link","outline","solid","clear"]),themeColor:i.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},h.defaultProps={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};let d=h;const g=e.createPropsContext(),D=e.withIdHOC(e.withPropsContext(g,e.withUnstyledHOC(e.withZIndexContext(d))));D.displayName="KendoReactDropDownButton";exports.DropDownButton=D;exports.DropDownButtonPropsContext=g;exports.DropDownButtonWithoutContext=d;

package/ListButton/DropDownButton.mjs

@@ -8,12 +8,12 @@
 import * as p from "react";
 import s from "prop-types";
 import { Button as K } from "../Button.mjs";
-import { Keys as r, dispatchEvent as l, getActiveElement as f, validatePackage as M, getLicenseMessage as A, svgIconPropType as R, classNames as u, uDropDownButton as c, WatermarkOverlay as T, ZIndexContext as L, createPropsContext as z, withIdHOC as U, withPropsContext as Z, withUnstyledHOC as $, withZIndexContext as W } from "@progress/kendo-react-common";
+import { withIdHOC as M, withPropsContext as A, createPropsContext as R, withUnstyledHOC as T, withZIndexContext as L, Keys as r, dispatchEvent as d, getActiveElement as f, validatePackage as z, getLicenseMessage as U, svgIconPropType as Z, classNames as u, uDropDownButton as c, WatermarkOverlay as $, ZIndexContext as W } from "@progress/kendo-react-common";
 import { navigate as _ } from "./utils/navigation.mjs";
 import { DropDownButtonItem as H } from "./DropDownButtonItem.mjs";
 import { ButtonItem as X } from "./ButtonItem.mjs";
 import { Popup as j } from "@progress/kendo-react-popup";
-import { getAnchorAlign as q, getPopupAlign as G } from "./utils/popup.mjs";
+import { getPopupAlign as q, getAnchorAlign as G } from "./utils/popup.mjs";
 import { packageMetadata as C } from "../package-metadata.mjs";
 const J = 12e3, Q = 2e3, m = class m extends p.Component {
   constructor(i) {
@@ -44,18 +44,18 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
       if (this.opened) {
         const a = _(e, t.keyCode, t.altKey, this.buttonsData.length);
         o.focusedIndex = a;
-        const h = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
-        !t.altKey && (h || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
+        const l = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
+        !t.altKey && (l || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
       }
       this.setState(o);
     }, this.switchFocus = (t) => {
       this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
     }, this.handleFocus = (t) => {
-      this.skipFocus || (this.setState({ focused: !0, focusedIndex: this.opened ? 0 : -1 }), l(this.props.onFocus, t, this, void 0));
+      this.skipFocus || (this.setState({ focused: !0, focusedIndex: this.opened ? 0 : -1 }), d(this.props.onFocus, t, this, void 0));
     }, this.handleButtonBlur = (t) => {
-      this.opened || (this.setState({ focused: !1 }), l(this.props.onBlur, t, this, void 0));
+      this.opened || (this.setState({ focused: !1 }), d(this.props.onBlur, t, this, void 0));
     }, this.handleMenuBlur = (t) => {
-      this.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), l(this.props.onBlur, t, this, void 0), setTimeout(() => {
+      this.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), d(this.props.onBlur, t, this, void 0), setTimeout(() => {
         this.setOpen(!1, t);
       }, 0));
     }, this.setOpen = (t, e) => {
@@ -79,7 +79,7 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
         t.focus({ preventScroll: !0 }), this.element && (this.element.tabIndex = -1);
       });
     }, this.onClickMainButton = (t) => {
-      if (l(this.props.onClick, t, this, void 0), !this.buttonsData.length)
+      if (d(this.props.onClick, t, this, void 0), !this.buttonsData.length)
         return;
       const e = !this.opened;
       this.setState({
@@ -87,8 +87,8 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
         focusedIndex: e ? 0 : -1
       }), this.setOpen(e, t);
     }, this.dispatchPopupEvent = (t, e) => {
-      l(e ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
-    }, this.showLicenseWatermark = !M(C, { component: "DropDownButton" }), this.licenseMessage = A(C);
+      d(e ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
+    }, this.showLicenseWatermark = !z(C, { component: "DropDownButton" }), this.licenseMessage = U(C);
   }
   get guid() {
     return this.props.id + "-accessibility-id";
@@ -103,68 +103,68 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
     const i = this.isRtl(), t = this.props.unstyled && this.props.unstyled.uDropDownButton, e = i ? "rtl" : void 0, {
       id: o,
       style: a,
-      tabIndex: h,
+      tabIndex: l,
       disabled: n,
       size: D,
       rounded: y,
-      fillMode: I,
-      themeColor: k,
+      fillMode: k,
+      themeColor: I,
       ariaLabel: w,
       title: b,
       accessKey: B,
       icon: O,
       svgIcon: x,
       iconClass: E,
-      buttonClass: S,
-      className: P,
-      imageUrl: F,
-      startIcon: v,
+      buttonClass: v,
+      className: S,
+      imageUrl: P,
+      startIcon: F,
       endIcon: N
     } = this.props;
-    return this.buttonsData = this.props.items || p.Children.toArray(this.props.children).filter((d) => d && d.type === H).map((d) => d.props), /* @__PURE__ */ p.createElement(p.Fragment, null, /* @__PURE__ */ p.createElement(
+    return this.buttonsData = this.props.items || p.Children.toArray(this.props.children).filter((h) => h && h.type === H).map((h) => h.props), /* @__PURE__ */ p.createElement(p.Fragment, null, /* @__PURE__ */ p.createElement(
       K,
       {
         id: o,
         size: D,
         style: a,
         rounded: y,
-        fillMode: I,
-        themeColor: k,
+        fillMode: k,
+        themeColor: I,
         onClick: this.onClickMainButton,
         onMouseDown: this.mouseDown,
         onKeyDown: this.onKeyDown,
         onFocus: this.handleFocus,
         onBlur: this.handleButtonBlur,
         "aria-disabled": n ? "true" : void 0,
-        tabIndex: h,
+        tabIndex: l,
         accessKey: B,
         icon: O,
         svgIcon: x,
         iconClass: E,
         className: u(
+          v,
           S,
-          P,
           c.wrapper({
             c: t,
             focused: this.state.focused,
             disabled: n
           })
         ),
-        imageUrl: F,
+        imageUrl: P,
         dir: e,
-        ref: (d) => {
-          this.mainButton = (d == null ? void 0 : d.element) || null;
+        ref: (h) => {
+          this.mainButton = (h == null ? void 0 : h.element) || null;
         },
         type: "button",
         "aria-expanded": this.opened ? "true" : "false",
         "aria-label": w,
         "aria-controls": this.opened ? this.guid : void 0,
         title: b,
-        startIcon: v,
+        startIcon: F,
         endIcon: N
       },
       this.props.text
-    ), this.showLicenseWatermark && /* @__PURE__ */ p.createElement(T, { message: this.licenseMessage }), this.renderPopup(i));
+    ), this.showLicenseWatermark && /* @__PURE__ */ p.createElement($, { message: this.licenseMessage }), this.renderPopup(i));
   }
   /**
    * @hidden
@@ -179,22 +179,22 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
     return this.mainButton;
   }
   dispatchClickEvent(i, t) {
-    this.isItemDisabled(t) || l(this.props.onItemClick, i, this, {
+    this.isItemDisabled(t) || d(this.props.onItemClick, i, this, {
       item: this.buttonsData[t],
       itemIndex: t
     });
   }
   renderPopup(i) {
-    const { popupSettings: t = {}, _zIndex: e, unstyled: o } = this.props, a = e ? e + Q : J, h = o && o.uDropDownButton, { focusedIndex: n } = this.state;
-    return /* @__PURE__ */ p.createElement(L.Provider, { value: a }, /* @__PURE__ */ p.createElement(
+    const { popupSettings: t = {}, _zIndex: e, unstyled: o } = this.props, a = e ? e + Q : J, l = o && o.uDropDownButton, { focusedIndex: n } = this.state;
+    return /* @__PURE__ */ p.createElement(W.Provider, { value: a }, /* @__PURE__ */ p.createElement(
       j,
       {
         anchor: this.mainButton,
         show: this.opened,
         animate: t.animate,
-        popupClass: u(c.popup({ c: h }), t.popupClass),
-        anchorAlign: t.anchorAlign || q(i),
-        popupAlign: t.popupAlign || G(i),
+        popupClass: u(c.popup({ c: l }), t.popupClass),
+        anchorAlign: t.anchorAlign || G(i),
+        popupAlign: t.popupAlign || q(i),
         style: i ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
@@ -210,7 +210,7 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
           onBlur: this.handleMenuBlur,
           className: u(
             c.ul({
-              c: h,
+              c: l,
               size: this.props.size
             })
           )
@@ -221,18 +221,18 @@ const J = 12e3, Q = 2e3, m = class m extends p.Component {
   }
   renderChildItems() {
     const { item: i, itemRender: t, textField: e, unstyled: o } = this.props, a = o && o.uDropDownButton;
-    return this.buttonsData.length > 0 ? this.buttonsData.map((h, n) => /* @__PURE__ */ p.createElement(
+    return this.buttonsData.length > 0 ? this.buttonsData.map((l, n) => /* @__PURE__ */ p.createElement(
       X,
       {
         className: u(
           c.item({
             c: a
           }),
-          h.className,
+          l.className,
           { "k-first": n === 0 },
           { "k-last": n === this.buttonsData.length - 1 }
         ),
-        dataItem: h,
+        dataItem: l,
         textField: e,
         focused: this.state.focusedIndex === n,
         onClick: this.onItemClick,
@@ -267,7 +267,7 @@ m.propTypes = {
   tabIndex: s.number,
   disabled: s.bool,
   icon: s.string,
-  svgIcon: R,
+  svgIcon: Z,
   iconClass: s.string,
   imageUrl: s.string,
   popupSettings: s.object,
@@ -275,18 +275,34 @@ m.propTypes = {
   item: s.func,
   className: s.string,
   buttonClass: s.string,
-  dir: s.string
+  dir: s.string,
+  size: s.oneOf(["small", "medium", "large"]),
+  rounded: s.oneOf(["small", "medium", "large", "full"]),
+  fillMode: s.oneOf(["flat", "link", "outline", "solid", "clear"]),
+  themeColor: s.oneOf([
+    "base",
+    "primary",
+    "secondary",
+    "tertiary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "dark",
+    "light",
+    "inverse"
+  ])
 }, m.defaultProps = {
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
-  themeColor: "base"
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
+  themeColor: void 0
 };
 let g = m;
-const V = z(), Y = U(
-  Z(
+const V = R(), Y = M(
+  A(
     V,
-    $(W(g))
+    T(L(g))
   )
 );
 Y.displayName = "KendoReactDropDownButton";

package/ListButton/DropDownButtonItem.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { ButtonItem } from './models/ButtonItem.js';
+import * as React from 'react';
+/**
+ * The properties of the KendoReact DropDownButtonItem component.
+ */
+export interface DropDownButtonItemProps extends ButtonItem {
+    /**
+     * Determines the selected state of the ButtonItem component.
+     */
+    selected?: boolean;
+}
+export declare class DropDownButtonItem extends React.Component<DropDownButtonItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        render: PropTypes.Requireable<any>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}

package/ListButton/SplitButton.d.ts

@@ -0,0 +1,142 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { SplitButtonProps } from './models/ListButtonProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface SplitButtonState {
+    focusedIndex?: number;
+    focused?: boolean;
+    opened?: boolean;
+}
+/**
+ * Represents the [KendoReact SplitButton component](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *        return (
+ *            <SplitButton text="Act">
+ *                <SplitButtonItem text="Item1" />
+ *                <SplitButtonItem text="Item2" />
+ *                <SplitButtonItem text="Item3" />
+ *            </SplitButton>
+ *        );
+ * }
+ * ```
+ */
+export declare class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        text: PropTypes.Requireable<string>;
+        items: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        imageUrl: PropTypes.Requireable<string>;
+        popupSettings: PropTypes.Requireable<object>;
+        itemRender: PropTypes.Requireable<any>;
+        item: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        buttonClass: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        rounded: PropTypes.Requireable<string>;
+        fillMode: PropTypes.Requireable<string>;
+        themeColor: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        size: undefined;
+        rounded: undefined;
+        fillMode: undefined;
+        themeColor: undefined;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: {
+        focused: boolean;
+        focusedIndex: number;
+        opened: boolean;
+    };
+    private wrapper;
+    private mainButton;
+    private list;
+    private get guid();
+    private skipFocus;
+    private buttonsData;
+    private openedDuringOnChange?;
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    constructor(props: SplitButtonProps);
+    private get opened();
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * The DOM element of main button.
+     */
+    get element(): HTMLButtonElement | null;
+    private onKeyDown;
+    private switchFocus;
+    private onFocus;
+    private setOpen;
+    private onItemClick;
+    private onBlur;
+    private dispatchClickEvent;
+    private renderPopup;
+    private onPopupClose;
+    private listRef;
+    private renderChildItems;
+    private onSplitPartClick;
+    private onDownSplitPart;
+    private onItemDown;
+    private dispatchPopupEvent;
+    private isItemDisabled;
+    private isRtl;
+}
+/**
+ * Represent the `ref` of the SplitButton component.
+ */
+export interface SplitButtonHandle extends Pick<SplitButton, keyof SplitButton> {
+    /**
+     * The DOM element of main button.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * The props of the SplitButtonHandle component.
+     */
+    props: Readonly<SplitButtonProps>;
+}