@progress/kendo-react-dropdowns 10.2.0-develop.6 → 10.2.0-develop.8

package/index.d.ts

@@ -121,88 +121,193 @@ export declare interface AutoCompleteOpenEvent extends OpenEvent<AutoComplete> {
 export declare interface AutoCompleteProps extends FormComponentProps {
     /**
      * Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete data={['Apple', 'Orange', 'Banana']} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the opened and closed state of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
      * The styles that are applied to the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete style={{ width: '300px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete value="Apple" />
+     * ```
      */
     value?: string;
     /**
      * Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete defaultValue="Orange" />
+     * ```
      */
     defaultValue?: string;
     /**
      * Sets additional classes to the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * By default, the AutoComplete renders a button on hovering over the component, which resets the value.
      * If `clearButton` is set to `false`, the button will not be rendered.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete clearButton={false} />
+     * ```
      */
     clearButton?: boolean;
     /**
      * The hint that is displayed when the AutoComplete is empty.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete placeholder="Type here..." />
+     * ```
      */
     placeholder?: string;
     /**
      * Sets the read-only state of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete readonly={true} />
+     * ```
      */
     readonly?: boolean;
     /**
      * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete suggest={true} />
+     * ```
      */
     suggest?: boolean | string;
     /**
      * Sets the disabled state of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `accessKey` of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete accessKey="a" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete textField="name" />
+     * ```
      */
     textField?: string;
     /**
      * Renders a floating label for the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete label="Search" />
+     * ```
      */
     label?: string;
     /**
      * Configures the popup of the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete popupSettings={{ animate: true }} />
+     * ```
      */
     popupSettings?: DropDownsPopupSettings;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete id="autocomplete" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete ariaDescribedBy="description" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete ariaLabelledBy="label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
@@ -211,7 +316,7 @@ export declare interface AutoCompleteProps extends FormComponentProps {
      * Default functionality returns the first item which starts with the input text.
      *
      * @example
-     * ```jsx-no-run
+     * ```jsx
      * const focusedItemIndex = (data, inputText, textField) => {
      *     let text = inputText.toLowerCase();
      *     return data.findIndex(item =>
@@ -224,42 +329,92 @@ export declare interface AutoCompleteProps extends FormComponentProps {
     focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
     /**
      * Fires each time the popup of the AutoComplete is about to open.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete onOpen={(event) => console.log('Popup opened', event)} />
+     * ```
      */
     onOpen?: (event: AutoCompleteOpenEvent) => void;
     /**
      * Fires each time the popup of the AutoComplete is about to close.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete onClose={(event) => console.log('Popup closed', event)} />
+     * ```
      */
     onClose?: (event: AutoCompleteCloseEvent) => void;
     /**
      * Fires each time the user focuses the AutoComplete.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete onFocus={(event) => console.log('Focused', event)} />
+     * ```
      */
     onFocus?: (event: AutoCompleteFocusEvent) => void;
     /**
      * Fires each time the AutoComplete gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete onBlur={(event) => console.log('Blurred', event)} />
+     * ```
      */
     onBlur?: (event: AutoCompleteBlurEvent) => void;
     /**
      * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete onChange={(event) => console.log('Value changed', event)} />
+     * ```
      */
     onChange?: (event: AutoCompleteChangeEvent) => void;
     /**
      * Fires when the AutoComplete input element is about to be rendered. Use it to override the default appearance of the component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete valueRender={(rendering) => <span>{rendering}</span>} />
+     * ```
      */
     valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
     /**
      * Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-items)). Used to override the default appearance of the list items.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
     /**
      * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-no-data)). Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete listNoDataRender={(element) => <div>No data available</div>} />
+     * ```
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
     /**
      * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete header={<div>Header</div>} />
+     * ```
      */
     header?: React.ReactNode;
     /**
      * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete footer={<div>Footer</div>} />
+     * ```
      */
     footer?: React.ReactNode;
     /**
@@ -272,6 +427,11 @@ export declare interface AutoCompleteProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete size="small" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -285,6 +445,11 @@ export declare interface AutoCompleteProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete rounded="large" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -297,18 +462,38 @@ export declare interface AutoCompleteProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Sets the data item field that represents the start of a group. Applicable to objects data.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete groupField="category" />
+     * ```
      */
     groupField?: string;
     /**
      * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
     /**
      * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
+     * ```
      */
     groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
     /**
@@ -317,31 +502,66 @@ export declare interface AutoCompleteProps extends FormComponentProps {
     list?: any;
     /**
      * Sets the key for comparing the data items of the AutoComplete. If `dataItemKey` is not set, the AutoComplete compares the items by reference.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete adaptiveTitle="Select an item" />
+     * ```
      */
     adaptiveTitle?: string;
     /**
      * Defines if AutoComplete's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete skipDisabledItems={false} />
+     * ```
      */
     skipDisabledItems?: boolean;
     /**
      * Sets a custom prefix to the AutoComplete component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete prefix={<span>Prefix</span>} />
+     * ```
      */
     prefix?: CustomComponent<any>;
     /**
      * Sets a custom suffix to the AutoComplete component.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete suffix={<span>Suffix</span>} />
+     * ```
      */
     suffix?: CustomComponent<any>;
     /**
      * Sets the HTML attributes of the inner focusable input element.
      * Attributes which are essential for certain component functionalities cannot be changed.
+     *
+     * @example
+     * ```jsx
+     * <AutoComplete inputAttributes={{ maxLength: 10 }} />
+     * ```
      */
     inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -684,98 +904,218 @@ export declare interface ComboBoxPageChangeEvent extends PageChangeEvent<ComboBo
 export declare interface ComboBoxProps extends FormComponentProps {
     /**
      * Sets the data of the ComboBox ([more information and examples]({% slug binding_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox data={['Option1', 'Option2', 'Option3']} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the opened and closed state of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
      * The styles that are applied to the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox style={{ width: '250px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox value="Option1" />
+     * ```
      */
     value?: any;
     /**
      * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox defaultValue="Option2" />
+     * ```
      */
     defaultValue?: any;
     /**
      * Sets additional classes to the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox iconClassName="custom-icon-class" />
+     * ```
      */
     iconClassName?: string;
     /**
      * Sets the specified SVG icon.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox svgIcon={{ name: 'custom-icon' }} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
      * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox clearButton={true} />
+     * ```
      */
     clearButton?: boolean;
     /**
      * The hint that is displayed when the ComboBox is empty.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox placeholder="Select an option" />
+     * ```
      */
     placeholder?: string;
     /**
      * Sets the title attribute to the underlying input element of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox title="ComboBox Title" />
+     * ```
      */
     title?: string;
     /**
      * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox suggest={true} />
+     * ```
      */
     suggest?: boolean;
     /**
      * Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox allowCustom={true} />
+     * ```
      */
     allowCustom?: boolean;
     /**
      * Sets the disabled state of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
      * Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox filter="Option" />
+     * ```
      */
     filter?: string | null;
     /**
-     * Sets the value of the adaptive filtering input of the of ComboBox.
+     * Sets the value of the adaptive filtering input of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox adaptiveFilter="Option" />
+     * ```
      */
     adaptiveFilter?: string;
     /**
      * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the ComboBox.
-     */
-    tabIndex?: number;
-    /**
+     *
+     * @example
+     * ```jsx
+     * <ComboBox tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
      * Specifies the `accessKey` of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox accessKey="k" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox textField="name" />
+     * ```
      */
     textField?: string;
     /**
      * Sets the data item field that represents the start of a group. Applicable to objects data.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox groupField="category" />
+     * ```
      */
     groupField?: string;
     /**
      * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox groupMode="classic" />
+     * ```
      */
     groupMode?: string;
     /**
@@ -784,35 +1124,75 @@ export declare interface ComboBoxProps extends FormComponentProps {
     isMultiColumn?: boolean;
     /**
      * Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
      * Renders a floating label for the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox label="Select an option" />
+     * ```
      */
     label?: string;
     /**
      * Configures the popup of the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox popupSettings={{ animate: true }} />
+     * ```
      */
     popupSettings?: DropDownsPopupSettings;
     /**
      * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox virtual={{ pageSize: 20 }} />
+     * ```
      */
     virtual?: VirtualizationSettings;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox id="comboBoxId" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox ariaDescribedBy="descriptionId" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox ariaLabelledBy="labelId" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * The accessible label of the component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox ariaLabel="ComboBox Label" />
+     * ```
      */
     ariaLabel?: string;
     /**
@@ -821,7 +1201,7 @@ export declare interface ComboBoxProps extends FormComponentProps {
      * Default functionality returns the first item which starts with the input text.
      *
      * @example
-     * ```jsx-no-run
+     * ```jsx
      * const focusedItemIndex = (data, inputText, textField) => {
      *     let text = inputText.toLowerCase();
      *     return data.findIndex(item =>
@@ -834,50 +1214,110 @@ export declare interface ComboBoxProps extends FormComponentProps {
     focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
     /**
      * Fires each time the popup of the ComboBox is about to open.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onOpen={(event) => console.log('Popup opened', event)} />
+     * ```
      */
     onOpen?: (event: ComboBoxOpenEvent) => void;
     /**
      * Fires each time the popup of the ComboBox is about to close.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onClose={(event) => console.log('Popup closed', event)} />
+     * ```
      */
     onClose?: (event: ComboBoxCloseEvent) => void;
     /**
      * Fires each time the user focuses the ComboBox.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onFocus={(event) => console.log('ComboBox focused', event)} />
+     * ```
      */
     onFocus?: (event: ComboBoxFocusEvent) => void;
     /**
      * Fires each time the ComboBox gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onBlur={(event) => console.log('ComboBox blurred', event)} />
+     * ```
      */
     onBlur?: (event: ComboBoxBlurEvent) => void;
     /**
      * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onChange={(event) => console.log('Value changed', event)} />
+     * ```
      */
     onChange?: (event: ComboBoxChangeEvent) => void;
     /**
      * Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onFilterChange={(event) => console.log('Filter changed', event)} />
+     * ```
      */
     onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
     /**
      * Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox onPageChange={(event) => console.log('Page changed', event)} />
+     * ```
      */
     onPageChange?: (event: ComboBoxPageChangeEvent) => void;
     /**
      * Fires when the ComboBox input element is about to be rendered. Use it to override the default appearance of the component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox valueRender={(rendering) => <span>{rendering}</span>} />
+     * ```
      */
     valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
     /**
      * Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
     /**
      * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
     /**
      * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.group}</div>} />
+     * ```
      */
     groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
     /**
      * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox listNoDataRender={(element) => <div>No data available</div>} />
+     * ```
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
     /**
@@ -888,10 +1328,20 @@ export declare interface ComboBoxProps extends FormComponentProps {
     }) => void;
     /**
      * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox header={<div>Header Content</div>} />
+     * ```
      */
     header?: React.ReactNode;
     /**
      * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox footer={<div>Footer Content</div>} />
+     * ```
      */
     footer?: React.ReactNode;
     /**
@@ -912,6 +1362,11 @@ export declare interface ComboBoxProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ComboBox size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -925,6 +1380,11 @@ export declare interface ComboBoxProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ComboBox rounded="full" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -937,26 +1397,56 @@ export declare interface ComboBoxProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <ComboBox fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox adaptiveTitle="Adaptive Popup Title" />
+     * ```
      */
     adaptiveTitle?: string;
     /**
      * Defines if ComboBox's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox skipDisabledItems={false} />
+     * ```
      */
     skipDisabledItems?: boolean;
     /**
      * Sets a custom prefix to the ComboBox component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox prefix={<span>Prefix</span>} />
+     * ```
      */
     prefix?: CustomComponent<any>;
     /**
      * Sets a custom suffix to the ComboBox component.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox suffix={<span>Suffix</span>} />
+     * ```
      */
     suffix?: CustomComponent<any>;
     /**
@@ -966,6 +1456,11 @@ export declare interface ComboBoxProps extends FormComponentProps {
     /**
      * Sets the HTML attributes of the inner focusable input element.
      * Attributes which are essential for certain component functionalities cannot be changed.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox inputAttributes={{ maxLength: 10 }} />
+     * ```
      */
     inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -1502,93 +1997,198 @@ export declare interface DropDownListPageChangeEvent extends PageChangeEvent<Dro
 export declare interface DropDownListProps extends FormComponentProps {
     /**
      * Sets the data of the DropDownList ([see example]({% slug binding_dropdownlist %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList data={['Item1', 'Item2', 'Item3']} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the text of the default empty item. The type of the defined value has to match the data type.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList defaultItem="Select an item" />
+     * ```
      */
     defaultItem?: any;
     /**
      * Sets the delay before an item search is performed. When filtration is disabled, use this option.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList delay={300} />
+     * ```
      */
     delay?: number;
     /**
      * Enables a case-insensitive search. When filtering is disabled, use this option.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList ignoreCase={true} />
+     * ```
      */
     ignoreCase?: boolean;
     /**
      * Sets the opened and closed state of the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
      * The styles that are applied to the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList style={{ width: '200px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the value of the DropDownList ([see example]({% slug binding_dropdownlist %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList value="Item1" />
+     * ```
      */
     value?: any;
     /**
      * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList defaultValue="Item1" />
+     * ```
      */
     defaultValue?: any;
     /**
      * Sets additional classes to the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList iconClassName="custom-icon-class" />
+     * ```
      */
     iconClassName?: string;
     /**
      * Sets the specified SVG icon.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList svgIcon={{ name: 'custom-icon' }} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
      * Sets the title attribute to the DropDownList DOM element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList title="Dropdown Title" />
+     * ```
      */
     title?: string;
     /**
      * Sets the disabled state of the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
      * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList filter="search text" />
+     * ```
      */
     filter?: string;
     /**
      * Sets the loading state of the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `accessKey` of the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList accessKey="d" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text ([see example]({% slug defaultitem_dropdownlist %})). If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList textField="name" />
+     * ```
      */
     textField?: string;
     /**
      * Sets the key for comparing the data items of the DropDownList. If `dataItemKey` is not set, the DropDownList compares the items by reference ([see example]({% slug binding_dropdownlist %}#toc-datasets-of-objects)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
      * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element.
      *
      * @example
-     * ```jsx-no-run
+     * ```jsx
      * class App extends React.Component {
      *    render() {
      *       return (
@@ -1608,31 +2208,66 @@ export declare interface DropDownListProps extends FormComponentProps {
     valueMap?: (value: any) => any;
     /**
      * Renders a floating label for the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList label="Dropdown Label" />
+     * ```
      */
     label?: string;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList id="dropdown-id" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList ariaDescribedBy="error-message-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * The accessible label of the component. By default is set to value of `label` prop.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList ariaLabel="Accessible Label" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Configures the popup of the DropDownList.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
+     *
+     * @example
+     * ```jsx
+     * <DropDownList popupSettings={{ animate: true }} />
+     * ```
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
      * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList virtual={{ pageSize: 20 }} />
+     * ```
      */
     virtual?: VirtualizationSettings;
     /**
@@ -1641,7 +2276,7 @@ export declare interface DropDownListProps extends FormComponentProps {
      * Default functionality returns the first item which starts with the input text.
      *
      * @example
-     * ```jsx-no-run
+     * ```jsx
      * const focusedItemIndex = (data, inputText, textField) => {
      *     let text = inputText.toLowerCase();
      *     return data.findIndex(item =>
@@ -1654,59 +2289,129 @@ export declare interface DropDownListProps extends FormComponentProps {
     focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
     /**
      * Fires each time the popup of the DropDownList is about to open.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onOpen={(event) => console.log('Popup opened')} />
+     * ```
      */
     onOpen?: (event: DropDownListOpenEvent) => void;
     /**
      * Fires each time the popup of the DropDownList is about to close.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onClose={(event) => console.log('Popup closed')} />
+     * ```
      */
     onClose?: (event: DropDownListCloseEvent) => void;
     /**
      * Fires each time the user focuses the DropDownList.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onFocus={(event) => console.log('Focused')} />
+     * ```
      */
     onFocus?: (event: DropDownListFocusEvent) => void;
     /**
      * Fires each time the DropDownList gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onBlur={(event) => console.log('Blurred')} />
+     * ```
      */
     onBlur?: (event: DropDownListBlurEvent) => void;
     /**
      * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onChange={(event) => console.log('Value changed')} />
+     * ```
      */
     onChange?: (event: DropDownListChangeEvent) => void;
     /**
      * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onFilterChange={(event) => console.log('Filter changed')} />
+     * ```
      */
     onFilterChange?: (event: DropDownListFilterChangeEvent) => void;
     /**
      * Fires when both the virtual scrolling of the DropDownList is enabled and the component requires data for another page ([see example]({% slug virtualization_dropdownlist %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList onPageChange={(event) => console.log('Page changed')} />
+     * ```
      */
     onPageChange?: (event: DropDownListPageChangeEvent) => void;
     /**
      * Fires when a DropDownList item is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-items)). Used to override the default appearance of the list items.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
     /**
      * Fires when the element which renders the value is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-values)). Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList valueRender={(element, value) => <span>{value}</span>} />
+     * ```
      */
     valueRender?: (element: React.ReactElement<HTMLSpanElement>, value: any) => React.ReactNode;
     /**
      * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-no-data)). Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList listNoDataRender={(element) => <div>No data available</div>} />
+     * ```
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
     /**
      * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList header={<div>Header Content</div>} />
+     * ```
      */
     header?: React.ReactNode;
     /**
      * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownList footer={<div>Footer Content</div>} />
+     * ```
      */
     footer?: React.ReactNode;
     /**
      * Specifies the `name` property of the `select` DOM element.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList name="dropdown-name" />
+     * ```
      */
     name?: string;
     /**
      * If set to `false`, the DropDownList will not navigate over its data through left and right keys.
      * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList leftRightKeysNavigation={false} />
+     * ```
      */
     leftRightKeysNavigation?: boolean;
     /**
@@ -1719,6 +2424,11 @@ export declare interface DropDownListProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <DropDownList size="small" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -1732,6 +2442,11 @@ export declare interface DropDownListProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <DropDownList rounded="large" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -1744,26 +2459,56 @@ export declare interface DropDownListProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <DropDownList fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList adaptiveTitle="Adaptive Title" />
+     * ```
      */
     adaptiveTitle?: string;
     /**
      * Sets the data item field that represents the start of a group. Applicable to objects data.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList groupField="category" />
+     * ```
      */
     groupField?: string;
     /**
      * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
+     * ```
      */
     groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
     /**
      * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
+     * ```
      */
     groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
     /**
@@ -1776,11 +2521,13 @@ export declare interface DropDownListProps extends FormComponentProps {
     groupMode?: string;
     /**
      * Defines if DropDownList's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <DropDownList skipDisabledItems={false} />
+     * ```
      */
     skipDisabledItems?: boolean;
-    /**
-     * @hidden
-     */
     /**
      * @hidden
      */
@@ -1978,166 +2725,318 @@ export declare interface DropDownTreeOpenEvent extends OpenEvent<DropDownTreeHan
 export declare interface DropDownTreeProps extends FormComponentProps {
     /**
      * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree data={[{ text: 'Parent', items: [{ text: 'Child' }] }]} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the opened state of the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
      * The styles that are applied to the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree style={{ width: '300px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
      * It can be an object from the data-tree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree value={{ text: 'Parent' }} />
+     * ```
      */
     value?: any;
     /**
      * The hint that is displayed when the DropDownTree is empty.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree placeholder="Select an item" />
+     * ```
      */
     placeholder?: string;
     /**
      * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
      * If `dataItemKey` is not set, the DropDownTree compares the items by reference.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree dataItemKey="id" />
+     * ```
      */
     dataItemKey: string;
     /**
      * Sets additional classes to the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the disabled state of the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Renders a floating label for the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree label="Select an item" />
+     * ```
      */
     label?: string;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree id="dropdown-tree" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree ariaDescribedBy="description" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree ariaLabelledBy="label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
      * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree filter="search text" />
+     * ```
      */
     filter?: string;
     /**
      * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `accessKey` of the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree accessKey="k" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree textField="name" />
+     * ```
      */
     textField: string;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree selectField="selected" />
+     * ```
      */
     selectField?: string;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree expandField="expanded" />
+     * ```
      */
     expandField?: string;
     /**
      * Specifies the name of the field which will provide an array representation of the item subitems.
      * Defaults to 'items'.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree subItemsField="children" />
+     * ```
      */
     subItemsField?: string;
     /**
      * Configures the popup of the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree popupSettings={{ animate: false }} />
+     * ```
      */
     popupSettings?: DropDownsPopupSettings;
     /**
      * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element.
      *
      * @example
-     * ```jsx-no-run
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *          <form>
-     *              <DropDownTree
-     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
-     *                  valueMap={value => value && value.id}
-     *              />
-     *              <button type="submit">Submit</button>
-     *          </form>
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```jsx
+     * <DropDownTree valueMap={value => value && value.id} />
      * ```
      */
     valueMap?: (value: any) => any;
     /**
      * Fires each time the popup of the DropDownTree is about to open.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onOpen={(event) => console.log(event)} />
+     * ```
      */
     onOpen?: (event: DropDownTreeOpenEvent) => void;
     /**
      * Fires each time the popup of the DropDownTree is about to close.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onClose={(event) => console.log(event)} />
+     * ```
      */
     onClose?: (event: DropDownTreeCloseEvent) => void;
     /**
      * Fires each time the user focuses the DropDownTree.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onFocus={(event) => console.log(event)} />
+     * ```
      */
     onFocus?: (event: DropDownTreeFocusEvent) => void;
     /**
      * Fires each time the DropDownTree gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onBlur={(event) => console.log(event)} />
+     * ```
      */
     onBlur?: (event: DropDownTreeBlurEvent) => void;
     /**
      * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onChange={(event) => console.log(event)} />
+     * ```
      */
     onChange?: (event: DropDownTreeChangeEvent) => void;
     /**
      * Fires each time the user types in the filter input
      * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)).
      * You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onFilterChange={(event) => console.log(event)} />
+     * ```
      */
     onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
     /**
      * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree onExpandChange={(event) => console.log(event)} />
+     * ```
      */
     onExpandChange?: (event: any) => void;
     /**
      * Defines the component that will be used for rendering each of the DropDownTree items
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree item={(props) => <CustomItem {...props} />} />
+     * ```
      */
     item?: React.ComponentType<ItemProps>;
     /**
      * Defines the component that will be used for rendering the selected value
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree valueHolder={(props) => <CustomValueHolder {...props} />} />
+     * ```
      */
     valueHolder?: React.ComponentType<ValueHolderProps>;
     /**
      * Defines the component that will be rendered in the DropDownTree popup when no data is available
      * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree listNoData={() => <div>No data available</div>} />
+     * ```
      */
     listNoData?: React.ComponentType<ListNoDataProps>;
     /**
@@ -2150,6 +3049,11 @@ export declare interface DropDownTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -2163,6 +3067,11 @@ export declare interface DropDownTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree rounded="full" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -2175,14 +3084,29 @@ export declare interface DropDownTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <DropDownTree adaptiveTitle="Select an item" />
+     * ```
      */
     adaptiveTitle?: string;
 }
@@ -2905,14 +3829,29 @@ export declare interface MultiSelectPageChangeEvent extends PageChangeEvent<Mult
 export declare interface MultiSelectProps extends FormComponentProps {
     /**
      * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect allowCustom={true} />
+     * ```
      */
     allowCustom?: boolean;
     /**
      * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect data={['Option1', 'Option2', 'Option3']} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the opened and closed state of the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
@@ -2920,77 +3859,135 @@ export declare interface MultiSelectProps extends FormComponentProps {
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *              <MultiSelect
-     *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
-     *                  autoClose={false}
-     *              />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * <MultiSelect autoClose={false} />
      * ```
-     *
-     * @default true
      */
     autoClose?: boolean;
     /**
      * The styles that are applied to the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect style={{ width: '300px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect value={['Option1', 'Option2']} />
+     * ```
      */
     value?: Array<any>;
     /**
      * The hint that is displayed when the MultiSelect is empty.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect placeholder="Select an option" />
+     * ```
      */
     placeholder?: string;
     /**
      * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
+     * ```
      */
     tags?: Array<TagData>;
     /**
      * Sets the key for comparing the data items of the MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
      * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect defaultValue={['Option1']} />
+     * ```
      */
     defaultValue?: Array<any>;
     /**
      * Sets additional classes to the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the disabled state of the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect id="multi-select" />
+     * ```
      */
     id?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect ariaDescribedBy="description" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Specifies the accessible label of the interactive component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect ariaLabel="MultiSelect" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect ariaLabelledBy="label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
@@ -2999,7 +3996,7 @@ export declare interface MultiSelectProps extends FormComponentProps {
      * Default functionality returns the first item which starts with the input text.
      *
      * @example
-     * ```jsx-no-run
+     * ```jsx
      * const focusedItemIndex = (data, inputText, textField) => {
      *     let text = inputText.toLowerCase();
      *     return data.findIndex(item =>
@@ -3012,90 +4009,200 @@ export declare interface MultiSelectProps extends FormComponentProps {
     focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
     /**
      * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect filter="Option" />
+     * ```
      */
     filter?: string;
     /**
      * Sets the value of the adaptive filtering input of the of MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect adaptiveFilter="Option" />
+     * ```
      */
     adaptiveFilter?: string;
     /**
      * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `accessKey` of the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect accessKey="a" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect textField="name" />
+     * ```
      */
     textField?: string;
     /**
      * Renders a floating label for the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect label="Select an option" />
+     * ```
      */
     label?: string;
     /**
      * Configures the popup of the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect popupSettings={{ animate: true }} />
+     * ```
      */
     popupSettings?: DropDownsPopupSettings;
     /**
      * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect virtual={{ pageSize: 20 }} />
+     * ```
      */
     virtual?: VirtualizationSettings;
     /**
      * Fires each time the popup of the MultiSelect is about to open.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onOpen={(event) => console.log(event)} />
+     * ```
      */
     onOpen?: (event: MultiSelectOpenEvent) => void;
     /**
      * Fires each time the popup of the MultiSelect is about to close.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onClose={(event) => console.log(event)} />
+     * ```
      */
     onClose?: (event: MultiSelectCloseEvent) => void;
     /**
      * Fires each time the user focuses the MultiSelect.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onFocus={(event) => console.log(event)} />
+     * ```
      */
     onFocus?: (event: MultiSelectFocusEvent) => void;
     /**
      * Fires each time the MultiSelect gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onBlur={(event) => console.log(event)} />
+     * ```
      */
     onBlur?: (event: MultiSelectBlurEvent) => void;
     /**
      * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onChange={(event) => console.log(event)} />
+     * ```
      */
     onChange?: (event: MultiSelectChangeEvent) => void;
     /**
      * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onCancel={(event) => console.log(event)} />
+     * ```
      */
     onCancel?: (event: MultiSelectCancelEvent) => void;
     /**
      * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onFilterChange={(event) => console.log(event)} />
+     * ```
      */
     onFilterChange?: (event: MultiSelectFilterChangeEvent) => void;
     /**
      * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect onPageChange={(event) => console.log(event)} />
+     * ```
      */
     onPageChange?: (event: MultiSelectPageChangeEvent) => void;
     /**
      * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-items)). Used to override the default appearance of the list items.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect itemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />
+     * ```
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
     /**
      * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-no-data)). Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect listNoDataRender={(element) => <div>No data available</div>} />
+     * ```
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
     /**
      * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect tagRender={(tagData, tag) => <span>{tagData.text}</span>} />
+     * ```
      */
     tagRender?: (tagData: TagData, tag: React.ReactElement<any>) => React.ReactElement<any>;
     /**
      * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect header={<div>Header</div>} />
+     * ```
      */
     header?: React.ReactNode;
     /**
      * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect footer={<div>Footer</div>} />
+     * ```
      */
     footer?: React.ReactNode;
     /**
@@ -3108,6 +4215,11 @@ export declare interface MultiSelectProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect size="small" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -3121,6 +4233,11 @@ export declare interface MultiSelectProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect rounded="large" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -3133,18 +4250,38 @@ export declare interface MultiSelectProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Sets the data item field that represents the start of a group. Applicable to objects data.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect groupField="category" />
+     * ```
      */
     groupField?: string;
     /**
      * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect groupHeaderItemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />
+     * ```
      */
     groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
     /**
      * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
+     * ```
      */
     groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
     /**
@@ -3157,27 +4294,57 @@ export declare interface MultiSelectProps extends FormComponentProps {
     groupMode?: string;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect adaptiveTitle="Select an option" />
+     * ```
      */
     adaptiveTitle?: string;
     /**
      * Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect skipDisabledItems={false} />
+     * ```
      */
     skipDisabledItems?: boolean;
     /**
      * Sets a custom prefix to the MultiSelect component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect prefix={<span>Prefix</span>} />
+     * ```
      */
     prefix?: CustomComponent<any>;
     /**
      * Sets a custom suffix to the MultiSelect component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect suffix={<span>Suffix</span>} />
+     * ```
      */
     suffix?: CustomComponent<any>;
     /**
      * Sets the HTML attributes of the inner focusable input element.
      * Attributes which are essential for certain component functionalities cannot be changed.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelect inputAttributes={{ maxLength: 10 }} />
+     * ```
      */
     inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -3381,174 +4548,344 @@ export declare interface MultiSelectTreeOpenEvent extends OpenEvent<MultiSelectT
 export declare interface MultiSelectTreeProps extends FormComponentProps {
     /**
      * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree data={[{ text: 'Node1' }, { text: 'Node2' }]} />
+     * ```
      */
     data?: any[];
     /**
      * Sets the opened state of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree opened={true} />
+     * ```
      */
     opened?: boolean;
     /**
      * The styles that are applied to the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree style={{ width: '400px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree value={['Node1']} />
+     * ```
      */
     value?: Array<any>;
     /**
      * The hint that is displayed when the MultiSelectTree is empty.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree placeholder="Select items" />
+     * ```
      */
     placeholder?: string;
     /**
      * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
      * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree dataItemKey="id" />
+     * ```
      */
     dataItemKey: string;
     /**
      * Sets additional classes to the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the disabled state of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Renders a floating label for the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree label="Select items" />
+     * ```
      */
     label?: string;
     /**
      * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree id="multi-select-tree" />
+     * ```
      */
     id?: string;
     /**
      * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
+     * ```
      */
     tags?: Array<TagData>;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree ariaDescribedBy="description" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree ariaLabelledBy="label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
      * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree filter="search text" />
+     * ```
      */
     filter?: string;
     /**
      * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree loading={true} />
+     * ```
      */
     loading?: boolean;
     /**
      * Specifies the `tabIndex` of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `accessKey` of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree accessKey="m" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree textField="name" />
+     * ```
      */
     textField: string;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree checkField="checked" />
+     * ```
      */
     checkField?: string;
     /**
-     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
+     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree checkIndeterminateField="indeterminate" />
+     * ```
      */
     checkIndeterminateField?: string;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree expandField="expanded" />
+     * ```
      */
     expandField?: string;
     /**
      * Specifies the name of the field which will provide an array representation of the item subitems.
      * Defaults to 'items'.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree subItemsField="children" />
+     * ```
      */
     subItemsField?: string;
     /**
      * Configures the popup of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree popupSettings={{ animate: true }} />
+     * ```
      */
     popupSettings?: DropDownsPopupSettings;
     /**
      * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element.
      *
      * @example
-     * ```jsx-no-run
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *          <form>
-     *              <MultiSelectTree
-     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
-     *                  valueMap={value => value && value.id}
-     *              />
-     *              <button type="submit">Submit</button>
-     *          </form>
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```jsx
+     * <MultiSelectTree valueMap={value => value && value.id} />
      * ```
      */
     valueMap?: (value: Array<any>) => any;
     /**
      * Fires each time the popup of the MultiSelectTree is about to open.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onOpen={(event) => console.log(event)} />
+     * ```
      */
     onOpen?: (event: MultiSelectTreeOpenEvent) => void;
     /**
      * Fires each time the popup of the MultiSelectTree is about to close.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onClose={(event) => console.log(event)} />
+     * ```
      */
     onClose?: (event: MultiSelectTreeCloseEvent) => void;
     /**
      * Fires each time the user focuses the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onFocus={(event) => console.log(event)} />
+     * ```
      */
     onFocus?: (event: MultiSelectTreeFocusEvent) => void;
     /**
      * Fires each time the MultiSelectTree gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onBlur={(event) => console.log(event)} />
+     * ```
      */
     onBlur?: (event: MultiSelectTreeBlurEvent) => void;
     /**
      * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onChange={(event) => console.log(event)} />
+     * ```
      */
     onChange?: (event: MultiSelectTreeChangeEvent) => void;
     /**
      * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onCancel={(event) => console.log(event)} />
+     * ```
      */
     onCancel?: (event: MultiSelectTreeCancelEvent) => void;
     /**
      * Fires each time the user types in the filter input
      * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
      * You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onFilterChange={(event) => console.log(event)} />
+     * ```
      */
     onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
     /**
      * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onExpandChange={(event) => console.log(event)} />
+     * ```
      */
     onExpandChange?: (event: any) => void;
     /**
      * Defines the component that will be used for rendering each of the MultiSelectTree items
      * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree item={(props) => <div>{props.item.text}</div>} />
+     * ```
      */
     item?: React_2.ComponentType<MultiSelectTreeItemProps>;
     /**
      * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
      * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree listNoData={() => <div>No data available</div>} />
+     * ```
      */
     listNoData?: React_2.ComponentType<MultiSelectTreeListNoDataProps>;
+    /**
+     * Defines the component that will be used for rendering each of the MultiSelectTree tags.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tag={(props) => <span>{props.tagData.text}</span>} />
+     * ```
+     */
     tag?: React_2.ComponentType<MultiSelectTreeTagProps>;
     /**
      * Configures the `size` of the MultiSelectTree.
@@ -3560,6 +4897,11 @@ export declare interface MultiSelectTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -3573,6 +4915,11 @@ export declare interface MultiSelectTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree rounded="full" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
@@ -3585,14 +4932,29 @@ export declare interface MultiSelectTreeProps extends FormComponentProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree fillMode="outline" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
      * Specifies the text that is rendered as title in the adaptive popup.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree adaptiveTitle="Select items" />
+     * ```
      */
     adaptiveTitle?: string | React_2.ReactNode;
 }