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

package/index.d.mts

@@ -20,88 +20,18 @@ import * as React_2 from 'react';
 import { RefAttributes } from 'react';
 import { SVGIcon } from '@progress/kendo-react-common';
 
-export declare class Button extends React_2.Component<ButtonProps, ButtonState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        selected: PropTypes.Requireable<boolean>;
-        togglable: 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>;
-        imageAlt: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | null>;
-        rounded: PropTypes.Requireable<string | null>;
-        fillMode: PropTypes.Requireable<string | null>;
-        themeColor: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        togglable: boolean;
-        size: string;
-        rounded: string;
-        fillMode: string;
-        themeColor: string;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: ButtonState;
-    private _selectedTemp?;
-    private _element;
-    /**
-     * Gets the DOM element of the Button component.
-     */
-    get element(): HTMLButtonElement | null;
-    /**
-     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
-     * Otherwise, returns `false`.
-     */
-    get selected(): boolean;
-    constructor(props: ButtonProps);
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: ButtonProps, state: ButtonState): {
-        selected: boolean;
-    } | null;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private toggleIfApplicable;
-    private handleClick;
-}
+export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<ButtonHandle | null>>;
 
-export declare class ButtonGroup extends React_2.Component<ButtonGroupProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const ButtonGroup: {
+    (props: ButtonGroupProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<string>;
         dir: PropTypes.Requireable<string>;
     };
-    private _element;
-    constructor(props: ButtonGroupProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private mapButtons;
-    private renderButton;
-}
+};
 
 /**
  * Represents the properties which can be set to a ButtonGroup.
@@ -150,6 +80,21 @@ export declare interface ButtonGroupProps extends ButtonGroupInterface {
     unstyled?: ButtonsClassStructure;
 }
 
+/**
+ * @hidden
+ */
+export declare interface ButtonHandle {
+    /**
+     * Gets the DOM element of the Button component.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
+     * Otherwise, returns `false`.
+     */
+    selected: boolean;
+}
+
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -240,6 +185,7 @@ export declare interface ButtonItemProps {
     id?: string;
     textField?: string;
     className?: string;
+    unstyled?: ButtonsClassStructure;
 }
 
 /**
@@ -315,15 +261,21 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
     /**
-     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend
+     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
      * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
      */
     startIcon?: React_2.ReactNode;
     /**
-     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend
+     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
      * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
      */
     endIcon?: React_2.ReactNode;
+    /**
+     * The unstyled option classes.
+     */
+    unstyled?: ButtonsClassStructure;
 }
 
 /**
@@ -354,13 +306,6 @@ export declare interface ButtonsPopupSettings {
     onClose?: (event: PopupCloseEvent) => void;
 }
 
-/**
- * @hidden
- */
-declare interface ButtonState {
-    selected: boolean;
-}
-
 /**
  * Represents the Chip component.
  */
@@ -813,8 +758,7 @@ export declare interface DropDownButtonBlurEvent extends BaseEvent<DropDownButto
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *        return (
  *            <DropDownButton text="Act">
  *                <DropDownButtonItem text="Item1" />
@@ -822,7 +766,6 @@ export declare interface DropDownButtonBlurEvent extends BaseEvent<DropDownButto
  *                <DropDownButtonItem text="Item3" />
  *            </DropDownButton>
  *        );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
@@ -1657,8 +1600,7 @@ export declare interface SplitButtonBlurEvent extends BaseEvent<SplitButtonClass
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *        return (
  *            <SplitButton text="Act">
  *                <SplitButtonItem text="Item1" />
@@ -1666,7 +1608,6 @@ export declare interface SplitButtonBlurEvent extends BaseEvent<SplitButtonClass
  *                <SplitButtonItem text="Item3" />
  *            </SplitButton>
  *        );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
@@ -2000,8 +1941,7 @@ declare interface SplitButtonState {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *       return (
  *          <Toolbar>
  *              <ToolbarItem>
@@ -2020,66 +1960,11 @@ declare interface SplitButtonState {
  *              </ToolbarItem>
  *          </Toolbar>
  *       );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare class Toolbar extends React_2.Component<ToolbarProps> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        tabIndex: PropTypes.Requireable<number>;
-        dir: PropTypes.Requireable<string>;
-        keyboardNavigation: PropTypes.Requireable<boolean>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-        role: PropTypes.Requireable<string>;
-        onResize: PropTypes.Requireable<(...args: any[]) => any>;
-        buttons: PropTypes.Requireable<(string | null | undefined)[]>;
-        size: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        tabIndex: number;
-        size: string;
-    };
-    private _element;
-    private offsetHeight;
-    private offsetWidth;
-    private buttons;
-    private focusedSelector;
-    constructor(props: ToolbarProps);
-    private get selectors();
-    private get focusedIndex();
-    /**
-     * Returns the HTML element of the Toolbar component.
-     */
-    get element(): HTMLDivElement | null;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private setTabIndex;
-    private onKeyDown;
-    private focusButton;
-    private onWindowResize;
-}
+export declare const Toolbar: React_2.ForwardRefExoticComponent<ToolbarProps & React_2.RefAttributes<ToolbarHandle>>;
 
 /**
  * @hidden
@@ -2087,26 +1972,34 @@ export declare class Toolbar extends React_2.Component<ToolbarProps> {
 export declare const toolbarButtons: string[];
 
 /**
- * Represents the KendoReact ToolbarItem component.
- * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
- * ([see example]({% slug content_toolbar %})).
+ * Represents the Toolbar handle.
  */
-export declare class ToolbarItem extends React_2.PureComponent<ToolbarItemProps> {
+export declare interface ToolbarHandle {
     /**
-     * @hidden
+     * Represents the element of the Toolbar component.
      */
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-    };
-    private _element;
+    element: HTMLDivElement | null;
     /**
-     * Returns the HTML element of the ToolbarItem component.
+     * Represents the props of the Toolbar component.
      */
-    get element(): HTMLSpanElement | null;
+    props: Readonly<ToolbarProps>;
+}
+
+/**
+ * Represents the KendoReact ToolbarItem component.
+ * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
+ * ([see example]({% slug content_toolbar %})).
+ */
+export declare const ToolbarItem: React_2.ForwardRefExoticComponent<ToolbarItemProps & React_2.RefAttributes<ToolbarItemHandle>>;
+
+/**
+ * Represents the ToolbarItem handle.
+ */
+export declare interface ToolbarItemHandle {
     /**
-     * @hidden
+     * Returns the HTML element of the ToolbarItem component.
      */
-    render(): JSX_2.Element;
+    element: HTMLDivElement | null;
 }
 
 /**
@@ -2193,7 +2086,7 @@ export declare interface ToolbarResizeEvent {
     /**
      * An event target.
      */
-    target: Toolbar;
+    target: ToolbarHandle;
     /**
      * The `offsetWidth` event of the Toolbar.
      */
@@ -2208,12 +2101,7 @@ export declare interface ToolbarResizeEvent {
     nativeEvent: any;
 }
 
-export declare class ToolbarSeparator extends React_2.PureComponent<ToolbarSeparatorProps> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => JSX_2.Element;
 
 /**
  * Represents the KendoReact Toolbar Separator component.

package/index.d.ts

@@ -20,88 +20,18 @@ import * as React_2 from 'react';
 import { RefAttributes } from 'react';
 import { SVGIcon } from '@progress/kendo-react-common';
 
-export declare class Button extends React_2.Component<ButtonProps, ButtonState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        selected: PropTypes.Requireable<boolean>;
-        togglable: 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>;
-        imageAlt: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | null>;
-        rounded: PropTypes.Requireable<string | null>;
-        fillMode: PropTypes.Requireable<string | null>;
-        themeColor: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        togglable: boolean;
-        size: string;
-        rounded: string;
-        fillMode: string;
-        themeColor: string;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: ButtonState;
-    private _selectedTemp?;
-    private _element;
-    /**
-     * Gets the DOM element of the Button component.
-     */
-    get element(): HTMLButtonElement | null;
-    /**
-     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
-     * Otherwise, returns `false`.
-     */
-    get selected(): boolean;
-    constructor(props: ButtonProps);
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: ButtonProps, state: ButtonState): {
-        selected: boolean;
-    } | null;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private toggleIfApplicable;
-    private handleClick;
-}
+export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<ButtonHandle | null>>;
 
-export declare class ButtonGroup extends React_2.Component<ButtonGroupProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const ButtonGroup: {
+    (props: ButtonGroupProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<string>;
         dir: PropTypes.Requireable<string>;
     };
-    private _element;
-    constructor(props: ButtonGroupProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private mapButtons;
-    private renderButton;
-}
+};
 
 /**
  * Represents the properties which can be set to a ButtonGroup.
@@ -150,6 +80,21 @@ export declare interface ButtonGroupProps extends ButtonGroupInterface {
     unstyled?: ButtonsClassStructure;
 }
 
+/**
+ * @hidden
+ */
+export declare interface ButtonHandle {
+    /**
+     * Gets the DOM element of the Button component.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
+     * Otherwise, returns `false`.
+     */
+    selected: boolean;
+}
+
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -240,6 +185,7 @@ export declare interface ButtonItemProps {
     id?: string;
     textField?: string;
     className?: string;
+    unstyled?: ButtonsClassStructure;
 }
 
 /**
@@ -315,15 +261,21 @@ export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTML
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
     /**
-     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend
+     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
      * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
      */
     startIcon?: React_2.ReactNode;
     /**
-     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
+     * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend
+     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
      * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
      */
     endIcon?: React_2.ReactNode;
+    /**
+     * The unstyled option classes.
+     */
+    unstyled?: ButtonsClassStructure;
 }
 
 /**
@@ -354,13 +306,6 @@ export declare interface ButtonsPopupSettings {
     onClose?: (event: PopupCloseEvent) => void;
 }
 
-/**
- * @hidden
- */
-declare interface ButtonState {
-    selected: boolean;
-}
-
 /**
  * Represents the Chip component.
  */
@@ -813,8 +758,7 @@ export declare interface DropDownButtonBlurEvent extends BaseEvent<DropDownButto
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *        return (
  *            <DropDownButton text="Act">
  *                <DropDownButtonItem text="Item1" />
@@ -822,7 +766,6 @@ export declare interface DropDownButtonBlurEvent extends BaseEvent<DropDownButto
  *                <DropDownButtonItem text="Item3" />
  *            </DropDownButton>
  *        );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
@@ -1657,8 +1600,7 @@ export declare interface SplitButtonBlurEvent extends BaseEvent<SplitButtonClass
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *        return (
  *            <SplitButton text="Act">
  *                <SplitButtonItem text="Item1" />
@@ -1666,7 +1608,6 @@ export declare interface SplitButtonBlurEvent extends BaseEvent<SplitButtonClass
  *                <SplitButtonItem text="Item3" />
  *            </SplitButton>
  *        );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
@@ -2000,8 +1941,7 @@ declare interface SplitButtonState {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    render() {
+ * const App = () => {
  *       return (
  *          <Toolbar>
  *              <ToolbarItem>
@@ -2020,66 +1960,11 @@ declare interface SplitButtonState {
  *              </ToolbarItem>
  *          </Toolbar>
  *       );
- *    }
  * }
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare class Toolbar extends React_2.Component<ToolbarProps> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        tabIndex: PropTypes.Requireable<number>;
-        dir: PropTypes.Requireable<string>;
-        keyboardNavigation: PropTypes.Requireable<boolean>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-        role: PropTypes.Requireable<string>;
-        onResize: PropTypes.Requireable<(...args: any[]) => any>;
-        buttons: PropTypes.Requireable<(string | null | undefined)[]>;
-        size: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        tabIndex: number;
-        size: string;
-    };
-    private _element;
-    private offsetHeight;
-    private offsetWidth;
-    private buttons;
-    private focusedSelector;
-    constructor(props: ToolbarProps);
-    private get selectors();
-    private get focusedIndex();
-    /**
-     * Returns the HTML element of the Toolbar component.
-     */
-    get element(): HTMLDivElement | null;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private setTabIndex;
-    private onKeyDown;
-    private focusButton;
-    private onWindowResize;
-}
+export declare const Toolbar: React_2.ForwardRefExoticComponent<ToolbarProps & React_2.RefAttributes<ToolbarHandle>>;
 
 /**
  * @hidden
@@ -2087,26 +1972,34 @@ export declare class Toolbar extends React_2.Component<ToolbarProps> {
 export declare const toolbarButtons: string[];
 
 /**
- * Represents the KendoReact ToolbarItem component.
- * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
- * ([see example]({% slug content_toolbar %})).
+ * Represents the Toolbar handle.
  */
-export declare class ToolbarItem extends React_2.PureComponent<ToolbarItemProps> {
+export declare interface ToolbarHandle {
     /**
-     * @hidden
+     * Represents the element of the Toolbar component.
      */
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-    };
-    private _element;
+    element: HTMLDivElement | null;
     /**
-     * Returns the HTML element of the ToolbarItem component.
+     * Represents the props of the Toolbar component.
      */
-    get element(): HTMLSpanElement | null;
+    props: Readonly<ToolbarProps>;
+}
+
+/**
+ * Represents the KendoReact ToolbarItem component.
+ * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
+ * ([see example]({% slug content_toolbar %})).
+ */
+export declare const ToolbarItem: React_2.ForwardRefExoticComponent<ToolbarItemProps & React_2.RefAttributes<ToolbarItemHandle>>;
+
+/**
+ * Represents the ToolbarItem handle.
+ */
+export declare interface ToolbarItemHandle {
     /**
-     * @hidden
+     * Returns the HTML element of the ToolbarItem component.
      */
-    render(): JSX_2.Element;
+    element: HTMLDivElement | null;
 }
 
 /**
@@ -2193,7 +2086,7 @@ export declare interface ToolbarResizeEvent {
     /**
      * An event target.
      */
-    target: Toolbar;
+    target: ToolbarHandle;
     /**
      * The `offsetWidth` event of the Toolbar.
      */
@@ -2208,12 +2101,7 @@ export declare interface ToolbarResizeEvent {
     nativeEvent: any;
 }
 
-export declare class ToolbarSeparator extends React_2.PureComponent<ToolbarSeparatorProps> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => JSX_2.Element;
 
 /**
  * Represents the KendoReact Toolbar Separator component.

package/index.mjs

@@ -22,9 +22,13 @@ import { ChipList as N } from "./Chip/ChipList.mjs";
 import { FloatingActionButton as $ } from "./FloatingActionButton/FloatingActionButton.mjs";
 import { FloatingActionButtonItem as H } from "./FloatingActionButton/FloatingActionButtonItem.mjs";
 import { withIdHOC as o } from "@progress/kendo-react-common";
-const p = o(r);
+const p = o(
+  r
+);
 p.displayName = "KendoReactDropDownButton";
-const n = o(t);
+const n = o(
+  t
+);
 n.displayName = "KendoReactSplitButton";
 export {
   l as Button,