@ui5/webcomponents-react/dist/webComponents/ExpandableText/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/ExpandableText.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';

//todo: remove once ExpandableText supports setting white-space
addCustomCSSWithScoping('ui5-expandable-text', `
:host([data-_render-whitespace]) [ui5-text]{
white-space: pre-wrap;
}`);
/**
 * The `ExpandableText` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text.
 *
 * ### Usage
 *
 * #### When to use:
 * - To accommodate long texts in limited space, for example in list items, table cell texts, or forms
 *
 * #### When not to use:
 * - The content is critical for the user. In this case use short descriptions that can fit in
 * - Strive to provide short and meaningful texts to avoid excessive number of "Show More" links on the page
 *
 * ### Responsive Behavior
 *
 * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.
 *
 * __Note:__ For compatibility reasons, `children`, `showOverflowInPopover`, and `renderWhitespace` are added by the UI5 Web Components for React wrapper and are not part of the underlying web component (`ui5-expandable-text`).
 * These props will be removed in the next major release (not yet planned); see their deprecation notices for alternatives.
 *
 * __Note:__ This is a UI5 Web Component! [ExpandableText UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ExpandableText) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [2.6.0](https://github.com/UI5/webcomponents/releases/tag/v2.6.0) of __@ui5/webcomponents__.
 */
const ExpandableText = withWebComponent('ui5-expandable-text', ['emptyIndicatorMode', 'maxCharacters', 'overflowMode', 'text'], [], [], []);
ExpandableText.displayName = 'ExpandableText';
export { ExpandableText };