@progress/kendo-react-listbox 10.2.0-develop.5 → 10.2.0-develop.7

package/index.d.mts

@@ -64,10 +64,20 @@ export declare interface ListBoxKeyDownEvent extends BaseEvent<ListBox_2> {
 export declare interface ListBoxProps {
     /**
      * Sets a `class` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox className="custom-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets a `id` of the ListBox container.
+     * Sets an `id` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox id="listbox-id" />
+     * ```
      */
     id?: string;
     /**
@@ -80,80 +90,173 @@ export declare interface ListBoxProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ListBox size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
      * Specifies the styles which are set to the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox style={{ width: '300px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Set the data of the ListBox.
+     * Sets the data of the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
      */
     data: Array<any>;
     /**
      * Makes the items of the ListBox draggable. The items are draggable by default.
+     *
+     * @example
+     * ```jsx
+     * <ListBox draggable={false} />
+     * ```
      */
     draggable?: boolean;
     /**
-     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
+     * Sets the selected field of the ListBox. Based on the value of this field, an item will be selected or not.
+     *
+     * @example
+     * ```jsx
+     * <ListBox selectedField="isSelected" />
+     * ```
      */
     selectedField?: string;
     /**
      * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <ListBox textField="name" />
+     * ```
      */
     textField: string;
     /**
-     * The field that be used during form submit. Defaults to the textField if not set.
+     * The field that will be used during form submission. Defaults to the `textField` if not set.
+     *
+     * @example
+     * ```jsx
+     * <ListBox valueField="id" />
+     * ```
      */
     valueField?: string;
     /**
      * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
-     * * The possible values are:
-     * * `top`
-     * * `bottom`
-     * * `left`
-     * * `right` (Default)
-     * * `none`
+     *
+     * The possible values are:
+     * - `top`
+     * - `bottom`
+     * - `left`
+     * - `right` (Default)
+     * - `none`
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbarPosition="top" />
+     * ```
      */
     toolbarPosition?: toolbarPosition | string;
     /**
      * Renders a toolbar component next to the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbar={CustomToolbar} />
+     * ```
      */
     toolbar?: null | ComponentType<any>;
     /**
      * Defines the component that will be rendered for each item of the data collection.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     *
+     * <ListBox item={CustomItem} />
+     * ```
      */
     item?: React.ComponentType<any>;
     /**
      * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemClick={(event) => console.log(event.item)} />
+     * ```
      */
     onItemClick?: (event: ListBoxItemClickEvent) => void;
     /**
      * Fires when an item from the ListBox is selected. Contains the selected item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemSelect={(event) => console.log(event.item)} />
+     * ```
      */
     onItemSelect?: (event: ListBoxItemSelectEvent) => void;
     /**
-     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
+     * Fires on keydown over the ListBox list items. It can be used to add extra keyboard navigation options.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyDown={(event) => console.log(event.keyCode)} />
+     * ```
      */
     onKeyDown?: (event: ListBoxKeyDownEvent) => void;
     /**
-     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
+     * Fires when the user starts to drag an item from the ListBox. The event contains information about the item that is being dragged.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragStart={(event) => console.log(event.item)} />
+     * ```
      */
     onDragStart?: (event: ListBoxDragEvent) => void;
     /**
-     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
+     * Fires when the user drags over an item from the ListBox. The event contains information about the item that is dragged over.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragOver={(event) => console.log(event.item)} />
+     * ```
      */
     onDragOver?: (event: ListBoxDragEvent) => void;
     /**
-     * Fires when an the user drops an item. The event contains information for the drop target item.
+     * Fires when the user drops an item. The event contains information about the drop target item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDrop={(event) => console.log(event.item)} />
+     * ```
      */
     onDrop?: (event: ListBoxDragEvent) => void;
     /**
      * Fires when a dragged element or text selection leaves the ListBox element.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragLeave={(event) => console.log(event.item)} />
+     * ```
      */
     onDragLeave?: (event: ListBoxDragLeaveEvent) => void;
     /**
-     * Fires when keyboard navigation action is triggered.
+     * Fires when a keyboard navigation action is triggered.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyboardNavigate={(event) => console.log(event.item)} />
+     * ```
      */
     onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
 }

package/index.d.ts

@@ -64,10 +64,20 @@ export declare interface ListBoxKeyDownEvent extends BaseEvent<ListBox_2> {
 export declare interface ListBoxProps {
     /**
      * Sets a `class` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox className="custom-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets a `id` of the ListBox container.
+     * Sets an `id` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox id="listbox-id" />
+     * ```
      */
     id?: string;
     /**
@@ -80,80 +90,173 @@ export declare interface ListBoxProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ListBox size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
      * Specifies the styles which are set to the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox style={{ width: '300px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Set the data of the ListBox.
+     * Sets the data of the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
      */
     data: Array<any>;
     /**
      * Makes the items of the ListBox draggable. The items are draggable by default.
+     *
+     * @example
+     * ```jsx
+     * <ListBox draggable={false} />
+     * ```
      */
     draggable?: boolean;
     /**
-     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
+     * Sets the selected field of the ListBox. Based on the value of this field, an item will be selected or not.
+     *
+     * @example
+     * ```jsx
+     * <ListBox selectedField="isSelected" />
+     * ```
      */
     selectedField?: string;
     /**
      * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <ListBox textField="name" />
+     * ```
      */
     textField: string;
     /**
-     * The field that be used during form submit. Defaults to the textField if not set.
+     * The field that will be used during form submission. Defaults to the `textField` if not set.
+     *
+     * @example
+     * ```jsx
+     * <ListBox valueField="id" />
+     * ```
      */
     valueField?: string;
     /**
      * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
-     * * The possible values are:
-     * * `top`
-     * * `bottom`
-     * * `left`
-     * * `right` (Default)
-     * * `none`
+     *
+     * The possible values are:
+     * - `top`
+     * - `bottom`
+     * - `left`
+     * - `right` (Default)
+     * - `none`
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbarPosition="top" />
+     * ```
      */
     toolbarPosition?: toolbarPosition | string;
     /**
      * Renders a toolbar component next to the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbar={CustomToolbar} />
+     * ```
      */
     toolbar?: null | ComponentType<any>;
     /**
      * Defines the component that will be rendered for each item of the data collection.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     *
+     * <ListBox item={CustomItem} />
+     * ```
      */
     item?: React.ComponentType<any>;
     /**
      * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemClick={(event) => console.log(event.item)} />
+     * ```
      */
     onItemClick?: (event: ListBoxItemClickEvent) => void;
     /**
      * Fires when an item from the ListBox is selected. Contains the selected item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemSelect={(event) => console.log(event.item)} />
+     * ```
      */
     onItemSelect?: (event: ListBoxItemSelectEvent) => void;
     /**
-     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
+     * Fires on keydown over the ListBox list items. It can be used to add extra keyboard navigation options.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyDown={(event) => console.log(event.keyCode)} />
+     * ```
      */
     onKeyDown?: (event: ListBoxKeyDownEvent) => void;
     /**
-     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
+     * Fires when the user starts to drag an item from the ListBox. The event contains information about the item that is being dragged.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragStart={(event) => console.log(event.item)} />
+     * ```
      */
     onDragStart?: (event: ListBoxDragEvent) => void;
     /**
-     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
+     * Fires when the user drags over an item from the ListBox. The event contains information about the item that is dragged over.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragOver={(event) => console.log(event.item)} />
+     * ```
      */
     onDragOver?: (event: ListBoxDragEvent) => void;
     /**
-     * Fires when an the user drops an item. The event contains information for the drop target item.
+     * Fires when the user drops an item. The event contains information about the drop target item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDrop={(event) => console.log(event.item)} />
+     * ```
      */
     onDrop?: (event: ListBoxDragEvent) => void;
     /**
      * Fires when a dragged element or text selection leaves the ListBox element.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragLeave={(event) => console.log(event.item)} />
+     * ```
      */
     onDragLeave?: (event: ListBoxDragLeaveEvent) => void;
     /**
-     * Fires when keyboard navigation action is triggered.
+     * Fires when a keyboard navigation action is triggered.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyboardNavigate={(event) => console.log(event.item)} />
+     * ```
      */
     onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listbox",
-  "version": "10.2.0-develop.5",
+  "version": "10.2.0-develop.7",
   "description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,9 +26,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-buttons": "10.2.0-develop.5",
-    "@progress/kendo-react-common": "10.2.0-develop.5",
-    "@progress/kendo-react-intl": "10.2.0-develop.5",
+    "@progress/kendo-react-buttons": "10.2.0-develop.7",
+    "@progress/kendo-react-common": "10.2.0-develop.7",
+    "@progress/kendo-react-intl": "10.2.0-develop.7",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"