@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Menu/hooks/useMenuPosition.tsx

@@ -1,116 +1,116 @@
-import type { RefObject } from 'react';
-import type { IAnyObject } from '../../../types/IBasic';
-import type { IMenuPlacement } from '../../../types/IMenu';
-import { useCallback, useLayoutEffect, useState } from 'react';
-
-interface Offsets {
-  offsetTop: number;
-  offsetLeft: number;
-}
-
-interface Props {
-  isOpen: boolean;
-  placement: IMenuPlacement;
-  containerRef: RefObject<Element | null>;
-  menuRef: RefObject<Element | null>;
-  withMinWidth?: boolean;
-}
-
-export const useMenuPosition = ({
-  isOpen,
-  placement,
-  containerRef,
-  menuRef,
-  withMinWidth,
-}: Props) => {
-  const [offsets, setOffsets] = useState<Offsets>({
-    offsetLeft: 0,
-    offsetTop: 0,
-  });
-  const [maxHeight, setMaxHeight] = useState<number>();
-  const [minWidth, setMinWidth] = useState(200);
-
-  const recalculatePosition = useCallback(() => {
-    if (containerRef.current && menuRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const menuRect = menuRef.current.getBoundingClientRect();
-      let [placementY, placementX] = placement.split('-');
-
-      setMinWidth(containerRect.width);
-
-      let offsetTop = containerRect.bottom + 5;
-
-      let offsetLeft =
-        containerRect.left +
-        (placementX === 'right' ? containerRect.width - menuRect.width : 0);
-      // + document.documentElement.scrollLeft;
-
-      // Check for horizontal overflow and adjust placement
-      if (placementX === 'right' && offsetLeft < 0) {
-        placementX = 'left';
-        offsetLeft = containerRect.left;
-      } else if (
-        placementX === 'left' &&
-        offsetLeft + menuRect.width > window.innerWidth
-      ) {
-        placementX = 'right';
-        offsetLeft = containerRect.left + containerRect.width - menuRect.width;
-      }
-
-      if (placementY === 'bottom') {
-        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
-      }
-
-      if (placementY === 'top') {
-        setMaxHeight(
-          window.innerHeight - containerRect.top + 40
-          // - 2 * document.documentElement.scrollTop
-        );
-      }
-
-      // Check for vertical overflow and adjust placement
-      if (placementY === 'bottom' && offsetTop + menuRect.height > window.innerHeight) {
-        placementY = 'top';
-        offsetTop = containerRect.top - menuRect.height - 5;
-        setMaxHeight(containerRect.top - 20);
-      } else if (placementY === 'top' && offsetTop < 0) {
-        placementY = 'bottom';
-        offsetTop = containerRect.bottom + 5;
-        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
-      }
-
-      // check for space on the bottom
-      if (
-        (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
-        (placement.split('-')[0] === 'top' && placementY !== 'bottom')
-      ) {
-        offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
-      }
-
-      setOffsets({ offsetTop, offsetLeft });
-    }
-  }, [menuRef, containerRef, placement]);
-
-  useLayoutEffect(() => {
-    isOpen
-      ? document.addEventListener('resize', recalculatePosition)
-      : document.removeEventListener('resize', recalculatePosition);
-
-    recalculatePosition();
-    return () => {
-      window.removeEventListener('resize', recalculatePosition);
-    };
-  }, [isOpen, recalculatePosition]);
-
-  const data: IAnyObject = {
-    top: offsets.offsetTop + 'px',
-    left: offsets.offsetLeft + 'px',
-    maxHeight,
-  };
-
-  if (withMinWidth) {
-    data.minWidth = minWidth;
-  }
-
-  return data;
-};
+import type { RefObject } from 'react';
+import type { IAnyObject } from '../../../types/IBasic';
+import type { IMenuPlacement } from '../../../types/IMenu';
+import { useCallback, useLayoutEffect, useState } from 'react';
+
+interface Offsets {
+  offsetTop: number;
+  offsetLeft: number;
+}
+
+interface Props {
+  isOpen: boolean;
+  placement: IMenuPlacement;
+  containerRef: RefObject<Element | null>;
+  menuRef: RefObject<Element | null>;
+  withMinWidth?: boolean;
+}
+
+export const useMenuPosition = ({
+  isOpen,
+  placement,
+  containerRef,
+  menuRef,
+  withMinWidth,
+}: Props) => {
+  const [offsets, setOffsets] = useState<Offsets>({
+    offsetLeft: 0,
+    offsetTop: 0,
+  });
+  const [maxHeight, setMaxHeight] = useState<number>();
+  const [minWidth, setMinWidth] = useState(200);
+
+  const recalculatePosition = useCallback(() => {
+    if (containerRef.current && menuRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const menuRect = menuRef.current.getBoundingClientRect();
+      let [placementY, placementX] = placement.split('-');
+
+      setMinWidth(containerRect.width);
+
+      let offsetTop = containerRect.bottom + 5;
+
+      let offsetLeft =
+        containerRect.left +
+        (placementX === 'right' ? containerRect.width - menuRect.width : 0);
+      // + document.documentElement.scrollLeft;
+
+      // Check for horizontal overflow and adjust placement
+      if (placementX === 'right' && offsetLeft < 0) {
+        placementX = 'left';
+        offsetLeft = containerRect.left;
+      } else if (
+        placementX === 'left' &&
+        offsetLeft + menuRect.width > window.innerWidth
+      ) {
+        placementX = 'right';
+        offsetLeft = containerRect.left + containerRect.width - menuRect.width;
+      }
+
+      if (placementY === 'bottom') {
+        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
+      }
+
+      if (placementY === 'top') {
+        setMaxHeight(
+          window.innerHeight - containerRect.top + 40
+          // - 2 * document.documentElement.scrollTop
+        );
+      }
+
+      // Check for vertical overflow and adjust placement
+      if (placementY === 'bottom' && offsetTop + menuRect.height > window.innerHeight) {
+        placementY = 'top';
+        offsetTop = containerRect.top - menuRect.height - 5;
+        setMaxHeight(containerRect.top - 20);
+      } else if (placementY === 'top' && offsetTop < 0) {
+        placementY = 'bottom';
+        offsetTop = containerRect.bottom + 5;
+        setMaxHeight(window.innerHeight - containerRect.bottom - 20);
+      }
+
+      // check for space on the bottom
+      if (
+        (placementY === 'auto' && offsetTop + menuRect.height > window.innerHeight) ||
+        (placement.split('-')[0] === 'top' && placementY !== 'bottom')
+      ) {
+        offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
+      }
+
+      setOffsets({ offsetTop, offsetLeft });
+    }
+  }, [menuRef, containerRef, placement]);
+
+  useLayoutEffect(() => {
+    isOpen
+      ? document.addEventListener('resize', recalculatePosition)
+      : document.removeEventListener('resize', recalculatePosition);
+
+    recalculatePosition();
+    return () => {
+      window.removeEventListener('resize', recalculatePosition);
+    };
+  }, [isOpen, recalculatePosition]);
+
+  const data: IAnyObject = {
+    top: offsets.offsetTop + 'px',
+    left: offsets.offsetLeft + 'px',
+    maxHeight,
+  };
+
+  if (withMinWidth) {
+    data.minWidth = minWidth;
+  }
+
+  return data;
+};

package/src/components/PageComponents/ScrollableContent.tsx

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  className?: string;
+  children: ReactNode;
+}
+
+export const ScrollableContent: FC<Props> = ({ className, children }) => (
+  <div className={clsx('scrollable-content', className)}>{children}</div>
+);

package/src/components/Pullover/Pullover.tsx

@@ -1,197 +1,197 @@
-import type { FC, KeyboardEventHandler, ReactNode } from 'react';
-import type { ILocalPopupControl } from '../../types/IPopup';
-import type { IDialogFooterActions } from '../Dialog/components/DialogFooter';
-import { useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { faXmark } from '../../assets/icons';
-import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
-import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
-import { onPopupKeyDown } from '../../utils/popupUtils';
-import { rootDir } from '../../utils/rootDir';
-import { Button } from '../Button/Button';
-import { IconButton } from '../Button/IconButton';
-import { SplitButton } from '../Button/SplitButton';
-import { SearchInput } from '../Inputs/SearchInput';
-import { Loader } from '../Loader/Loader';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-
-interface Props {
-  id?: string;
-  control: ILocalPopupControl;
-  header?: {
-    title: string;
-    onSearch?: (search: string) => void;
-  };
-  isFetching?: boolean;
-  isLoading?: boolean;
-  onFormSubmit?: () => void;
-  onContentClick?: () => void;
-  onCloseCallback?: () => void;
-  footer?: IDialogFooterActions;
-  size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
-  className?: string;
-  contentClassName?: string;
-  portalTarget?: HTMLElement;
-  children: ReactNode;
-}
-export const Pullover: FC<Props> = ({
-  id,
-  control,
-  header,
-  isFetching = false,
-  isLoading = false,
-  onFormSubmit,
-  onContentClick,
-  onCloseCallback,
-  footer,
-  size = 'vw50',
-  className,
-  contentClassName,
-  portalTarget,
-  children,
-}) => {
-  const { t } = useTranslation();
-  const searchRef = useRef<HTMLInputElement>(null);
-
-  const ConfirmButton = footer?.confirmButton?.splitActions ? SplitButton : Button;
-
-  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
-    control,
-    onCloseCallback,
-  });
-
-  const focusableElements = useGetFocusableElements({
-    elementRef,
-    isOpen,
-    autoFocusIndex: header?.onSearch ? 1 : 0,
-  });
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        elementRef.current?.classList.add('open');
-        elementRef.current?.focus();
-      });
-    }
-  }, [elementRef, isOpen]);
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
-    onPopupKeyDown(event, {
-      onClose,
-      enter: {
-        onAction: () => {
-          footer?.confirmButton?.onClick?.();
-          !footer?.confirmButton?.keepOpen && onClose();
-        },
-        disabled: !footer?.confirmButton?.onClick,
-      },
-      search: {
-        onAction: () => searchRef.current?.focus(),
-        disabled: !header?.onSearch,
-      },
-      focusableElements,
-    });
-  };
-
-  return isOpen
-    ? createPortal(
-        <div
-          id={id}
-          ref={elementRef}
-          className="pullover"
-          onClick={onClose}
-          aria-label="popup"
-          tabIndex={-1}
-          onKeyDown={onKeyDown}
-        >
-          <div className={clsx('container', size)} onClick={e => e.stopPropagation()}>
-            <div className={clsx('content', className)}>
-              {header && (
-                <div className="pullover-header no-print">
-                  <h3>{header.title}</h3>
-                  <div className="flex gap-2">
-                    {header.onSearch && (
-                      <SearchInput
-                        ref={searchRef}
-                        onSearch={header.onSearch}
-                        className="search-input"
-                      />
-                    )}
-                    <IconButton icon={faXmark} onClick={onClose} color="neutral" />
-                  </div>
-                </div>
-              )}
-              <ConditionalWrapper
-                condition={!!onFormSubmit}
-                wrapper={children => (
-                  <form
-                    className="pullover-form"
-                    onSubmit={e => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onFormSubmit?.();
-                    }}
-                  >
-                    {children}
-                  </form>
-                )}
-              >
-                {/* CONTENT */}
-                {isLoading ? (
-                  <Loader isLoading isFullPage />
-                ) : (
-                  <Loader isLoading={isFetching}>
-                    <div
-                      onClick={onContentClick}
-                      className={clsx('pullover-content', contentClassName)}
-                    >
-                      {children}
-                    </div>
-                  </Loader>
-                )}
-
-                {/* FOOTER */}
-                {footer && (
-                  <div className={clsx('pullover-footer no-print', className)}>
-                    {footer.additionalButton && (
-                      <Button
-                        {...footer.additionalButton}
-                        disabled={
-                          footer.additionalButton.disabled || isFetching || isLoading
-                        }
-                        variant="simple"
-                        className="mr-auto"
-                      />
-                    )}
-                    <Button
-                      label={t('Cancel')}
-                      variant="outlined"
-                      onClick={onClose}
-                      disabled={isFetching || isLoading}
-                    />
-                    {footer.confirmButton && (
-                      <ConfirmButton
-                        {...footer.confirmButton}
-                        label={footer.confirmButton.label ?? t('Confirm')}
-                        disabled={
-                          footer.confirmButton.disabled || isFetching || isLoading
-                        }
-                        type={
-                          (footer.confirmButton.type ?? onFormSubmit)
-                            ? 'submit'
-                            : 'button'
-                        }
-                      />
-                    )}
-                  </div>
-                )}
-              </ConditionalWrapper>
-            </div>
-          </div>
-        </div>,
-        portalTarget ?? rootDir
-      )
-    : null;
-};
+import type { FC, KeyboardEventHandler, ReactNode } from 'react';
+import type { ILocalPopupControl } from '../../types/IPopup';
+import type { IDialogFooterActions } from '../Dialog/components/DialogFooter';
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { faXmark } from '../../assets/icons';
+import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
+import { useLocalPopoverControl } from '../../hooks/useLocalPopoverControl';
+import { onPopupKeyDown } from '../../utils/popupUtils';
+import { rootDir } from '../../utils/rootDir';
+import { Button } from '../Button/Button';
+import { IconButton } from '../Button/IconButton';
+import { SplitButton } from '../Button/SplitButton';
+import { SearchInput } from '../Inputs/SearchInput';
+import { Loader } from '../Loader/Loader';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+
+interface Props {
+  id?: string;
+  control: ILocalPopupControl;
+  header?: {
+    title: string;
+    onSearch?: (search: string) => void;
+  };
+  isFetching?: boolean;
+  isLoading?: boolean;
+  onFormSubmit?: () => void;
+  onContentClick?: () => void;
+  onCloseCallback?: () => void;
+  footer?: IDialogFooterActions;
+  size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
+  className?: string;
+  contentClassName?: string;
+  portalTarget?: HTMLElement;
+  children: ReactNode;
+}
+export const Pullover: FC<Props> = ({
+  id,
+  control,
+  header,
+  isFetching = false,
+  isLoading = false,
+  onFormSubmit,
+  onContentClick,
+  onCloseCallback,
+  footer,
+  size = 'vw50',
+  className,
+  contentClassName,
+  portalTarget,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const ConfirmButton = footer?.confirmButton?.splitActions ? SplitButton : Button;
+
+  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
+    control,
+    onCloseCallback,
+  });
+
+  const focusableElements = useGetFocusableElements({
+    elementRef,
+    isOpen,
+    autoFocusIndex: header?.onSearch ? 1 : 0,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        elementRef.current?.classList.add('open');
+        elementRef.current?.focus();
+      });
+    }
+  }, [elementRef, isOpen]);
+
+  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
+    onPopupKeyDown(event, {
+      onClose,
+      enter: {
+        onAction: () => {
+          footer?.confirmButton?.onClick?.();
+          !footer?.confirmButton?.keepOpen && onClose();
+        },
+        disabled: !footer?.confirmButton?.onClick,
+      },
+      search: {
+        onAction: () => searchRef.current?.focus(),
+        disabled: !header?.onSearch,
+      },
+      focusableElements,
+    });
+  };
+
+  return isOpen
+    ? createPortal(
+        <div
+          id={id}
+          ref={elementRef}
+          className="pullover"
+          onClick={onClose}
+          aria-label="popup"
+          tabIndex={-1}
+          onKeyDown={onKeyDown}
+        >
+          <div className={clsx('container', size)} onClick={e => e.stopPropagation()}>
+            <div className={clsx('content', className)}>
+              {header && (
+                <div className="pullover-header no-print">
+                  <h3>{header.title}</h3>
+                  <div className="flex gap-2">
+                    {header.onSearch && (
+                      <SearchInput
+                        ref={searchRef}
+                        onSearch={header.onSearch}
+                        className="search-input"
+                      />
+                    )}
+                    <IconButton icon={faXmark} onClick={onClose} color="neutral" />
+                  </div>
+                </div>
+              )}
+              <ConditionalWrapper
+                condition={!!onFormSubmit}
+                wrapper={children => (
+                  <form
+                    className="pullover-form"
+                    onSubmit={e => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onFormSubmit?.();
+                    }}
+                  >
+                    {children}
+                  </form>
+                )}
+              >
+                {/* CONTENT */}
+                {isLoading ? (
+                  <Loader isLoading isFullPage />
+                ) : (
+                  <Loader isLoading={isFetching}>
+                    <div
+                      onClick={onContentClick}
+                      className={clsx('pullover-content', contentClassName)}
+                    >
+                      {children}
+                    </div>
+                  </Loader>
+                )}
+
+                {/* FOOTER */}
+                {footer && (
+                  <div className={clsx('pullover-footer no-print', className)}>
+                    {footer.additionalButton && (
+                      <Button
+                        {...footer.additionalButton}
+                        disabled={
+                          footer.additionalButton.disabled || isFetching || isLoading
+                        }
+                        variant="simple"
+                        className="mr-auto"
+                      />
+                    )}
+                    <Button
+                      label={t('Cancel')}
+                      variant="outlined"
+                      onClick={onClose}
+                      disabled={isFetching || isLoading}
+                    />
+                    {footer.confirmButton && (
+                      <ConfirmButton
+                        {...footer.confirmButton}
+                        label={footer.confirmButton.label ?? t('Confirm')}
+                        disabled={
+                          footer.confirmButton.disabled || isFetching || isLoading
+                        }
+                        type={
+                          (footer.confirmButton.type ?? onFormSubmit)
+                            ? 'submit'
+                            : 'button'
+                        }
+                      />
+                    )}
+                  </div>
+                )}
+              </ConditionalWrapper>
+            </div>
+          </div>
+        </div>,
+        portalTarget ?? rootDir
+      )
+    : null;
+};