@inceptionbg/iui 2.0.22 → 2.0.24

package/src/components/Tooltip/Tooltip.tsx

@@ -1,200 +1,191 @@
-import clsx from 'clsx';
-import {
-  cloneElement,
-  Dispatch,
-  FC,
-  ReactElement,
-  Ref,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { rootDir } from '../../utils/rootDir';
-
-export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom';
-
-interface Props {
-  label?: string;
-  position?: TooltipPosition;
-  disabled?: boolean;
-  singleLine?: boolean;
-  className?: string;
-  children: ReactElement;
-  ref?: Ref<HTMLElement> | null;
-}
-
-export const Tooltip: FC<Props> = ({
-  label,
-  position = 'top',
-  disabled,
-  singleLine,
-  className,
-  children,
-  ref,
-}) => {
-  const [newPosition, setNewPosition] = useState<TooltipPosition | ''>('');
-
-  const internalRef = useRef<HTMLElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!disabled && !!label) {
-      const getContainer = () => {
-        if (ref && 'current' in ref) {
-          return ref.current;
-        }
-        return internalRef.current;
-      };
-
-      const container = getContainer();
-      const tooltip = tooltipRef.current;
-
-      const onMouseEnter = () => {
-        if (container && tooltip) {
-          setAbsolutePosition(container, tooltip, position, setNewPosition);
-          tooltip.classList.add('visible');
-        }
-      };
-      const onMouseLeave = () => tooltip?.classList.remove('visible');
-
-      if (container) {
-        container.addEventListener('mouseenter', onMouseEnter);
-        container.addEventListener('mouseleave', onMouseLeave);
-
-        return () => {
-          container.removeEventListener('mouseenter', onMouseEnter);
-          container.removeEventListener('mouseleave', onMouseLeave);
-        };
-      }
-    }
-  }, [disabled, label, position, ref]);
-
-  return !!label && !disabled ? (
-    <>
-      {/* @ts-ignore */}
-      {cloneElement(children, { ref: ref || internalRef })}
-      {createPortal(
-        <div
-          ref={tooltipRef}
-          className={clsx('tooltip-container', className, {
-            'no-wrap': singleLine,
-          })}
-        >
-          <div className="tooltip">
-            <div className={clsx('arrow', newPosition || position)} />
-            <div>{label}</div>
-          </div>
-        </div>,
-        rootDir
-      )}
-    </>
-  ) : (
-    children
-  );
-};
-
-const setAbsolutePosition = (
-  containerEl: HTMLElement,
-  targetEl: HTMLDivElement,
-  position: TooltipPosition,
-  setNewPosition: Dispatch<SetStateAction<TooltipPosition | ''>>
-) => {
-  const containerRect = containerEl.getBoundingClientRect();
-  const tooltipRect = targetEl.getBoundingClientRect();
-  const margin = 16; // Distance from container
-  const screenPadding = 8; // Minimum distance from screen edges
-
-  if (position === 'bottom' || position === 'top') {
-    const bottom = Math.floor(containerRect.bottom + margin);
-    const top = Math.floor(containerRect.top - tooltipRect.height - margin);
-    let leftCenter = Math.floor(
-      containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
-    );
-
-    // Check if tooltip overflows horizontally and adjust
-    if (leftCenter < screenPadding) {
-      targetEl.style.width = `${tooltipRect.width + leftCenter}px`;
-      leftCenter = screenPadding;
-    } else if (leftCenter + tooltipRect.width > window.innerWidth - screenPadding) {
-      leftCenter = window.innerWidth - tooltipRect.width - screenPadding;
-    }
-
-    const reverse =
-      position === 'top' ? top < 0 : bottom + tooltipRect.height > window.innerHeight;
-
-    setNewPosition(reverse ? (position === 'bottom' ? 'top' : 'bottom') : '');
-
-    let finalTop =
-      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top;
-
-    // Ensure tooltip doesn't go above screen
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    }
-    // Ensure tooltip doesn't go below screen
-    if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    targetEl.style.top = `${finalTop}px`;
-    targetEl.style.left = `${leftCenter}px`;
-  } else if (position === 'right') {
-    let finalTop = Math.floor(
-      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-    );
-    let finalLeft = Math.floor(containerRect.right + margin);
-
-    // Check if tooltip overflows vertically and adjust
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    // Check if tooltip overflows to the right and flip to left
-    if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
-      finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
-      setNewPosition('left');
-
-      // If it still overflows on the left, position it at the edge
-      if (finalLeft < screenPadding) {
-        finalLeft = screenPadding;
-      }
-    } else {
-      setNewPosition('');
-    }
-
-    targetEl.style.top = `${finalTop}px`;
-    targetEl.style.left = `${finalLeft}px`;
-  } else if (position === 'left') {
-    let finalTop = Math.floor(
-      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-    );
-    let finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
-
-    // Check if tooltip overflows vertically and adjust
-    if (finalTop < screenPadding) {
-      finalTop = screenPadding;
-    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
-      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
-    }
-
-    // Check if tooltip overflows to the left and flip to right
-    if (finalLeft < screenPadding) {
-      finalLeft = Math.floor(containerRect.right + margin);
-      setNewPosition('right');
-
-      // If it still overflows on the right, position it at the edge
-      if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
-        finalLeft = window.innerWidth - tooltipRect.width - screenPadding;
-      }
-    } else {
-      setNewPosition('');
-    }
-
-    targetEl.style.top = `${finalTop}px`;
-    targetEl.style.left = `${finalLeft}px`;
-  }
-};
+import type { Dispatch, FC, ReactElement, Ref, SetStateAction } from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { rootDir } from '../../utils/rootDir';
+
+export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom';
+
+interface Props {
+  label?: string;
+  position?: TooltipPosition;
+  disabled?: boolean;
+  singleLine?: boolean;
+  className?: string;
+  children: ReactElement;
+  ref?: Ref<HTMLElement> | null;
+}
+
+export const Tooltip: FC<Props> = ({
+  label,
+  position = 'top',
+  disabled,
+  singleLine,
+  className,
+  children,
+  ref,
+}) => {
+  const [newPosition, setNewPosition] = useState<TooltipPosition | ''>('');
+
+  const internalRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!disabled && !!label) {
+      const getContainer = () => {
+        if (ref && 'current' in ref) {
+          return ref.current;
+        }
+        return internalRef.current;
+      };
+
+      const container = getContainer();
+      const tooltip = tooltipRef.current;
+
+      const onMouseEnter = () => {
+        if (container && tooltip) {
+          setAbsolutePosition(container, tooltip, position, setNewPosition);
+          tooltip.classList.add('visible');
+        }
+      };
+      const onMouseLeave = () => tooltip?.classList.remove('visible');
+
+      if (container) {
+        container.addEventListener('mouseenter', onMouseEnter);
+        container.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+          container.removeEventListener('mouseenter', onMouseEnter);
+          container.removeEventListener('mouseleave', onMouseLeave);
+        };
+      }
+    }
+  }, [disabled, label, position, ref]);
+
+  return !!label && !disabled ? (
+    <>
+      {/* @ts-ignore */}
+      {cloneElement(children, { ref: ref || internalRef })}
+      {createPortal(
+        <div
+          ref={tooltipRef}
+          className={clsx('tooltip-container', className, {
+            'no-wrap': singleLine,
+          })}
+        >
+          <div className="tooltip">
+            <div className={clsx('arrow', newPosition || position)} />
+            <div>{label}</div>
+          </div>
+        </div>,
+        rootDir
+      )}
+    </>
+  ) : (
+    children
+  );
+};
+
+const setAbsolutePosition = (
+  containerEl: HTMLElement,
+  targetEl: HTMLDivElement,
+  position: TooltipPosition,
+  setNewPosition: Dispatch<SetStateAction<TooltipPosition | ''>>
+) => {
+  const containerRect = containerEl.getBoundingClientRect();
+  const tooltipRect = targetEl.getBoundingClientRect();
+  const margin = 16; // Distance from container
+  const screenPadding = 8; // Minimum distance from screen edges
+
+  if (position === 'bottom' || position === 'top') {
+    const bottom = Math.floor(containerRect.bottom + margin);
+    const top = Math.floor(containerRect.top - tooltipRect.height - margin);
+    let leftCenter = Math.floor(
+      containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
+    );
+
+    // Check if tooltip overflows horizontally and adjust
+    if (leftCenter < screenPadding) {
+      targetEl.style.width = `${tooltipRect.width + leftCenter}px`;
+      leftCenter = screenPadding;
+    } else if (leftCenter + tooltipRect.width > window.innerWidth - screenPadding) {
+      leftCenter = window.innerWidth - tooltipRect.width - screenPadding;
+    }
+
+    const reverse =
+      position === 'top' ? top < 0 : bottom + tooltipRect.height > window.innerHeight;
+
+    setNewPosition(reverse ? (position === 'bottom' ? 'top' : 'bottom') : '');
+
+    let finalTop =
+      position === 'bottom' ? (reverse ? top : bottom) : reverse ? bottom : top;
+
+    // Ensure tooltip doesn't go above screen
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    }
+    // Ensure tooltip doesn't go below screen
+    if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.left = `${leftCenter}px`;
+  } else if (position === 'right') {
+    let finalTop = Math.floor(
+      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+    );
+    let finalLeft = Math.floor(containerRect.right + margin);
+
+    // Check if tooltip overflows vertically and adjust
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    // Check if tooltip overflows to the right and flip to left
+    if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
+      finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
+      setNewPosition('left');
+
+      // If it still overflows on the left, position it at the edge
+      if (finalLeft < screenPadding) {
+        finalLeft = screenPadding;
+      }
+    } else {
+      setNewPosition('');
+    }
+
+    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.left = `${finalLeft}px`;
+  } else if (position === 'left') {
+    let finalTop = Math.floor(
+      containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+    );
+    let finalLeft = Math.floor(containerRect.left - tooltipRect.width - margin);
+
+    // Check if tooltip overflows vertically and adjust
+    if (finalTop < screenPadding) {
+      finalTop = screenPadding;
+    } else if (finalTop + tooltipRect.height > window.innerHeight - screenPadding) {
+      finalTop = window.innerHeight - tooltipRect.height - screenPadding;
+    }
+
+    // Check if tooltip overflows to the left and flip to right
+    if (finalLeft < screenPadding) {
+      finalLeft = Math.floor(containerRect.right + margin);
+      setNewPosition('right');
+
+      // If it still overflows on the right, position it at the edge
+      if (finalLeft + tooltipRect.width > window.innerWidth - screenPadding) {
+        finalLeft = window.innerWidth - tooltipRect.width - screenPadding;
+      }
+    } else {
+      setNewPosition('');
+    }
+
+    targetEl.style.top = `${finalTop}px`;
+    targetEl.style.left = `${finalLeft}px`;
+  }
+};

package/src/components/Tree/Tree.tsx

@@ -1,22 +1,22 @@
-import { FC } from 'react';
-import { TreeItem } from './TreeItem';
-import { ITreeItem } from '../../types/ITree';
-
-interface Props {
-  data: ITreeItem[];
-  selectedItemUuid?: string;
-  onClick: (itemUuid: string) => void;
-}
-
-export const Tree: FC<Props> = ({ data, selectedItemUuid, onClick }) => (
-  <div>
-    {data.map(item => (
-      <TreeItem
-        key={item.uuid}
-        item={item}
-        onClick={onClick}
-        selectedItemUuid={selectedItemUuid}
-      />
-    ))}
-  </div>
-);
+import type { FC } from 'react';
+import type { ITreeItem } from '../../types/ITree';
+import { TreeItem } from './TreeItem';
+
+interface Props {
+  data: ITreeItem[];
+  selectedItemUuid?: string;
+  onClick: (itemUuid: string) => void;
+}
+
+export const Tree: FC<Props> = ({ data, selectedItemUuid, onClick }) => (
+  <div>
+    {data.map(item => (
+      <TreeItem
+        key={item.uuid}
+        item={item}
+        onClick={onClick}
+        selectedItemUuid={selectedItemUuid}
+      />
+    ))}
+  </div>
+);

package/src/components/Tree/TreeItem.tsx

@@ -1,56 +1,57 @@
-import { FC, useState } from 'react';
-import { ITreeItem } from '../../types/ITree';
-import clsx from 'clsx';
-import { IconButton } from '../Button/IconButton';
-import { Collapse } from '../Helper/Collapse';
-import { faChevronRight } from '../../assets/icons';
-
-interface Props {
-  item: ITreeItem;
-  onClick: (itemUuid: string) => void;
-  selectedItemUuid?: string;
-  className?: string;
-}
-
-export const TreeItem: FC<Props> = ({ item, onClick, selectedItemUuid, className }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const hasChildren = !!item.children?.length;
-  return (
-    <div className={clsx('tree-item', className)}>
-      <div className="flex align-center">
-        <div className="extendable-icon">
-          {hasChildren && (
-            <IconButton
-              icon={faChevronRight}
-              onClick={() => setIsOpen(!isOpen)}
-              size="s"
-              className={clsx('rotate', { rotate90: isOpen })}
-            />
-          )}
-        </div>
-        <div
-          className={clsx('tree-item-name clickable', {
-            active: selectedItemUuid === item.uuid,
-          })}
-          onClick={() => onClick(item.uuid)}
-        >
-          {item.name}
-        </div>
-      </div>
-      {hasChildren && (
-        <Collapse isOpen={isOpen}>
-          {item.children?.map((child: ITreeItem) => (
-            <TreeItem
-              key={child.uuid}
-              item={child}
-              onClick={onClick}
-              className={clsx('ml-3', className)}
-              selectedItemUuid={selectedItemUuid}
-            />
-          ))}
-        </Collapse>
-      )}
-    </div>
-  );
-};
+import type { FC } from 'react';
+import type { ITreeItem } from '../../types/ITree';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { faChevronRight } from '../../assets/icons';
+import { IconButton } from '../Button/IconButton';
+import { Collapse } from '../Helper/Collapse';
+
+interface Props {
+  item: ITreeItem;
+  onClick: (itemUuid: string) => void;
+  selectedItemUuid?: string;
+  className?: string;
+}
+
+export const TreeItem: FC<Props> = ({ item, onClick, selectedItemUuid, className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hasChildren = !!item.children?.length;
+  return (
+    <div className={clsx('tree-item', className)}>
+      <div className="flex align-center">
+        <div className="extendable-icon">
+          {hasChildren && (
+            <IconButton
+              icon={faChevronRight}
+              onClick={() => setIsOpen(!isOpen)}
+              size="s"
+              className={clsx('rotate', { rotate90: isOpen })}
+            />
+          )}
+        </div>
+        <div
+          className={clsx('tree-item-name clickable', {
+            active: selectedItemUuid === item.uuid,
+          })}
+          onClick={() => onClick(item.uuid)}
+        >
+          {item.name}
+        </div>
+      </div>
+      {hasChildren && (
+        <Collapse isOpen={isOpen}>
+          {item.children?.map((child: ITreeItem) => (
+            <TreeItem
+              key={child.uuid}
+              item={child}
+              onClick={onClick}
+              className={clsx('ml-3', className)}
+              selectedItemUuid={selectedItemUuid}
+            />
+          ))}
+        </Collapse>
+      )}
+    </div>
+  );
+};

package/src/components/Wrappers/AppLayout.tsx

@@ -1,17 +1,17 @@
-import { ComponentProps, FC, ReactNode } from 'react';
-import { Header } from '../Header/Header';
-import { Sidebar } from '../Sidebar/Sidebar';
-
-interface Props {
-  header: ComponentProps<typeof Header>;
-  sidebar: ComponentProps<typeof Sidebar>;
-  children: ReactNode;
-}
-
-export const AppLayout: FC<Props> = ({ header, sidebar, children }) => (
-  <div className="app-layout">
-    <Header {...header} />
-    <Sidebar {...sidebar} />
-    <div className="app-content">{children}</div>
-  </div>
-);
+import type { ComponentProps, FC, ReactNode } from 'react';
+import { Header } from '../Header/Header';
+import { Sidebar } from '../Sidebar/Sidebar';
+
+interface Props {
+  header: ComponentProps<typeof Header>;
+  sidebar: ComponentProps<typeof Sidebar>;
+  children: ReactNode;
+}
+
+export const AppLayout: FC<Props> = ({ header, sidebar, children }) => (
+  <div className="app-layout">
+    <Header {...header} />
+    <Sidebar {...sidebar} />
+    <div className="app-content">{children}</div>
+  </div>
+);

package/src/components/Wrappers/ConditionalWrapper.tsx

@@ -1,10 +1,10 @@
-import { FC, ReactNode } from 'react';
-
-interface Props {
-  condition: boolean;
-  wrapper: (children: ReactNode) => ReactNode;
-  children: ReactNode;
-}
-
-export const ConditionalWrapper: FC<Props> = ({ condition, wrapper, children }) =>
-  condition ? wrapper(children) : children;
+import type { FC, ReactNode } from 'react';
+
+interface Props {
+  condition: boolean;
+  wrapper: (children: ReactNode) => ReactNode;
+  children: ReactNode;
+}
+
+export const ConditionalWrapper: FC<Props> = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children;