@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
110 lines (109 loc) • 5.76 kB
TypeScript
import '@ui5/webcomponents-fiori/dist/SearchItem.js';
import type { ListItemBaseClickEventDetail } from '@ui5/webcomponents/dist/ListItemBase.js';
import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
interface SearchItemAttributes {
/**
* Defines whether the search item is deletable.
* @default false
*/
deletable?: boolean;
/**
* Defines the description that appears right under the item text, if available.
*
* **Note:** Available since [v2.12.0](https://github.com/UI5/webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents-fiori**.
* @default undefined
*/
description?: string | undefined;
/**
* Defines the icon name of the search item.
* **Note:** If provided, the image slot will be ignored.
* @default undefined
*/
icon?: string | undefined;
/**
* Defines the scope of the search item
* @default undefined
*/
scopeName?: string | undefined;
/**
* Defines whether the search item is selected.
* @default false
*/
selected?: boolean;
/**
* Defines the heading text of the search item.
* @default undefined
*/
text?: string | undefined;
}
interface SearchItemDomRef extends Required<SearchItemAttributes>, Ui5DomRef {
}
interface SearchItemPropTypes extends SearchItemAttributes, Omit<CommonProps, keyof SearchItemAttributes | 'actions' | 'image' | 'onClick' | 'onDelete'> {
/**
* Defines the actionable elements.
* This slot allows placing additional interactive elements (such as buttons, icons, or tags)
* next to the delete button, providing flexible customization for various user actions.
*
* **Note:** While the slot is flexible, for consistency with design guidelines,
* it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.
*
* __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="actions"`).
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
*
* __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
* Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
*
* **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**.
*
* __Supported Node Type/s:__ `Array<HTMLElement>`
*/
actions?: UI5WCSlotsNode;
/**
* **Note:** While the slot allows the option of setting a custom avatar, to comply with the
* design guidelines, use the `ui5-avatar` with size - XS.
*
* __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="image"`).
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
*
* __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
* Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
*
* **Note:** Available since [v2.12.0](https://github.com/UI5/webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents-fiori**.
*
* __Supported Node Type/s:__ `Array<HTMLElement>`
*/
image?: UI5WCSlotsNode;
/**
* Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
*
* **Note:** The event will not be fired if the `disabled` property is set to `true`.
*
* **Note:** Available since [v2.23.0](https://github.com/UI5/webcomponents/releases/tag/v2.23.0) of **@ui5/webcomponents-fiori**.
*
* | cancelable | bubbles |
* | :--------: | :-----: |
* | ❌|✅|
*/
onClick?: (event: Ui5CustomEvent<SearchItemDomRef, ListItemBaseClickEventDetail>) => void;
/**
* Fired when delete button is pressed.
*
* | cancelable | bubbles |
* | :--------: | :-----: |
* | ❌|❌|
*/
onDelete?: (event: Ui5CustomEvent<SearchItemDomRef>) => void;
}
/**
* A `SearchItem` is a list item, used for displaying search suggestions
*
*
*
* __Note:__ This is a UI5 Web Component! [SearchItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/SearchItem) | [Repository](https://github.com/UI5/webcomponents)
*
* @since [2.9.0](https://github.com/UI5/webcomponents/releases/tag/v2.9.0) of __@ui5/webcomponents-fiori__.
* @experimental
*/
declare const SearchItem: import("react").ForwardRefExoticComponent<SearchItemPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<SearchItemDomRef>>;
export { SearchItem };
export type { SearchItemDomRef, SearchItemPropTypes };