@eccenca/gui-elements 24.1.0-rc.3 → 24.1.0-rc.5

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -219,6 +219,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
+    const currentCm = React.useRef<EditorView>()
+    currentCm.current = cm
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -235,12 +237,12 @@ const AutoSuggestion = ({
     const pathIsValid = validationResponse?.valid ?? true;
 
     React.useEffect(() => {
-        if (reInitOnInitialValueChange && initialValue != null && cm) {
+        if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
             dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+                changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
         }
-    }, [initialValue, cm, reInitOnInitialValueChange]);
+    }, [initialValue, reInitOnInitialValueChange]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -301,13 +301,15 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
             let enableHighlighting = true;
             if (onlySelectItemReturned) {
                 // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
-                const emptyStringResults = await onSearch("");
+                const emptyStringResults: T[] = await onSearch("");
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
-                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
-                    result = [selectedItem, ...emptyStringResults];
+                    // Do not mutate original array
+                    const withoutSelected = [...emptyStringResults]
+                    withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
+                    result = [selectedItem, ...withoutSelected];
                 } else {
                     result = emptyStringResults;
                 }

package/src/components/Card/CardActions.tsx

@@ -8,6 +8,10 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Mainly used for cards used as modals (dialogs).
      */
     inverseDirection?: boolean;
+    /**
+     * Set footer to display its children on only one line.
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -18,6 +22,7 @@ export const CardActions = ({
     children,
     className = "",
     inverseDirection = false,
+    noWrap = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -26,6 +31,7 @@ export const CardActions = ({
             className={
                 `${eccgui}-card__actions` +
                 (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (noWrap ? ` ${eccgui}-card__actions--nowrap` : "") +
                 (className ? " " + className : "")
             }
         >

package/src/components/Card/CardContent.tsx

@@ -15,10 +15,16 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
+    children,
+    className='',
+    noFlexHeight,
+    ...otherProps
+}: CardContentProps, ref) => {
     return (
         <div
             {...otherProps}
+            ref={ref}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
@@ -28,6 +34,4 @@ export const CardContent = ({ children, className = "", noFlexHeight, ...otherPr
             {children}
         </div>
     );
-};
-
-export default CardContent;
+});

package/src/components/Card/card.scss

@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-direction: row-reverse;
 }
 
+.#{$eccgui}-card__actions--nowrap {
+    flex-wrap: nowrap;
+}
+
 .#{$eccgui}-card__actions__aux {
     display: flex;
     flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     .#{$eccgui}-card__actions--inversedirection > & {
         justify-content: flex-start;
     }
+
+    .#{$eccgui}-card__actions--nowrap > & {
+        flex-shrink: 5;
+        flex-wrap: nowrap;
+        min-width: 0;
+
+        & > * {
+            flex-shrink: 10;
+            min-width: 0;
+        }
+    }
 }

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -15,9 +15,10 @@ export default {
     },
 } as Meta<typeof CodeAutocompleteField>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
     <OverlaysProvider>
-        <CodeAutocompleteField {...args} />
+        <CodeAutocompleteField {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -63,7 +64,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     },
     placeholder:
         "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
-    onChange(): any {
+    onChange(): void {
         // Do nothing
     },
 };

package/src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,31 +4,40 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 
+const interactionKindOptions = { UNDEFINED: undefined, ...PopoverInteractionKind };
+const rootBoundaryOptions = { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" };
+const positioningStrategyOptions = { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" };
+
 export default {
     title: "Components/ContextOverlay",
     component: ContextOverlay,
     argTypes: {
         interactionKind: {
-            options: { UNDEFINED: undefined, ...PopoverInteractionKind },
+            options: Object.keys(interactionKindOptions),
+            mapping: interactionKindOptions,
         },
         placement: {
             options: PopperPlacements,
         },
         rootBoundary: {
-            options: { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" },
+            options: Object.keys(rootBoundaryOptions),
+            mapping: rootBoundaryOptions,
         },
         positioningStrategy: {
-            options: { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" },
+            options: Object.keys(positioningStrategyOptions),
+            mapping: positioningStrategyOptions,
         },
     },
 } as Meta<typeof ContextOverlay>;
 
+let forcedUpdateKey = 0;
 const Template: StoryFn<typeof ContextOverlay> = (args) => (
     <OverlaysProvider>
-        <ContextOverlay {...args} />
+        <ContextOverlay {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -55,4 +64,6 @@ Default.args = {
     } as PopperModifierOverrides,
     rootBoundary: "viewport",
     hasBackdrop: false,
+    onOpening: fn(),
+    onInteraction: fn(),
 };

package/src/components/Dialog/SimpleDialog.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
+import { Card, CardActions, CardActionsProps, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 
@@ -45,6 +45,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
     startInFullScreenMode?: boolean;
+    /** Forward properties to the actions footer component. */
+    actionsProps?: Omit<CardActionsProps, "inverseDirection">;
 }
 
 /**
@@ -66,6 +68,7 @@ export const SimpleDialog = ({
     showFullScreenToggler = false,
     startInFullScreenMode = false,
     size,
+    actionsProps,
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
@@ -112,7 +115,11 @@ export const SimpleDialog = ({
                     <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions inverseDirection className={intentClassName}>
+                    <CardActions
+                        {...actionsProps}
+                        inverseDirection
+                        className={`${actionsProps?.className ?? ""} ${intentClassName}`}
+                    >
                         {actions}
                     </CardActions>
                 )}

package/src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { AlertDialog } from "./../../../../index";
-import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
+import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";
 
 export default {
     title: "Components/Dialog/AlertDialog",
     component: AlertDialog,
     argTypes: {
+        ...simpleDialogStory.argTypes,
         headerOptions: { table: { disable: true } },
         children: { table: { disable: true } },
         actions: { table: { disable: true } },
@@ -42,4 +44,6 @@ Default.args = {
     success: false,
     warning: true,
     danger: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
@@ -11,8 +12,7 @@ export default {
     component: Modal,
     argTypes: {
         children: {
-            control: "none",
-            description: "Elements to include into the modal container.",
+            control: false,
         },
     },
 } as Meta<typeof Modal>;
@@ -30,4 +30,6 @@ Default.args = {
     isOpen: true,
     usePortal: false,
     children: <Card {...SimpleCard.args} />,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";
@@ -14,10 +15,10 @@ export default {
     argTypes: {
         ...storyModal.argTypes,
         headerOptions: {
-            control: "none",
+            control: false,
         },
         actions: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof SimpleDialog>;
@@ -39,4 +40,6 @@ Default.args = {
     hasBorder: true,
     isOpen: true,
     usePortal: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };

package/src/components/Icon/canonicalIconNames.tsx

@@ -19,6 +19,9 @@ const canonicalIcons = {
     "artefact-commit": icons.Commit,
     "artefact-task-deleteprojectfiles": icons.TrashCan,
     "artefact-task-downloadfile": icons.CloudDownload,
+    "artefact-task-pivot": icons.Transpose,
+    "artefact-task-unpivot": icons.Transpose,
+    "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -65,6 +68,7 @@ const canonicalIcons = {
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,
+    "item-magic-edit": icons.MagicWand,
     "item-evaluation": icons.Analytics,
     "item-execution": icons.Run,
     "item-info": icons.Information,
@@ -84,6 +88,7 @@ const canonicalIcons = {
     "item-vertmenu": icons.OverflowMenuHorizontal,
     "item-viewdetails": icons.View,
     "item-hidedetails": icons.ViewOff,
+    "item-image": icons.Image,
 
     "list-sortasc": icons.ArrowDown,
     "list-sortdesc": icons.ArrowUp,
@@ -125,6 +130,13 @@ const canonicalIcons = {
     "operation-filterremove": icons.FilterRemove,
     "operation-filter": icons.Filter,
     "operation-format-codeblock": icons.CodeBlock,
+    "operation-format-text-code": icons.Code,
+    "operation-format-text-bold": icons.TextBold,
+    "operation-format-text-italic": icons.TextItalic,
+    "operation-format-text-strikethrough": icons.TextStrikethrough,
+    "operation-format-list-bullet": icons.ListBulleted,
+    "operation-format-list-checked": icons.ListChecked,
+    "operation-format-list-numbered": icons.ListNumbered,
     "operation-fix": icons.Tools,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,

package/src/components/Label/Label.tsx

@@ -39,6 +39,8 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * Add other elements to the end of the label content
      */
     additionalElements?: React.ReactNode | React.ReactNode[];
+    /** Force label to get displayed as inline block element. */
+    inline?: boolean;
 }
 
 export const Label = ({
@@ -52,6 +54,7 @@ export const Label = ({
     isLayoutForElement = "label",
     emphasis = "normal",
     additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -85,6 +88,7 @@ export const Label = ({
                 className:
                     `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
+                    (inline ? ` ${eccgui}-label--inline` : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },

package/src/components/Label/label.scss

@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     font-size: $eccgui-size-typo-label;
     line-height: $eccgui-size-typo-label-lineheight;
     color: $eccgui-color-label-text;
-    vertical-align: middle;
 
     .#{$eccgui}-typography__overflowtext--passdown > & {
         display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 }
 
+.#{$eccgui}-label--inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .#{$eccgui}-label--disabled {
     opacity: $eccgui-opacity-disabled;
 }

package/src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

package/src/components/Menu/menu.scss

@@ -48,6 +48,7 @@ $menu-background-color: transparent !default;
 @import "~@blueprintjs/core/src/components/menu/menu";
 
 .#{$ns}-menu {
+    min-width: auto;
     padding: 0;
 
     .#{$ns}-popover2-content > & {

package/src/components/OverviewItem/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";
@@ -30,7 +31,7 @@ Default.args = {
             return { label: item };
         }),
     itemRenderer: (item, props) => {
-        return <MenuItem text={item.label} title={item.label} />;
+        return <MenuItem text={item.label} title={item.label} {...props} />;
     },
     fill: true,
 };
@@ -53,6 +54,7 @@ ControlledTarget.args = {
     ...Default.args,
     fill: false,
     children: <Button text="Controlled select target" intent="primary" />,
+    onActiveItemChange: fn(),
 };
 
 /**
@@ -70,4 +72,5 @@ ClearanceOption.args = {
     onClearanceHandler: () => {
         alert("Reset now.");
     },
+    onActiveItemChange: fn(),
 };

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);

package/src/components/Tag/TagList.tsx

@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const tagList = (
         <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
             {React.Children.map(children, (child, i) => {
-                return (
+                return child ? (
                     <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                );
+                ) : null;
             })}
         </ul>
     );

package/src/components/Typography/OverflowText.tsx

@@ -1,13 +1,34 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 
-export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none";
+export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * How is ellipsis used to cut text overflows.
+     * Use `reverse`to use the ellipis on text start and display the end of the text.
+     */
+    ellipsis?: "add" | "reverse" | "none";
+    /**
+     * Display component as inline element.
+     */
     inline?: boolean;
+    /**
+     * Using text overflow on all children elements.
+     */
     passDown?: boolean;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
+    /**
+     * HTML element that is used for the component.
+     */
     useHtmlElement?: "p" | "div" | "span";
+    /**
+     * Used for all other necessary properties.
+     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
+     */
     [key: string]: any;
 }
 
@@ -15,7 +36,7 @@ export interface OverflowTextProps {
 export const OverflowText = ({
     className = "",
     children,
-    ellipsis,
+    ellipsis = "add",
     inline = false,
     passDown = false,
     useHtmlElement,

package/src/components/Typography/stories/OverflowText.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { OverflowText } from "../../../index";
+
+const config = {
+    title: "Components/Typography/OverflowText",
+    component: OverflowText,
+    argTypes: {
+        children: {
+            control: "select",
+            options: ["simple text", "2 paragraphs"],
+            mapping: {
+                "simple text": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                }),
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            },
+            description: "Content of the element.",
+        },
+    },
+} as Meta<typeof OverflowText>;
+export default config;
+
+const Template: StoryFn<typeof OverflowText> = (args) => <OverflowText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: config?.argTypes?.children?.mapping ? config.argTypes.children.mapping["simple text"] : "Overflow text",
+};