loon-bulma-react 2025.0.34 → 2025.1.0

package/lib/components/ToggleBar/ToggleBar.test.tsx

@@ -0,0 +1,228 @@
+/* eslint-disable testing-library/no-node-access */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import user from '@testing-library/user-event';
+
+import { ToggleBar } from './ToggleBar';
+import { faHorseHead } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from '../Icon/Icon';
+
+describe('Test <ToggleBar>', () => {
+  test('Should be a function', () => expect(ToggleBar).toBeInstanceOf(Function));
+  test('Should export .Item & .OnOffItem on ToggleBar', () => {
+    expect(ToggleBar.Item).toBeInstanceOf(Function);
+    expect(ToggleBar.OnOffItem).toBeInstanceOf(Function);
+    render(
+      <>
+        <ToggleBar.Item>item</ToggleBar.Item>
+        <ToggleBar.OnOffItem>on/off</ToggleBar.OnOffItem>
+      </>
+    );
+  });
+  test('Should render with toggle-items', async () => {
+    const mockToggle = jest.fn();
+    render(
+      <ToggleBar onToggle={mockToggle}>
+        <ToggleBar.Item>A</ToggleBar.Item>
+        <ToggleBar.Item identifier="B">
+          <Icon icon={faHorseHead} />B
+        </ToggleBar.Item>
+        <ToggleBar.Item>
+          <span>C</span>
+        </ToggleBar.Item>
+      </ToggleBar>
+    );
+
+    const A = screen.getByText('A');
+    const B = screen.getByText('B');
+    const C = screen.getByText('C');
+
+    await user.click(B);
+    expect(mockToggle).toHaveBeenCalledTimes(1);
+    expect(mockToggle).toHaveBeenCalledWith('B');
+
+    await user.click(A);
+    expect(mockToggle).toHaveBeenCalledTimes(2);
+    expect(mockToggle).toHaveBeenCalledWith('A');
+
+    await user.click(C);
+    expect(mockToggle).toHaveBeenCalledTimes(3);
+  });
+
+  test('Should render with on/off-toggle-items', async () => {
+    const mockFnA = jest.fn();
+    const mockFnB = jest.fn();
+    const mockFnC = jest.fn();
+    render(
+      <ToggleBar>
+        <ToggleBar.OnOffItem toggled={true} onToggle={mockFnA}>
+          A
+        </ToggleBar.OnOffItem>
+        <ToggleBar.OnOffItem toggled={false} onToggle={mockFnB}>
+          B
+        </ToggleBar.OnOffItem>
+        <ToggleBar.OnOffItem toggled={false} onToggle={mockFnC}>
+          C
+        </ToggleBar.OnOffItem>
+      </ToggleBar>
+    );
+
+    const A = screen.getByText('A');
+    const B = screen.getByText('B');
+    const C = screen.getByText('C');
+
+    await user.click(A);
+    expect(mockFnA).toHaveBeenCalledTimes(1);
+    expect(mockFnA).toHaveBeenCalledWith(false, 'A');
+    await user.click(B);
+    expect(mockFnB).toHaveBeenCalledTimes(1);
+    expect(mockFnB).toHaveBeenCalledWith(true, 'B');
+    await user.click(C);
+    expect(mockFnC).toHaveBeenCalledTimes(1);
+    expect(mockFnC).toHaveBeenCalledWith(true, 'C');
+
+    expect(mockFnA).toHaveBeenCalledTimes(1);
+    expect(mockFnB).toHaveBeenCalledTimes(1);
+    expect(mockFnC).toHaveBeenCalledTimes(1);
+  });
+
+  describe('test size prop', () => {
+    test(' size "s"', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle} size="s">
+          <ToggleBar.Item>A</ToggleBar.Item>
+          <ToggleBar.Item>
+            <Icon icon={faHorseHead} />B
+          </ToggleBar.Item>
+          <ToggleBar.Item>
+            <span>C</span>
+          </ToggleBar.Item>
+        </ToggleBar>
+      );
+
+      const bar = screen.getByText('A');
+      expect(bar).toHaveClass('tab');
+      expect(bar.parentElement?.parentElement?.parentElement).toHaveClass('tabs', 'is-small');
+      expect(bar).toBeInstanceOf(HTMLSpanElement);
+    });
+
+    test('size "m" (default), centered', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle} size="m" alignment="c" rounded>
+          <ToggleBar.Item>A</ToggleBar.Item>
+          <ToggleBar.Item>
+            <Icon icon={faHorseHead} />B
+          </ToggleBar.Item>
+          <ToggleBar.Item>
+            <span>C</span>
+          </ToggleBar.Item>
+        </ToggleBar>
+      );
+
+      const bar = screen.getByText('A');
+      expect(bar).toHaveClass('tab');
+      expect(bar.parentElement?.parentElement?.parentElement).toHaveClass('tabs', 'is-normal');
+      expect(bar).toBeInstanceOf(HTMLSpanElement);
+    });
+
+    test('size "l", right-aligned', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle} size="l" alignment="r">
+          <ToggleBar.Item>A</ToggleBar.Item>
+          <ToggleBar.Item>
+            <Icon icon={faHorseHead} />B
+          </ToggleBar.Item>
+          <ToggleBar.Item>
+            <span>C</span>
+          </ToggleBar.Item>
+        </ToggleBar>
+      );
+
+      const bar = screen.getByText('A');
+      expect(bar).toHaveClass('tab');
+      expect(bar.parentElement?.parentElement?.parentElement).toHaveClass('tabs', 'is-medium');
+      expect(bar).toBeInstanceOf(HTMLSpanElement);
+    });
+
+    test('size "xl"', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle} size="xl">
+          <ToggleBar.Item>A</ToggleBar.Item>
+          <ToggleBar.Item>
+            <Icon icon={faHorseHead} />B
+          </ToggleBar.Item>
+          <ToggleBar.Item>
+            <span>C</span>
+          </ToggleBar.Item>
+        </ToggleBar>
+      );
+
+      const bar = screen.getByText('A');
+      expect(bar).toHaveClass('tab');
+      expect(bar.parentElement?.parentElement?.parentElement).toHaveClass('tabs', 'is-large');
+      expect(bar).toBeInstanceOf(HTMLSpanElement);
+    });
+  });
+
+  describe('test disabled prop', () => {
+    test('Toggle Item', async () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle}>
+          <ToggleBar.Item disabled>A</ToggleBar.Item>
+        </ToggleBar>
+      );
+
+      const A = screen.getByText('A');
+      expect(A).not.toHaveClass('is-toggled');
+      await user.click(A);
+      expect(A).not.toHaveClass('is-toggled');
+      expect(mockToggle).not.toHaveBeenCalled();
+    });
+    test('Toggle OnOffItem', async () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle}>
+          <ToggleBar.OnOffItem disabled>A</ToggleBar.OnOffItem>
+        </ToggleBar>
+      );
+
+      const A = screen.getByText('A');
+      expect(A).not.toHaveClass('is-toggled');
+      await user.click(A);
+      expect(A).not.toHaveClass('is-toggled');
+      expect(mockToggle).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('test color props', () => {
+    test('ToggleBar.Item', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle}>
+          <ToggleBar.Item>I</ToggleBar.Item>
+          <ToggleBar.Item>P</ToggleBar.Item>
+          <ToggleBar.Item>W</ToggleBar.Item>
+        </ToggleBar>
+      );
+    });
+
+    test('ToggleBar.OnOffItem', () => {
+      const mockToggle = jest.fn();
+      render(
+        <ToggleBar onToggle={mockToggle}>
+          <ToggleBar.OnOffItem>D</ToggleBar.OnOffItem>
+          <ToggleBar.OnOffItem>S</ToggleBar.OnOffItem>
+          <ToggleBar.OnOffItem>I</ToggleBar.OnOffItem>
+          <ToggleBar.OnOffItem>P</ToggleBar.OnOffItem>
+          <ToggleBar.OnOffItem>W</ToggleBar.OnOffItem>
+        </ToggleBar>
+      );
+    });
+  });
+});

package/lib/components/ToggleBar/ToggleBar.tsx

@@ -0,0 +1,208 @@
+import { DefaultsContext } from '@lib/contexts/DefaultsProvider/DefaultsProvider';
+import { getSizeClass, getAlignmentClass } from '@lib/internal_functions';
+import { AlignmentProp, SizeProp } from '@lib/types';
+import React from 'react';
+
+type ToggleBarProps = {
+  /** De beginwaarde (default = undefined)
+   * Deze property wordt alleen voor ToggleItems gebruikt. voor OnOffToggleItems kan dat per item geset worden
+   * Om een waarde van buitenaf te zete, gebruik je de 'value'-prop
+   */
+  initialValue?: string;
+  /** De beginwaarde, alsd ie van buitenaf aangepast mag worden. gebruik 'initialValue' voor alleen een beginwaarde */
+  value?: string;
+  /** ToggleItems */
+  children: React.ReactNode;
+  /** Callback voor toggelen */
+  onToggle?: (toggledItem: string) => void;
+  /** Zijn de randen afgerond of vierkant (default true) */
+  rounded?: boolean;
+  /** Alignment van de container */
+  alignment?: AlignmentProp;
+  /** Size van de buttons (default = 's') */
+  size?: SizeProp;
+  /** Extra classes voor de toggle-bar */
+  className?: string;
+};
+
+type ToggleItemProps = {
+  /** Content van een Toggle Item */
+  children: React.ReactNode;
+  /** Is dit item disabled? */
+  disabled?: boolean;
+  /** Selectie-naam voor dit toggle-item. ALs undefined wordt de children-string-content gebruikt */
+  identifier?: string;
+  /** Tooltip voor dit toggle-item */
+  title?: string;
+  onClick?: (toggledItem?: string) => void;
+};
+
+type InternToggleItemProps = ToggleItemProps & {
+  toggled: boolean;
+  onToggleClick: (toggledItem: string) => void;
+};
+
+type OnOffToggleItemProps = ToggleItemProps & {
+  /** Set de initiele waarde van dit toggle item */
+  toggled?: boolean;
+  /** onToggle callback, deze 'cancelt' de OnToggle van de <ItemToggleBar> voor dit item */
+  onToggle?: (on: boolean, item: string) => void;
+};
+
+type InternOnOffToggleItemProps = OnOffToggleItemProps & {
+  children: React.ReactNode;
+};
+
+/**
+ * Een groep van bij-elkaar-horende buttons waar er maar 1 van actief kan zijn.
+ * Om elk toggle-item APART te kunnen togglen, gebruik je de ItemToggleBar Component.
+ * De Togglebar gebruikt de default size voor Buttons
+ * @param props
+ * @returns een Toggle bar
+ * @example
+ * <ToggleBar onToggle={handleToggle} initialValue={calendarView}>
+ *   <ToggleBar.Item>WeekView</ToggleBar.Item>
+ *   <ToggleBar.Item>MonthView</ToggleBar.Item>
+ * </ToggleBar>
+ *
+ * <ToggleBar >
+ *   <ToggleBar.OnOffItem onToggle={handleToggle2} identifier="1">
+ *     Toggle 2
+ *   </ToggleBar.OnOffItem>
+ *   <ToggleBar.OnOffItem toggled={true} onToggle={handleToggle3} identifier="2">
+ *     Toggle 3
+ *   </ToggleBar.OnOffItem>
+ * </ToggleBar>
+ */
+const ToggleBar = ({
+  size: sizeProp,
+  rounded = false,
+  alignment = 'l',
+  value,
+  initialValue,
+  children: nodes,
+  className: classes,
+  onToggle,
+}: ToggleBarProps) => {
+  let { defaults } = React.useContext(DefaultsContext);
+  let size = sizeProp ?? defaults.button.size;
+
+  let className = 'tabs is-toggle';
+  className += getSizeClass(size);
+  className += getAlignmentClass(alignment);
+  if (rounded) className += ' is-toggle-rounded';
+  if (classes) className += ' ' + classes;
+
+  let [toggledItem, setToggledItem] = React.useState<string | undefined>(value ?? initialValue);
+  let genericID = React.useId();
+  let children = React.Children.map(nodes, (child: any, index: number) => {
+    let toggleName: string =
+      child.props?.identifier ??
+      React.Children.map(child.props.children, (child: any) => {
+        if (typeof child === 'string') return child;
+        else if (typeof child.type === 'string') return child.type;
+        else return genericID;
+      })?.join('') ??
+      '' + index;
+
+    if (child.type === ToggleItem)
+      return <InternToggleItem {...child.props} toggled={toggledItem == toggleName} identifier={toggleName} onToggleClick={handleToggle} />;
+    else if (child.type === OnOffToggleItem) return <InternOnOffToggleItem {...child.props} identifier={toggleName} />;
+
+    return child;
+  });
+
+  React.useEffect(() => {
+    if (value !== undefined && toggledItem !== value) setToggledItem(value);
+  }, [value, toggledItem]);
+
+  function handleToggle(item: string) {
+    if (toggledItem == item) return;
+    onToggle && onToggle(item);
+    setToggledItem(item);
+  }
+
+  return (
+    <div className={className}>
+      <ul>{children}</ul>
+    </div>
+  );
+};
+
+/** Toggle item */
+const ToggleItem = (props: ToggleItemProps) => <button disabled={props.disabled}>{props.children}</button>;
+/** ALLEEN VOOR INTERN GEBRUIK!
+ * Deze component vervang het ToggleItem
+ */
+function InternToggleItem({ disabled, title, toggled, children, identifier, onClick, onToggleClick }: InternToggleItemProps) {
+  let className = '';
+  if (disabled) className += ' is-disabled';
+  if (toggled) className += ' is-active';
+
+  function handleToggle() {
+    if (onClick) onClick(identifier);
+    if (!disabled) onToggleClick(identifier!);
+  }
+
+  return (
+    <li title={title} className={className} onClick={handleToggle} id={identifier}>
+      <span className="tab">{children}</span>
+    </li>
+  );
+}
+
+/** On Off Toggle Item - zelfbepalend */
+const OnOffToggleItem = (props: OnOffToggleItemProps) => <button>{props.children}</button>;
+/** INTERN GEBRUIKT - NIET EXPORTEREN
+ * Deze component vervangt de OnOfToggleItem
+ */
+function InternOnOffToggleItem({
+  title,
+  identifier,
+  onToggle,
+  toggled: toggledProp = false,
+  disabled = false,
+  children,
+}: OnOffToggleItemProps & InternOnOffToggleItemProps) {
+  let [toggled, setToggled] = React.useState<boolean>(toggledProp);
+
+  let classes = '';
+  if (toggled) classes += 'is-active';
+  if (disabled) classes += ' is-disabled';
+
+  React.useEffect(() => {
+    if (toggledProp !== undefined) setToggled(toggledProp);
+  }, [toggledProp]);
+
+  function handleToggle() {
+    if (!disabled) {
+      if (onToggle) onToggle(!toggled, identifier!);
+      setToggled(!toggled);
+    }
+  }
+
+  return (
+    <li title={title} id={identifier!} className={classes} onClick={() => handleToggle()}>
+      <span className="tab">{children}</span>
+    </li>
+  );
+}
+
+/**
+ * Item binnen de ToggleBar. Een van de ToggleItems in een ToggleBar kan maar actief zijn.
+ * @param props
+ * @returns een item in de togglebar waarvan er maar 1 actief kan zijn
+ * @example <ToggleBar.Item>Item 2</ToggleBar.Item>
+ */
+ToggleBar.Item = ToggleItem;
+
+/**
+ * Een zelf-toggelend item in een ToggleBar. OnOffToggleItems regelen zelf de toggle-state.
+ * @param props
+ * @returns een losstaand toggle-baar item.
+ * @example <ToggleBar.OnoffItem onToggle={handleToggle} identifier="1">Toggle 1</ToggleBar.OnoffItem>
+ */
+ToggleBar.OnOffItem = OnOffToggleItem;
+
+export { ToggleBar };
+export type { ToggleBarProps, ToggleItemProps, OnOffToggleItemProps };

package/lib/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,61 @@
+ 
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Tooltip } from './Tooltip';
+import { ColorProp } from '../../loon-react-bulma-types';
+import user from '@testing-library/user-event';
+
+describe('Test <Tooltip>...</Tooltip>', () => {
+  test('It should be a function', () => expect(Tooltip).toBeInstanceOf(Function));
+
+  describe('Test rendering', () => {
+    test('It should render with string-content', () => {
+      render(
+        <Tooltip content="Tooltip Test 1">
+          <button>Button</button>
+        </Tooltip>
+      );
+      const button = screen.getByText('Button');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeInstanceOf(HTMLButtonElement);
+    });
+    test('It should render with React Node-content', () => {
+      render(
+        <Tooltip content={<div>Tooltip Test 1</div>}>
+          <button>Button</button>
+        </Tooltip>
+      );
+      const button = screen.getByText('Button');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  test('Test hovering', async () => {
+    render(
+      <Tooltip content="Tooltip Test 1">
+        <button title="button">Button</button>
+      </Tooltip>
+    );
+    const button = screen.getByText('Button');
+    await user.hover(button);
+    const tooltip = screen.getByText('Tooltip Test 1');
+    expect(tooltip).toBeInTheDocument();
+
+    await user.unhover(button);
+    expect(tooltip).not.toBeInTheDocument();
+  });
+
+  describe('Test colors', () => {
+    ['p', 'i', 'l', 's', 'w', 'd'].forEach((color) => {
+      test(`It should render with color ${color}`, () => {
+        render(
+          <Tooltip content="Tooltip Test 1" color={color as ColorProp}>
+            <button title="button">Button</button>
+          </Tooltip>
+        );
+      });
+    });
+  });
+});

package/lib/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,203 @@
+// No external tooltip dependency
+
+import { PositionProp } from '@lib/index';
+import React from 'react';
+
+/** actions die de tooltip kan doen */
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+
+/** props bij de Tooltip component */
+type TooltipProps = {
+  /** className voor de container van de tooltip (dat is een `<span>`) */
+  className?: string | undefined;
+  /** Styling-object voor de container van de tooltip (dat is een `<span>`) */
+  style?: React.CSSProperties | undefined;
+  /** de inhoud van de tooltip, een string of een component. __LET OP!__: maximale width van 300px */
+  content?: React.ReactNode | undefined;
+  /** Waar moet de tooltip op worden weergegeven? */
+  children: React.ReactNode;
+  /** Waar moeten we de tooltip tonen? (default = `rt`, right-top)
+   * - `t` = top
+   * - `b` = bottom
+   * - `l` = left
+   * - `r` = right
+   * - `tl` of `lt` = top left
+   * - `tr` of `rt` = top right
+   * - `bl` of `lb` = bottom left
+   * - `br` of `rb` = bottom right
+   */
+  placement?: PositionProp | 'tl' | 'bl' | 'tr' | 'br' | 'lt' | 'lb' | 'rt' | 'rb' | undefined;
+  /** Op welke (meer dan 1 mogelijk) moet de tooltip getoont worden? (Default  = `hover`)
+   * @example triggers={['hover', 'click']}
+   * @example triggers="click"
+   */
+  triggers?: ActionType | Array<ActionType> | undefined;
+  /** Moet de pijl getoont worden? (Default = `false`) */
+  hideArrow?: boolean | undefined;
+  /** setten van de display-pattribute voor de tooltip-children. Soms heb je wat anders nodig. Default = 'inline-block' */
+  display?:
+    | 'inline-block'
+    | 'block'
+    | 'inline'
+    | 'flex'
+    | 'inline-flex'
+    | 'grid'
+    | 'inline-grid'
+    | 'contents'
+    | 'none'
+    | 'initial'
+    | 'inherit'
+    | 'unset'
+    | undefined;
+  /** Hoe lang moet de tooltip wachten voordat hij getoont wordt? (Default = 0.2)
+   * - number: delay voor show & hide
+   * - [number, number]: [delayShow, delayHide]
+   */
+  delay?: number | [number, number];
+};
+
+const MOUSE_DELAY = 0.2;
+
+const placements = {
+  top: {
+    style: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 8 },
+    arrow: { top: '100%', left: '50%', transform: 'translateX(-50%) rotate(180deg)' },
+  },
+  bottom: {
+    style: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 8 },
+    arrow: { bottom: '100%', left: '50%', transform: 'translateX(-50%)' },
+  },
+  left: {
+    style: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 8 },
+    arrow: { left: '100%', top: '50%', transform: 'translateY(-50%) rotate(90deg)' }, // FIXED
+  },
+  right: {
+    style: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 8 },
+    arrow: { right: '100%', top: '50%', transform: 'translateY(-50%) rotate(-90deg)' }, // FIXED
+  },
+  leftTop: { style: { right: '100%', top: 0, marginRight: 8 }, arrow: { left: '100%', top: 8, transform: 'rotate(90deg)' } }, // FIXED
+  leftBottom: { style: { right: '100%', bottom: 0, marginRight: 8 }, arrow: { left: '100%', bottom: 8, transform: 'rotate(90deg)' } }, // FIXED
+  rightTop: { style: { left: '100%', top: 0, marginLeft: 8 }, arrow: { right: '100%', top: 8, transform: 'rotate(-90deg)' } }, // FIXED
+  rightBottom: { style: { left: '100%', bottom: 0, marginLeft: 8 }, arrow: { right: '100%', bottom: 8, transform: 'rotate(-90deg)' } }, // FIXED
+};
+
+/**
+ * Tooltip component
+ * @example <TT content="Tooltip content">Hover me</TT>
+ * @example <TT content="Tooltip content" placement="t">Hover me</TT>
+ * @example <TT content={<>Tooltip content</>} placement="b">Hover me</TT>
+ * @example <TT content="Tooltip content" triggers={['click', 'contextMenu']}>Click or RightClick me</TT>
+ */
+
+function TT({
+  className,
+  children,
+  style = {},
+  content = undefined,
+  hideArrow = false,
+  triggers = 'hover',
+  placement: plcmnt = 'rt',
+  display = 'inline-block',
+  delay = [MOUSE_DELAY, MOUSE_DELAY],
+}: TooltipProps) {
+  // Placement mapping
+  type PlacementKey = 'top' | 'bottom' | 'left' | 'right' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+
+  let placement: PlacementKey = React.useMemo(() => {
+    if (plcmnt === 'r') return 'right';
+    if (plcmnt === 't') return 'top';
+    if (plcmnt === 'b') return 'bottom';
+    if (plcmnt === 'l') return 'left';
+    if (plcmnt === 'lt' || plcmnt === 'tl') return 'leftTop';
+    if (plcmnt === 'lb' || plcmnt === 'bl') return 'leftBottom';
+    if (plcmnt === 'rt' || plcmnt === 'tr') return 'rightTop';
+    if (plcmnt === 'rb' || plcmnt === 'br') return 'rightBottom';
+    return 'rightTop';
+  }, [plcmnt]);
+
+  let [visible, setVisible] = React.useState(false);
+  let showTimeout = React.useRef<NodeJS.Timeout | null>(null);
+  let hideTimeout = React.useRef<NodeJS.Timeout | null>(null);
+
+  let [delayShow, delayHide] = React.useMemo(() => {
+    if (typeof delay === 'number') return [delay, delay];
+    else if (Array.isArray(delay) && delay.length === 2) return delay;
+    else return [MOUSE_DELAY, MOUSE_DELAY];
+  }, [delay]);
+
+  // Triggers normalization
+  let triggerList = Array.isArray(triggers) ? triggers : [triggers];
+
+  // Show/hide logic
+  function showTooltip() {
+    if (hideTimeout.current) clearTimeout(hideTimeout.current);
+    showTimeout.current = setTimeout(() => setVisible(true), delayShow * 1000);
+  }
+  function hideTooltip() {
+    if (showTimeout.current) clearTimeout(showTimeout.current);
+    hideTimeout.current = setTimeout(() => setVisible(false), delayHide * 1000);
+  }
+
+  // Event handlers
+  let eventHandlers: Record<string, any> = {};
+  if (triggerList.includes('hover')) {
+    eventHandlers.onMouseEnter = showTooltip;
+    eventHandlers.onMouseLeave = hideTooltip;
+  }
+  if (triggerList.includes('focus')) {
+    eventHandlers.onFocus = showTooltip;
+    eventHandlers.onBlur = hideTooltip;
+  }
+  if (triggerList.includes('click')) eventHandlers.onClick = () => setVisible((v) => !v);
+
+  if (triggerList.includes('contextMenu'))
+    eventHandlers.onContextMenu = (e: React.MouseEvent) => {
+      e.preventDefault();
+      setVisible((v) => !v);
+    };
+
+  // Hide tooltip on scroll or resize
+  React.useEffect(() => {
+    if (!visible) return;
+
+    function hide() {
+      setVisible(false);
+    }
+    window.addEventListener('scroll', hide, true);
+    window.addEventListener('resize', hide);
+    return () => {
+      window.removeEventListener('scroll', hide, true);
+      window.removeEventListener('resize', hide);
+    };
+  }, [visible]);
+
+  // Tooltip content
+  const tooltipContent = (
+    <div
+      className="lbr-tooltip-inner"
+      style={{
+        ...placements[placement]?.style,
+      }}
+      role="tooltip"
+    >
+      {content}
+      {!hideArrow && (
+        <span
+          className="lbr-tooltip-arrow"
+          style={{
+            ...placements[placement]?.arrow,
+          }}
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <span className={className} style={{ ...style, position: 'relative', display }} tabIndex={triggerList.includes('focus') ? 0 : undefined} {...eventHandlers}>
+      {children}
+      {content && visible && tooltipContent}
+    </span>
+  );
+}
+
+export { TT as Tooltip };