@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Tooltip/Tooltip.tsx

@@ -1,191 +0,0 @@
-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 +0,0 @@
-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,57 +0,0 @@
-import type { FC } from 'react';
-import type { ITreeItem } from '../../types/ITree';
-import { useState } from 'react';
-import { faChevronRight } from '@inceptionbg/icons';
-import clsx from 'clsx';
-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 +0,0 @@
-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 +0,0 @@
-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;

package/src/components/Wrappers/FormWrapper.tsx

@@ -1,84 +0,0 @@
-import type { FC, FormEvent, ReactNode } from 'react';
-import type { IButtonColor, IButtonVariant } from '../Button/Button';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../Button/Button';
-import { Loader } from '../Loader/Loader';
-
-export interface IFormWrapper {
-  isLoading: boolean;
-  className?: string;
-  submitButton: {
-    label?: string;
-    icon?: any;
-    disabled?: boolean;
-    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
-    variant?: IButtonVariant;
-    color?: IButtonColor;
-  };
-  otherButtons?: {
-    label: string;
-    icon?: any;
-    onClick: () => void;
-    variant?: IButtonVariant;
-    color?: IButtonColor;
-    disabled?: boolean;
-    hidden?: boolean;
-  }[];
-  noAccess?: boolean;
-  children: ReactNode;
-}
-
-export const FormWrapper: FC<IFormWrapper> = ({
-  isLoading,
-  noAccess,
-  submitButton,
-  otherButtons,
-  className,
-  children,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Loader isLoading={isLoading}>
-      <form
-        className={className}
-        onSubmit={e => {
-          e.preventDefault();
-          e.stopPropagation();
-          !submitButton.disabled && submitButton.onSubmit(e);
-        }}
-      >
-        {children}
-        {(!noAccess || otherButtons) && (
-          <div className="iui-form-actions">
-            {otherButtons?.map(
-              e =>
-                !e.hidden && (
-                  <Button
-                    key={e.label}
-                    label={e.label}
-                    icon={e.icon}
-                    disabled={isLoading || e.disabled}
-                    variant={e.variant}
-                    color={e.color}
-                    onClick={e.onClick}
-                    type="button"
-                  />
-                )
-            )}
-            {!noAccess && (
-              <Button
-                label={submitButton.label ?? t('Save')}
-                // icon={submitButton.icon}
-                disabled={isLoading || submitButton.disabled}
-                variant={submitButton.variant}
-                color={submitButton.color}
-                type="submit"
-              />
-            )}
-          </div>
-        )}
-      </form>
-    </Loader>
-  );
-};

package/src/components/Wrappers/PageLayout.tsx

@@ -1,168 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import type { IHeaderAction } from '../../types/IHeader';
-import type { IMenuItem } from '../../types/IMenu';
-import { useLayoutEffect, useState } from 'react';
-import { faArrowLeft, faEllipsisVertical, faQuestion } from '@inceptionbg/icons';
-import clsx from 'clsx';
-import { Trans } from 'react-i18next';
-import { Link, useNavigate } from 'react-router';
-import { usePopupControl } from '../../hooks/usePopupControl';
-import { Button } from '../Button/Button';
-import { IconButton } from '../Button/IconButton';
-import { Loader } from '../Loader/Loader';
-import { Menu } from '../Menu/Menu';
-import { Pullover } from '../Pullover/Pullover';
-import { ConditionalWrapper } from './ConditionalWrapper';
-
-export interface IPageLayoutProps {
-  breadcrumbs?: (string | undefined)[];
-  actions?: IHeaderAction[];
-  moreActions?: IMenuItem[];
-  backButton?: {
-    url?: string;
-    active: boolean;
-  };
-  help?: {
-    title: string;
-    descEl: ReactNode;
-  };
-  noAccess?: boolean;
-  isInitiallyLoading?: boolean;
-  isLoading?: boolean;
-  footer?: {
-    default?: boolean;
-    text?: string;
-    custom?: ReactNode;
-  };
-  children?: ReactNode;
-}
-
-export const PageLayout: FC<IPageLayoutProps> = ({
-  breadcrumbs,
-  actions,
-  moreActions,
-  backButton,
-  help,
-  noAccess,
-  isLoading,
-  isInitiallyLoading,
-  footer,
-  children,
-}) => {
-  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
-  const helpControl = usePopupControl();
-
-  const navigate = useNavigate();
-  const filteredActions = moreActions?.filter(e => !e.hidden);
-
-  useLayoutEffect(() => {
-    noAccess && navigate('/no-access', { replace: true });
-  }, [noAccess, navigate]);
-
-  if (noAccess) {
-    return null;
-  }
-
-  if (isInitiallyLoading) {
-    return <Loader isLoading isFullPage />;
-  }
-
-  return (
-    <Loader isLoading={!!isLoading}>
-      <div className="page-container">
-        {breadcrumbs && (
-          <div className="page-header">
-            <div className="flex align-center gap-2">
-              {backButton?.active && (
-                <IconButton
-                  icon={faArrowLeft}
-                  onClick={() =>
-                    backButton.url ? navigate(backButton.url) : navigate(-1)
-                  }
-                  // outlined
-                  // size="s"
-                />
-              )}
-              {/* ////// BREADCRUMBS ////// */}
-              <h3 className="breadcrumbs">
-                {breadcrumbs.reduce(
-                  (acc: string, e) => (e ? (acc ? `${acc} / ${e}` : e) : acc),
-                  ''
-                )}
-              </h3>
-            </div>
-            {/* ////// ACTIONS ////// */}
-            <div className="flex align-center gap-2">
-              {help && (
-                <>
-                  <IconButton
-                    icon={faQuestion}
-                    onClick={helpControl.onOpen}
-                    variant="outlined"
-                    size="s"
-                  />
-                  <Pullover
-                    control={helpControl.control}
-                    header={{
-                      title: help.title,
-                    }}
-                    size="vw50"
-                  >
-                    {help.descEl}
-                  </Pullover>
-                </>
-              )}
-              {!!filteredActions?.length && (
-                <Menu
-                  // id="page-more-actions"
-                  isOpen={isMoreActionsOpen}
-                  onClose={() => setIsMoreActionsOpen(false)}
-                  placement="bottom-right"
-                  renderButton={ref => (
-                    <IconButton
-                      ref={ref}
-                      icon={faEllipsisVertical}
-                      active={isMoreActionsOpen}
-                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
-                      variant="outlined"
-                      size="s"
-                    />
-                  )}
-                  items={filteredActions}
-                />
-              )}
-              {actions?.map(
-                action =>
-                  !action.hidden && (
-                    <ConditionalWrapper
-                      key={action.label}
-                      condition={!!action.to}
-                      wrapper={children => <Link to={action.to!}>{children}</Link>}
-                    >
-                      <Button key={action.label} {...action} />
-                    </ConditionalWrapper>
-                  )
-              )}
-            </div>
-          </div>
-        )}
-        <div className="page-content">{children}</div>
-        {footer && (
-          <footer
-            className={clsx('page-footer', {
-              'm-0': footer?.default || footer?.text,
-            })}
-          >
-            {footer.custom ? (
-              footer.custom
-            ) : (
-              <p className="page-footer-text">
-                {footer.default ? <Trans i18nKey="FooterText" /> : footer.text}
-              </p>
-            )}
-          </footer>
-        )}
-      </div>
-    </Loader>
-  );
-};

package/src/hooks/useBackgroundClose.ts

@@ -1,19 +0,0 @@
-import type { RefObject } from 'react';
-import { useEffect } from 'react';
-
-interface Props {
-  disabled?: boolean;
-  portalRef: RefObject<HTMLDivElement | null>;
-  handleClose: () => void;
-}
-
-export const useBackgroundClose = ({ portalRef, disabled, handleClose }: Props) => {
-  useEffect(() => {
-    if (!disabled) {
-      const portal = portalRef.current;
-      const handleClick = (ev: MouseEvent) => ev.target === portal && handleClose();
-      portal?.addEventListener('click', handleClick);
-      return () => portal?.removeEventListener('click', handleClick);
-    }
-  }, [portalRef, disabled, handleClose]);
-};

package/src/hooks/useGetFocusableElements.ts

@@ -1,43 +0,0 @@
-import type { RefObject } from 'react';
-import { useEffect, useState } from 'react';
-
-export const useGetFocusableElements = ({
-  elementRef,
-  isOpen,
-  autoFocusIndex,
-}: {
-  elementRef: RefObject<HTMLDivElement | null>;
-  isOpen: boolean;
-  autoFocusIndex?: number;
-}) => {
-  const [focusableElements, setFocusableElements] = useState<HTMLElement[]>([]);
-
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element || !isOpen) return;
-
-    const focusableSelectors = [
-      'button:not([disabled]):not([tabindex="-1"])',
-      'input:not([disabled]):not([tabindex="-1"])',
-      'textarea:not([disabled]):not([tabindex="-1"])',
-      // 'select:not([disabled]):not([tabindex="-1"])',
-    ];
-
-    const focusables = Array.from(
-      element.querySelectorAll<HTMLElement>(focusableSelectors.join(','))
-    );
-
-    setFocusableElements(focusables);
-
-    // Autofocus
-    if (typeof autoFocusIndex === 'number' && focusables.length > autoFocusIndex) {
-      setTimeout(() => {
-        focusables[autoFocusIndex].focus();
-      }, 200);
-    } else {
-      element.focus();
-    }
-  }, [elementRef, isOpen, autoFocusIndex]);
-
-  return focusableElements;
-};

package/src/hooks/useIsMenuOpen.ts

@@ -1,11 +0,0 @@
-import { useState } from 'react';
-
-export const useIsMenuOpen = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return {
-    isOpen,
-    onOpen: () => setIsOpen(true),
-    onClose: () => setTimeout(() => setIsOpen(false)),
-  };
-};

package/src/hooks/useLocalPopoverControl.ts

@@ -1,63 +0,0 @@
-import type {
-  DeclarativeDialogProps,
-  ImperativeDialogProps,
-} from '../components/Dialog/Dialog';
-import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
-type Props = (ImperativeDialogProps | DeclarativeDialogProps) & {
-  onCloseCallback?: () => void;
-};
-
-export const useLocalPopoverControl = (props: Props) => {
-  const { control, onCloseCallback, isOpen: propsIsOpen, onClose } = props;
-  const elementRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Determine the operation mode
-  const isImperative = !!control;
-  const shouldBeOpen = isImperative ? control.isOpen : propsIsOpen;
-
-  const [isMounted, setIsMounted] = useState(shouldBeOpen);
-
-  // 3. Handle State Synchronization and Animation
-  useEffect(() => {
-    if (shouldBeOpen && !isMounted) {
-      timeoutRef.current && clearTimeout(timeoutRef.current);
-      elementRef.current?.classList.remove('closing');
-      setIsMounted(true);
-    } else if (!shouldBeOpen && isMounted) {
-      elementRef.current?.classList.add('closing');
-      timeoutRef.current = setTimeout(() => {
-        setIsMounted(false);
-        onCloseCallback?.();
-      }, 200);
-    }
-
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, [shouldBeOpen, isMounted, onCloseCallback]);
-
-  const handleCloseRequest = useCallback(() => {
-    if (isImperative) {
-      control.setIsOpen(false);
-    } else {
-      onClose();
-    }
-  }, [isImperative, control, onClose]);
-
-  const handleOpenRequest = useCallback(() => {
-    if (isImperative) control.setIsOpen(true);
-  }, [isImperative, control]);
-
-  useImperativeHandle(control?.controlRef, () => ({
-    onOpen: handleOpenRequest,
-    onClose: handleCloseRequest,
-  }));
-
-  return {
-    isOpen: isMounted,
-    onClose: handleCloseRequest,
-    elementRef,
-  };
-};