feat: Add button-with-tooltip and text-with-tooltip

src/components/button-with-tooltip/button-with-tooltip.tsx

@@ -0,0 +1,60 @@
+import { Button, ButtonType } from 'components/button';
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+interface ButtonWithTooltipProps {
+  type: ButtonType;
+  label: string;
+  onClick: () => void;
+}
+
+const ButtonWithTooltip = ({ type, label, onClick }: ButtonWithTooltipProps) => {
+  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>();
+
+  const [isFinalized, setIsFinalized] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(true);
+  const onClickWrapper = () => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  useEffect(() => {
+    if (!isFinalized && buttonRef) {
+      setIsFinalized(true);
+
+      const textElement = buttonRef.children[0] as HTMLElement;
+      setShowTooltip(textElement.offsetWidth < textElement.scrollWidth);
+    }
+  });
+
+  if (!isFinalized) {
+    return (
+      <Button
+        type={type}
+        tooltip={{ label }}
+        onClick={onClickWrapper}
+        setRef={(ref: HTMLButtonElement) => setButtonRef(ref)}
+        disabled={false}
+      >
+        {label}
+      </Button>
+    );
+  }
+
+  return showTooltip ? (
+    <Button type={type} tooltip={{ label }} onClick={onClickWrapper} disabled={false}>
+      {label}
+    </Button>
+  ) : (
+    <Button type={type} onClick={onClickWrapper} disabled={false}>
+      {label}
+    </Button>
+  );
+};
+
+export { ButtonWithTooltip };

src/components/button-with-tooltip/index.ts

@@ -0,0 +1 @@
+export { ButtonWithTooltip } from './button-with-tooltip';

src/components/text-with-tooltip/index.ts

@@ -0,0 +1 @@
+export { TextWithTooltip } from './text-with-tooltip';

src/components/text-with-tooltip/text-with-tooltip.scss

@@ -0,0 +1,9 @@
+.text-with-tooltip {
+    .text {
+        -webkit-box-orient: vertical;
+        display: -webkit-box; 
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+    }
+}

src/components/text-with-tooltip/text-with-tooltip.tsx

@@ -0,0 +1,53 @@
+import { h, Fragment } from 'preact';
+
+import { useState, useRef, useLayoutEffect } from 'preact/hooks';
+import { ui } from '@playkit-js/kaltura-player-js';
+const { Tooltip } = ui.Components;
+
+import * as styles from './text-with-tooltip.scss';
+
+const TextWithTooltip = ({ text, numberOfLines }: { text: string; numberOfLines: number }) => {
+  const comparisonTextRef = useRef(null);
+  const textRef = useRef(null);
+
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [isFinalized, setIsFinalized] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!isFinalized && textRef?.current && comparisonTextRef?.current) {
+      setIsFinalized(true);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const textHeight = textRef?.current?.getBoundingClientRect().height;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const comparisonTextHeight = comparisonTextRef?.current?.getBoundingClientRect().height;
+      setShowTooltip(textHeight < comparisonTextHeight);
+    }
+  });
+
+  const textElement = (
+    <div ref={textRef} style={{ '-webkit-line-clamp': numberOfLines }} className={styles.text}>
+      {text}
+    </div>
+  );
+  const comparisonTextElement = (
+    <div ref={comparisonTextRef} style={{ '-webkit-line-clamp': numberOfLines + 1 }} className={styles.text}>
+      {text}
+    </div>
+  );
+  const content = !isFinalized ? (
+    <Fragment>
+      {textElement}
+      {comparisonTextElement}
+    </Fragment>
+  ) : (
+    textElement
+  );
+
+  if (!text) return null;
+
+  return <div className={styles.textWithTooltip}>{showTooltip ? <Tooltip label={text}>{content}</Tooltip> : content}</div>;
+};
+
+export { TextWithTooltip };