@eccenca/gui-elements 24.0.0 → 24.1.0-featureimprovepublishingprocesscmem6356.0

package/src/components/ContentGroup/ContentGroup.tsx

@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+    Divider,
+    Icon,
+    IconButton,
+    OverflowText,
+    Section,
+    SectionHeader,
+    Spacing,
+    StickyTarget,
+    StickyTargetProps,
+    Toolbar,
+    ToolbarSection,
+    Tooltip,
+} from "../index";
+
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+    children,
+    className = "",
+    title,
+    contextInfo,
+    annotation,
+    actionOptions,
+    isCollapsed = false,
+    textToggleCollapse,
+    handlerToggleCollapse,
+    borderMainConnection = false,
+    borderSubConnection = false,
+    level = 1,
+    minimumHeadlineLevel = 3,
+    whitespaceSize = "small",
+    style,
+    stickyHeaderProps,
+    description,
+    hideGroupDivider,
+    contentProps,
+    ...otherContentWrapperProps
+}: ContentGroupProps) => {
+    const displayHeader = title || handlerToggleCollapse;
+
+    let borderGradient: string[] | undefined = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+            try {
+                const color = Color(borderColor);
+
+                acc.push(
+                    `${color.rgb().toString()} ` +
+                        `${(index / borderColors.length) * 100}% ` +
+                        `${((index + 1) / borderColors.length) * 100}%`
+                );
+            } catch {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+
+    const headerContent = displayHeader ? (
+        <>
+            <SectionHeader className={`${eccgui}-contentgroup__header`}>
+                <Toolbar>
+                    {handlerToggleCollapse && (
+                        <ToolbarSection>
+                            <IconButton
+                                className={`${eccgui}-contentgroup__header__toggler`}
+                                name={isCollapsed ? "toggler-showmore" : "toggler-showless"}
+                                text={textToggleCollapse ?? (isCollapsed ? "Show more" : "Show less")}
+                                onClick={handlerToggleCollapse}
+                            />
+                            <Spacing vertical size="small" />
+                        </ToolbarSection>
+                    )}
+                    {title && (
+                        <ToolbarSection canShrink>
+                            {React.createElement(
+                                "h" +
+                                    Math.min(
+                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+                                        6
+                                    ).toString(),
+                                {
+                                    children: <OverflowText>{title}</OverflowText>,
+                                    className: `${eccgui}-contentgroup__header__title`,
+                                }
+                            )}
+                            {description && (
+                                <>
+                                    <Spacing vertical size="tiny" />
+                                    <Tooltip content={description}>
+                                        <Icon name="item-info" small className="dmapp--text-info" />
+                                    </Tooltip>
+                                </>
+                            )}
+                        </ToolbarSection>
+                    )}
+                    {contextInfoElements &&
+                        contextInfoElements[0]?.props &&
+                        Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+                            <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
+                                <div className={`${eccgui}-contentgroup__content `}>
+                                    <Spacing vertical size="tiny" />
+                                    {contextInfoElements}
+                                </div>
+                            </ToolbarSection>
+                        )}
+                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                        <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
+                            <Spacing vertical size="small" />
+                            {actionOptions}
+                        </ToolbarSection>
+                    )}
+                </Toolbar>
+            </SectionHeader>
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    {!hideGroupDivider && <Divider addSpacing="small" />}
+                    <Spacing size={whitespaceSize} />
+                </>
+            )}
+        </>
+    ) : (
+        <></>
+    );
+
+    return (
+        <Section
+            className={
+                `${eccgui}-contentgroup` +
+                (className ? ` ${className}` : "") +
+                (whitespaceSize ? ` ${eccgui}-contentgroup--padding-${whitespaceSize}` : "") +
+                (borderMainConnection ? ` ${eccgui}-contentgroup--border-main` : "") +
+                (borderSubConnection ? ` ${eccgui}-contentgroup--border-sub` : "")
+            }
+            style={
+                borderGradient
+                    ? ({
+                          ...(style ?? {}),
+                          [`--${eccgui}-color-contentgroup-border-sub`]: borderGradient.join(", "),
+                      } as React.CSSProperties)
+                    : style
+            }
+            {...otherContentWrapperProps}
+        >
+            {headerContent && stickyHeaderProps ? (
+                <StickyTarget {...stickyHeaderProps}>{headerContent}</StickyTarget>
+            ) : (
+                headerContent
+            )}
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    <div className={`${eccgui}-contentgroup__content`}>
+                        <div
+                            className={classNames(`${eccgui}-contentgroup__content__body`, contentClassName)}
+                            {...otherContentProps}
+                        >
+                            {children}
+                        </div>
+                        {contextInfo && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__context`}>{contextInfoElements}</div>
+                        )}
+                        {annotation && <div>{annotation}</div>}
+                        {actionOptions && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__options`}>{actionOptions}</div>
+                        )}
+                    </div>
+                </>
+            )}
+        </Section>
+    );
+};

package/src/components/ContentGroup/_contentgroup.scss

@@ -0,0 +1,56 @@
+$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
+$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+
+.#{$eccgui}-contentgroup {
+    --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
+    --#{$eccgui}-color-contentgroup-border-sub: #{$eccgui-color-scontentgroup-border-sub};
+}
+
+.#{$eccgui}-contentgroup--border-main {
+    border-left: 0.25 * $eccgui-size-block-whitespace solid
+        var(--#{$eccgui}-color-contentgroup-border-main, #{$eccgui-color-scontentgroup-border-main});
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-left: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--border-sub {
+    position: relative;
+    border-right: 0.25 * $eccgui-size-block-whitespace solid transparent;
+
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
+        width: 0.25 * $eccgui-size-block-whitespace;
+        content: " ";
+        background-color: var(--#{$eccgui}-color-contentgroup-border-sub, #{$eccgui-color-scontentgroup-border-sub});
+        background-image: linear-gradient(to bottom, var(--#{$eccgui}-color-contentgroup-border-sub));
+    }
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-right: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--padding-small {
+    + .#{$eccgui}-contentgroup {
+        margin-top: 0.5 * $eccgui-size-block-whitespace;
+    }
+
+    > .#{$eccgui}-contentgroup__content {
+        column-gap: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup__content {
+    display: flex;
+}
+
+.#{$eccgui}-contentgroup__content__body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+}

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/Depiction/depiction.scss

@@ -72,6 +72,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item & {
         height: $button-height;
     }
+    .#{$eccgui}-overviewitem__item--highdensity.#{$eccgui}-overviewitem__item--hasspacing > .#{$eccgui}-depiction &,
+    .#{$eccgui}-overviewitem__list--highdensity
+        > li
+        > .#{$eccgui}-overviewitem__item.#{$eccgui}-overviewitem__item--hasspacing
+        & {
+        height: calc(#{$button-height} - #{$eccgui-size-typo-base * 0.5});
+    }
 }
 
 .#{$eccgui}-depiction__image--disabled {

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.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Label } from "../../index";
+import { Icon, Label } from "../../index";
 
 export default {
     title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
     tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
     disabled: false,
     htmlFor: "inputid",
+    additionalElements: <Icon name={"state-warning"} tooltipText={"message"} small />,
 };

package/src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -34,6 +35,12 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * visual appearance of the label
      */
     emphasis?: "strong" | "normal";
+    /**
+     * 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 = ({
@@ -46,6 +53,8 @@ export const Label = ({
     tooltipProps,
     isLayoutForElement = "label",
     emphasis = "normal",
+    additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -63,16 +72,23 @@ export const Label = ({
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
+            {additionalElements && (
+                <>
+                    <Spacing vertical size="tiny" />
+                    {additionalElements}
+                </>
+            )}
         </>
     );
 
-    return !!text || !!info || !!tooltip || !!children ? (
+    return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
         React.createElement(
             htmlElementstring,
             {
                 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)