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

package/actionsheet/ActionSheet.d.ts

@@ -0,0 +1,242 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetItemProps } from './interfaces/ActionSheetItemProps.js';
+import * as React from 'react';
+/**
+ * Specifies the animation duration settings of the ActionSheet.
+ *
+ */
+export interface ActionSheetAnimationDuration {
+    /**
+     * Specifies the opening duration of the ActionSheet animation.
+     */
+    openDuration?: number;
+    /**
+     * Specifies the closing duration of the ActionSheet animation.
+     */
+    closeDuration?: number;
+}
+/**
+ * The props of the ActionSheet component.
+ */
+export interface ActionSheetProps {
+    /**
+     * The collection of items that will be rendered in the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
+     * <ActionSheet items={items} />
+     * ```
+     */
+    items?: ActionSheetItemProps[];
+    /**
+     * Specifies the text that is rendered under the title.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet subTitle="Subtitle text" />
+     * ```
+     */
+    subTitle?: React.ReactNode;
+    /**
+     * Specifies the text that is rendered as title.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet title="Title text" />
+     * ```
+     */
+    title?: React.ReactNode;
+    /**
+     * Fires when the modal overlay is clicked.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet onClose={(e) => console.log('Overlay clicked')} />
+     * ```
+     */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /**
+     * Fires when an ActionSheet item is clicked.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet onItemSelect={(e) => console.log(e.item)} />
+     * ```
+     */
+    onItemSelect?: (event: {
+        syntheticEvent: React.SyntheticEvent;
+        title?: string;
+        item?: any;
+    }) => void;
+    /**
+     * Represents the children that are passed to the ActionSheet.
+     *
+     * @hidden
+     */
+    children?: any;
+    /**
+     * Specifies the `tabIndex` of the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Specifies if the ActionSheet can be navigatable with keyboard.
+     * Defaults to `true`.
+     *
+     * @default true
+     * @example
+     * ```jsx
+     * <ActionSheet navigatable={false} />
+     * ```
+     */
+    navigatable?: boolean;
+    /**
+     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     *
+     * @default []
+     * @example
+     * ```jsx
+     * <ActionSheet navigatableElements={['.custom-class']} />
+     * ```
+     */
+    navigatableElements?: string[];
+    /**
+     * Controls the popup animation. By default, the open and close animations are disabled.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet animation={true} />
+     * ```
+     */
+    animation?: boolean;
+    /**
+     * @hidden
+     */
+    animationStyles?: React.CSSProperties;
+    /**
+     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet animationDuration={500} />
+     * ```
+     */
+    animationDuration?: number | ActionSheetAnimationDuration;
+    /**
+     * The CSS classes that will be rendered on the inner ActionSheet element.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Specifies the state of the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet expand={true} />
+     * ```
+     */
+    expand?: boolean;
+    /**
+     * Specifies the position of the ActionSheet.
+     *
+     * @default 'bottom'
+     * @example
+     * ```jsx
+     * <ActionSheet position="top" />
+     * ```
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
+    /**
+     * Specifies the actions rendered at the start of the header.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet prefixActions={<Button>Action</Button>} />
+     * ```
+     */
+    prefixActions?: React.ReactNode;
+    /**
+     * Specifies the actions rendered at the end of the header.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet suffixActions={<Button>Action</Button>} />
+     * ```
+     */
+    suffixActions?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    filter?: React.ReactNode;
+    /**
+     * Specifies the styles of the ActionSheet component.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetState {
+    show?: boolean;
+    slide?: boolean;
+}
+/**
+ * Represent the `ref` of the ActionSheet component.
+ */
+export interface ActionSheetHandle {
+    /**
+     * The props of the ActionSheet component.
+     */
+    props: ActionSheetProps;
+    /**
+     * The HTML element of the ActionSheet component.
+     */
+    element?: HTMLDivElement;
+}
+/**
+ * Represents the [KendoReact ActionSheet](https://www.telerik.com/kendo-react-ui/components/layout/actionsheet) component.
+ */
+export declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetHandle | null>>;
+/**
+ * The default props interface of the ActionSheet component.
+ */
+export 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[];
+    /**
+     * Specifies the position of the ActionSheet.
+     *
+     * @default 'bottom'
+     */
+    position: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
+};
+/**
+ * The default props of the ActionSheet component.
+ */
+export declare const actionSheetDefaultProps: ActionSheetDefaultPropsType;

package/actionsheet/ActionSheetContent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const contentDisplayName = "ActionSheetContent";
+/**
+ * The KendoReact ActionSheetContent component.
+ */
+export declare const ActionSheetContent: React.FunctionComponent<ActionSheetChildrenProps>;

package/actionsheet/ActionSheetFooter.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps.js';
+import * as React from 'react';
+/**
+ * Lists the possible alignment of the ActionSheet action buttons.
+ */
+export type ActionSheetActionsAlignment = 'start' | 'center' | 'end' | 'stretched' | 'justify';
+/**
+ * Lists the possible orientations of the ActionSheet action buttons.
+ */
+export type ActionSheetActionsOrientation = 'horizontal' | 'vertical';
+/**
+ * The props of the ActionSheetFooter component.
+ */
+export interface ActionSheetFooterProps extends ActionSheetChildrenProps {
+    /**
+     * Sets the orientation of the action buttons in the footer. Valid values are `"horizontal"` and `"vertical"`.
+     *
+     * @default "horizontal"
+     */
+    actionButtonsOrientation?: ActionSheetActionsOrientation;
+    /**
+     * Sets the alignment of the action buttons in the footer. This configuration works only in `horizontal` orientation.
+     *
+     * @default "stretched"
+     */
+    actionButtonsAlignment?: ActionSheetActionsAlignment;
+}
+/**
+ * @hidden
+ */
+export declare const footerDisplayName = "ActionSheetFooter";
+/**
+ * The KendoReact ActionSheetFooter component.
+ */
+export declare const ActionSheetFooter: React.FunctionComponent<ActionSheetFooterProps>;

package/actionsheet/ActionSheetHeader.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetChildrenProps } from './interfaces/ActionSheetChildrenProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const headerDisplayName = "ActionSheetHeader";
+/**
+ * The KendoReact ActionSheetHeader component.
+ */
+export declare const ActionSheetHeader: React.FunctionComponent<ActionSheetChildrenProps>;

package/actionsheet/ActionSheetItem.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetItemProps } from './interfaces/ActionSheetItemProps.js';
+import * as React from 'react';
+/**
+ * The KendoReact ActionSheetItem component.
+ */
+export declare const ActionSheetItem: React.FunctionComponent<ActionSheetItemProps>;

package/actionsheet/ActionSheetView.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 React } from 'react';
+/**
+ * @hidden
+ */
+export declare const ActionSheetViewDisplayName = "ActionSheetView";
+/**
+ * @hidden
+ */
+export declare const ActionSheetView: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;

package/actionsheet/interfaces/ActionSheetChildrenProps.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface ActionSheetChildrenProps {
+    /**
+     * ClassName of the rendered element.
+     */
+    className?: any;
+    /**
+     * Represents the children that are passed to the ActionSheet.
+     */
+    children?: any;
+}

package/actionsheet/interfaces/ActionSheetItemProps.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Represents the props of the KendoReact ActionSheetItem component.
+ */
+export interface ActionSheetItemProps {
+    /**
+     * Sets additional CSS classes to the ActionSheet.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ActionSheet.
+     */
+    style?: React.CSSProperties;
+    /**
+     * **Deprecated**. Specifies the `tabIndex` of the ActionSheetItem.
+     *
+     * Set the tabIndex to the ActionSheet component instead.
+     *
+     * @deprecated
+     */
+    tabIndex?: number;
+    /**
+     * Specifies additional text rendered under the item's title.
+     * Specifies additional text rendered under the `title` of the ActionSheetItem.
+     */
+    description?: string;
+    /**
+     * Specifies if the ActionSheetItem is initially disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines the ActionSheetItem group. Items can be segregated in two groups - `top` and `bottom`.
+     * Each group specifies whether the ActionSheetItem will be rendered over the separator or under it.
+     */
+    group?: 'top' | 'bottom';
+    /**
+     * Defines the icon rendered inside the ActionSheetItem.
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Specifies the text content of the ActionSheetItem.
+     */
+    title?: string;
+    /**
+     * Specifies the ActionSheetItem.
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    onClick?: (event: {
+        syntheticEvent: React.SyntheticEvent;
+        title?: string;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (event: React.SyntheticEvent, title: string | undefined, id: number | undefined) => void;
+    /**
+     * @hidden
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    id?: number;
+}

package/appbar/AppBar.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AppBarProps } from './interfaces/AppBarProps.js';
+import * as React from 'react';
+/**
+ * The AppBar ref.
+ */
+export interface AppBarHandle {
+    /**
+     * The AppBar element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBar.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact AppBar component](https://www.telerik.com/kendo-react-ui/components/layout/appbar).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ * ```
+ */
+export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<AppBarHandle | null>>;

package/appbar/AppBar.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 M=require("react"),o=require("prop-types"),p=require("@progress/kendo-react-common");function C(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const t=C(M),d=t.forwardRef((e,n)=>{const{children:s,className:a,style:f,id:b}=e,c=t.useRef(null),m=t.useCallback(()=>{c.current&&p.focusFirstFocusableChild(c.current)},[]),k=t.useCallback(()=>({element:c.current,focus:m}),[m]);t.useImperativeHandle(n,k);const y=p.useId(),r=t.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),l=t.useMemo(()=>e.position||u.position,[e.position]),i=t.useMemo(()=>e.positionMode||u.positionMode,[e.positionMode]),g=t.useMemo(()=>p.classNames("k-appbar",{"k-appbar-top":l==="top","k-appbar-bottom":l==="bottom","k-appbar-static":i==="static","k-appbar-sticky":i==="sticky","k-appbar-fixed":i==="fixed",[`k-appbar-${r}`]:!!r},a),[l,i,r,a]);return t.createElement("div",{className:g,style:f,id:b||y},s)});d.propTypes={children:o.any,className:o.string,style:o.object,id:o.string,themeColor:o.string,position:o.oneOf(["top","bottom"]),positionMode:o.oneOf(["static","sticky","fixed"])};const u={themeColor:"light",position:"top",positionMode:"static"};d.displayName="KendoAppBar";exports.AppBar=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),o=require("prop-types"),p=require("@progress/kendo-react-common");function C(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const t=C(g),d=t.forwardRef((e,n)=>{const{children:s,className:a,style:f,id:b}=e,c=t.useRef(null),m=t.useCallback(()=>{c.current&&p.focusFirstFocusableChild(c.current)},[]),k=t.useCallback(()=>({element:c.current,focus:m}),[m]);t.useImperativeHandle(n,k);const y=p.useId(),r=t.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),l=t.useMemo(()=>e.position||u.position,[e.position]),i=t.useMemo(()=>e.positionMode||u.positionMode,[e.positionMode]),M=t.useMemo(()=>p.classNames("k-appbar",{"k-appbar-top":l==="top","k-appbar-bottom":l==="bottom","k-appbar-static":i==="static","k-appbar-sticky":i==="sticky","k-appbar-fixed":i==="fixed",[`k-appbar-${r}`]:!!r},a),[l,i,r,a]);return t.createElement("div",{className:M,style:f,id:b||y},s)});d.propTypes={children:o.any,className:o.string,style:o.object,id:o.string,themeColor:o.string,position:o.oneOf(["top","bottom"]),positionMode:o.oneOf(["static","sticky","fixed"])};const u={themeColor:void 0,position:"top",positionMode:"static"};d.displayName="KendoAppBar";exports.AppBar=d;

package/appbar/AppBar.mjs

@@ -5,21 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
+import * as o from "react";
 import t from "prop-types";
-import { focusFirstFocusableChild as C, useId as M, classNames as y } from "@progress/kendo-react-common";
-const l = e.forwardRef((o, m) => {
-  const { children: d, className: c, style: u, id: f } = o, i = e.useRef(null), p = e.useCallback(() => {
-    i.current && C(i.current);
-  }, []), b = e.useCallback(
+import { focusFirstFocusableChild as M, useId as h, classNames as y } from "@progress/kendo-react-common";
+const l = o.forwardRef((e, m) => {
+  const { children: d, className: c, style: u, id: f } = e, i = o.useRef(null), p = o.useCallback(() => {
+    i.current && M(i.current);
+  }, []), b = o.useCallback(
     () => ({
       element: i.current,
       focus: p
     }),
     [p]
   );
-  e.useImperativeHandle(m, b);
-  const k = M(), a = e.useMemo(() => o.themeColor || r.themeColor, [o.themeColor]), n = e.useMemo(() => o.position || r.position, [o.position]), s = e.useMemo(() => o.positionMode || r.positionMode, [o.positionMode]), h = e.useMemo(
+  o.useImperativeHandle(m, b);
+  const k = h(), a = o.useMemo(() => e.themeColor || r.themeColor, [e.themeColor]), n = o.useMemo(() => e.position || r.position, [e.position]), s = o.useMemo(() => e.positionMode || r.positionMode, [e.positionMode]), C = o.useMemo(
     () => y(
       "k-appbar",
       {
@@ -34,7 +34,7 @@ const l = e.forwardRef((o, m) => {
     ),
     [n, s, a, c]
   );
-  return /* @__PURE__ */ e.createElement("div", { className: h, style: u, id: f || k }, d);
+  return /* @__PURE__ */ o.createElement("div", { className: C, style: u, id: f || k }, d);
 });
 l.propTypes = {
   children: t.any,
@@ -46,7 +46,7 @@ l.propTypes = {
   positionMode: t.oneOf(["static", "sticky", "fixed"])
 };
 const r = {
-  themeColor: "light",
+  themeColor: void 0,
   position: "top",
   positionMode: "static"
 };

package/appbar/AppBarSection.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AppBarSectionProps } from './interfaces/AppBarSectionProps.js';
+import * as React from 'react';
+/**
+ * The AppBarSection ref.
+ */
+export interface AppBarSectionHandle {
+    /**
+     * The AppBarSection element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBarSection.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact AppBarSection component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-sections).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ * ```
+ */
+export declare const AppBarSection: React.ForwardRefExoticComponent<AppBarSectionProps & React.RefAttributes<AppBarSectionHandle | null>>;

package/appbar/AppBarSpacer.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AppBarSpacerProps } from './interfaces/AppBarSpacerProps.js';
+import * as React from 'react';
+/**
+ * The AppBarSpacer ref.
+ */
+export interface AppBarSpacerHandle {
+    /**
+     * The AppBarSpacer element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the AppBarSpacer.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact AppBarSpacer component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <AppBar>
+ *           <AppBarSection>
+ *               <span className="k-icon k-i-menu" />
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer style={{ width: 8 }} />
+ *
+ *           <AppBarSection>
+ *               <h1 className="title">{tc.text} AppBar</h1>
+ *           </AppBarSection>
+ *
+ *           <AppBarSpacer />
+ *
+ *           <AppBarSection>
+ *               <BadgeContainer>
+ *                   <span className="k-icon k-i-bell" />
+ *                   <Badge themeColor="info" shape="dot" />
+ *               </BadgeContainer>
+ *           </AppBarSection>
+ *      </AppBar>
+ *   );
+ * };
+ * ```
+ */
+export declare const AppBarSpacer: React.ForwardRefExoticComponent<AppBarSpacerProps & React.RefAttributes<AppBarSpacerHandle | null>>;