@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.2

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,61 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+$focus-width: 5px;
+
+.tabs {
+  background-color: var(--tabs-background-color);
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tablist {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 2rem;
+  position: relative;
+  margin: -$focus-width;
+  padding: $focus-width;
+  z-index: 0;
+}
+
+.indicator {
+  $transition-property: left, width;
+
+  position: absolute;
+  height: var(--tab-active-border-height);
+  border-radius: 2px 2px 0 0;
+  background-color: var(--tab-active-border-color);
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+}
+
+.tabdivider {
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
+  width: calc(100% - ($focus-width * 2));
+  position: absolute;
+  bottom: $focus-width;
+  left: $focus-width;
+  z-index: -1;
+}

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,291 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+import { Tabs, Props } from "./Tabs";
+import { render } from "@testing-library/react";
+import { TabButton as Tab } from "./TabButton";
+import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
+
+const defaultParams: Props = {
+  children: [
+    <Tab key="tab1" title="Tab1">
+      Tabpanel1 content
+    </Tab>,
+    <Tab key="tab2" title="Tab2">
+      Tabpanel2 content
+    </Tab>,
+    <Tab key="tab3" title="Tab3">
+      Tabpanel3 content
+    </Tab>
+  ]
+};
+
+const createTabs = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tabs {...parameters} data-testid="tabs"></Tabs>);
+  const tabs = queries.getByTestId("tabs");
+
+  return {
+    ...queries,
+    tabs
+  };
+};
+
+describe("Tabs should render", () => {
+  it("renders without crashing", () => {
+    const { tabs } = createTabs();
+
+    expect(tabs).toBeDefined();
+  });
+
+  it("renders with properties passed", () => {
+    const { tabs } = createTabs(defaultParams => ({
+      ...defaultParams,
+      className: "testclass"
+    }));
+
+    expect(tabs).toHaveClass("testclass");
+  });
+
+  it("switches to tab and tabpanel when selected property is changed", () => {
+    const { tabs } = createTabs(defaultParams => ({
+      ...defaultParams,
+      selected: 2
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll(".tabbutton");
+
+    const tab1 = tabButtons[0] as HTMLButtonElement;
+    const tab3 = tabButtons[2] as HTMLButtonElement;
+
+    const tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    const tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab3).toHaveClass("selected");
+
+    expect(tabpanel1).not.toHaveClass("selected");
+    expect(tabpanel3).toHaveClass("selected");
+  });
+
+  it("switches to tab and tabpanel when tab is clicked", async () => {
+    const { tabs } = createTabs(defaultParams => ({
+      ...defaultParams
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll(".tabbutton");
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("selected");
+
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
+
+    await userEvent.click(tab3);
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab3).toHaveClass("selected");
+
+    expect(tabpanel1).not.toHaveClass("selected");
+    expect(tabpanel3).toHaveClass("selected");
+  });
+
+  it("triggers the onTabChange when switching tabs", async () => {
+    const onTabChangeHandler = jest.fn();
+
+    const { tabs } = createTabs(defaultParams => ({
+      ...defaultParams,
+      onTabChange: onTabChangeHandler
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll(".tabbutton");
+
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    await userEvent.click(tab3);
+
+    expect(onTabChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe("Tabs should not render other children then tab components", () => {
+  it("renders no tabs", () => {
+    const queries = render(
+      <Tabs data-testid="tabs">
+        <div>wrong component 1</div>
+        <div>wrong component 2</div>
+      </Tabs>
+    );
+
+    const tabs = queries.getByTestId("tabs");
+    expect(tabs).toBeDefined();
+    expect(tabs).toBeEmptyDOMElement;
+  });
+});
+
+describe("Tabs should comply with accessibility rules", () => {
+  it("traverse through tabs with keyboard", async () => {
+    const { tabs } = createTabs();
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll(".tabbutton");
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    act(() => {
+      tab1.focus();
+    });
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("selected");
+    expect(tab3).not.toHaveFocus();
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
+
+    await userEvent.keyboard("[ArrowLeft]");
+    await userEvent.keyboard("[Space]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveClass("selected");
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab1).not.toHaveFocus();
+    expect(tabpanel3).toHaveClass("selected");
+    expect(tabpanel1).not.toHaveClass("selected");
+
+    await userEvent.keyboard("[ArrowRight]");
+    await userEvent.keyboard("[Enter]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("selected");
+    expect(tab3).not.toHaveFocus();
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
+
+    await userEvent.keyboard("[End]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveFocus();
+    expect(tab1).not.toHaveFocus();
+
+    await userEvent.keyboard("[Home]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveFocus();
+
+    // should have no effect
+    await userEvent.keyboard("a");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveFocus();
+
+    await userEvent.keyboard("[ArrowRight]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+
+    await userEvent.keyboard("[ArrowLeft]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveFocus();
+
+    await userEvent.keyboard("[ArrowLeft]");
+
+    tabButtons = tablist.querySelectorAll(".tabbutton");
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    act(() => {
+      tab3.blur();
+    });
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,174 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ComponentPropsWithRef,
+  createRef,
+  ForwardRefRenderFunction,
+  ReactElement,
+  RefObject,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Props as TabProps } from "./Tab";
+import { TabButton } from "./TabButton";
+import classes from "./Tabs.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  selected?: number;
+  onTabChange?: (index: number) => void;
+}
+
+const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, selected = 0, onTabChange, ...rest }: Props,
+  ref
+) => {
+  const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
+  const [renderedTabs, setRenderedTabs] = useState<ReactElement[]>([]);
+  const [activeTabIndex, setActiveTabIndex] = useState(selected);
+  const [usingKeyboardNavigation, setUsingKeyboardNavigation] = useState(false);
+  const [indicatorStyles, setIndicatorStyles] = useState<{
+    width: number;
+    left: number;
+    top: number;
+  }>({
+    width: 0,
+    left: 0,
+    top: 0
+  });
+  const tabsRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
+  const indicatorRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const totalAmountOfTabs = [children].flat().length;
+    if (!usingKeyboardNavigation) setUsingKeyboardNavigation(true);
+    if (totalAmountOfTabs === 1) return;
+
+    switch (e.key) {
+      case "ArrowRight":
+        setActiveTabIndex(currentIndex => {
+          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
+        });
+        break;
+      case "ArrowLeft":
+        setActiveTabIndex(currentIndex => {
+          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
+        });
+        break;
+      case "Home":
+        setActiveTabIndex(0);
+        break;
+      case "End":
+        setActiveTabIndex(totalAmountOfTabs - 1);
+        break;
+      default:
+        return;
+    }
+  };
+
+  const calculateIndicatorPosition = () => {
+    if (tabsRef.current) {
+      const selectedButton = tabsRef.current.querySelectorAll('button[role="tab"]')[
+        activeTabIndex
+      ] as HTMLElement;
+
+      setIndicatorStyles({
+        left: selectedButton.offsetLeft,
+        top:
+          selectedButton.offsetTop +
+          selectedButton.offsetHeight -
+          indicatorRef.current!.offsetHeight,
+        width: selectedButton.offsetWidth
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (tabsRef.current && renderedButtons.length) {
+      calculateIndicatorPosition();
+    }
+  }, [tabsRef.current, activeTabIndex, renderedButtons]);
+
+  useEffect(() => {
+    onTabChange?.(activeTabIndex);
+  }, [activeTabIndex]);
+
+  useEffect(() => {
+    const buttons = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.createElement(
+          TabButton,
+          {
+            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+            tabIndex: activeTabIndex === index ? 0 : -1,
+            "aria-selected": activeTabIndex === index,
+            focused: usingKeyboardNavigation && activeTabIndex === index,
+            tabActive: activeTabIndex === index,
+            "aria-controls": `tab_${index}`,
+            onClick: () => setActiveTabIndex(index)
+          },
+          child.props.title
+        );
+      }
+      return null;
+    });
+
+    setRenderedButtons(buttons);
+  }, [activeTabIndex]);
+
+  useEffect(() => {
+    const tabs = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.cloneElement(child, {
+          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_tab`,
+          tabIndex: activeTabIndex === index ? 0 : -1,
+          tabActive: activeTabIndex === index,
+          id: `tab_${index}`,
+          children: child.props.children
+        });
+      }
+
+      return null;
+    });
+
+    setRenderedTabs(tabs);
+  }, [activeTabIndex]);
+
+  return (
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
+      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
+        {renderedButtons}
+        <div className={classes["tabdivider"]} />
+        <div
+          className={classes["indicator"]}
+          ref={indicatorRef}
+          aria-hidden="true"
+          tabIndex={-1}
+          style={{
+            width: indicatorStyles.width,
+            left: indicatorStyles.left,
+            top: indicatorStyles.top
+          }}
+        />
+      </div>
+      <div>{renderedTabs}</div>
+    </div>
+  );
+};
+
+export const Tabs = React.forwardRef(TabsComponent);

package/src/components/TextEllipsis/TextEllipsis.test.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { render } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { Props, TextEllipsis } from "./TextEllipsis";
+
+const defaultParams: Props = {};
+
+const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TextEllipsis {...parameters} data-testid="TextEllipsis">
+      content
+    </TextEllipsis>
+  );
+  const textEllipsis = queries.getByTestId("TextEllipsis");
+
+  return {
+    ...queries,
+    textEllipsis
+  };
+};
+
+describe("TextEllipsis should render", () => {
+  it("renders without crashing", () => {
+    const { textEllipsis, getAllByText } = createTextEllipsis();
+
+    expect(textEllipsis).toBeDefined();
+    expect(getAllByText("content")).toHaveLength(2);
+  });
+
+  it("does not show popover when full text is visible", async () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
+    await user.hover(textEllipsis);
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
+  });
+
+  it("shows popover with full text when base text has ellipsis", async () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    Object.defineProperty(textEllipsis, "offsetWidth", { configurable: true, value: 1 });
+    Object.defineProperty(textEllipsis, "scrollWidth", { configurable: true, value: 2 });
+
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
+    await user.hover(textEllipsis);
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "false");
+    await user.unhover(textEllipsis);
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <TextEllipsis data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/components/TextEllipsis/TextEllipsis.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  useRef,
+  MouseEventHandler,
+  useState,
+  ComponentPropsWithRef
+} from "react";
+import { Popover } from "../Popover/Popover";
+import classes from "./TextEllipsis.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: string;
+  popoverClassName?: string;
+}
+
+const TextEllipsisComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, popoverClassName, className, ...rest }: Props,
+  ref
+) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const textContainer = useRef<HTMLDivElement>(null);
+
+  const ellipsisVisible = () => {
+    if (
+      textContainer.current &&
+      textContainer.current.offsetWidth < textContainer.current.scrollWidth
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(true);
+  };
+
+  const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(false);
+  };
+
+  return (
+    <div
+      {...rest}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className={`${classes["text-ellipsis"]} ${className ?? ""}`}
+      ref={ref ?? textContainer}
+    >
+      {children}
+      <Popover
+        aria-hidden={true}
+        data-hidden={!showPopover}
+        show={showPopover}
+        role="tooltip"
+        anchorEl={textContainer}
+        className={`${classes.popover} ${popoverClassName ?? ""}`}
+      >
+        {children}
+      </Popover>
+    </div>
+  );
+};
+
+export const TextEllipsis = React.forwardRef(TextEllipsisComponent);