@inceptionbg/iui 2.0.7 → 2.0.10

package/src/components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { FC, ReactNode, RefObject, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { rootDir } from '../../utils/RootDir';
+import { rootDir } from '../../utils/rootDir';
 import { useMenuPosition } from './hooks/useMenuPosition';
 import { useBackgroundClose } from '../../hooks/useBackgroundClose';
 import { MenuItem } from './MenuItem';
@@ -55,7 +55,15 @@ export const Menu: FC<Props> = ({
                 style={menuStyle}
               >
                 {items?.map(item => (
-                  <MenuItem {...item} key={item.label} className={classNameItem} />
+                  <MenuItem
+                    {...item}
+                    key={item.label}
+                    className={classNameItem}
+                    onClick={e => {
+                      item.onClick?.(e);
+                      !item.keepOpen && onClose();
+                    }}
+                  />
                 ))}
                 {children}
               </div>

package/src/components/Menu/MenuItem.tsx

@@ -13,26 +13,27 @@ export const MenuItem: FC<IMenuItem> = ({
   onClick,
   to,
   badge,
+  active,
   disabled,
   hidden,
   withDevider,
   className,
 }) =>
   hidden ? null : (
-    <div>
+    <div
+      className={clsx(className, {
+        'iui-menu-item': !className,
+        clickable: !!onClick || !!to,
+        disabled,
+        active,
+        'with-devider': withDevider,
+      })}
+    >
       <ConditionalWrapper
         condition={!disabled && !!to}
         wrapper={children => <Link to={to!}>{children}</Link>}
       >
-        <div
-          className={clsx(className, {
-            'iui-menu-item': !className,
-            clickable: !!onClick || !!to,
-            disabled,
-            'with-devider': withDevider,
-          })}
-          onClick={disabled ? undefined : onClick}
-        >
+        <div className="menu-item-content" onClick={disabled ? undefined : onClick}>
           {icon && (
             <div className="menu-item-icon">
               <FontAwesomeIcon icon={icon} rotation={iconRotation} />

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

@@ -1,5 +1,6 @@
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import { RefObject, useCallback, useLayoutEffect, useState } from 'react';
 import { IMenuPlacement } from '../../../types/IMenu';
+import { IAnyObject } from '../../../types/IBasic';
 
 interface Offsets {
   offsetTop: number;
@@ -11,14 +12,22 @@ interface Props {
   placement: IMenuPlacement;
   containerRef: RefObject<Element | null>;
   menuRef: RefObject<Element | null>;
+  withMinWidth?: boolean;
 }
 
-export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Props) => {
+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) {
@@ -26,6 +35,8 @@ export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Pr
       const menuRect = menuRef.current.getBoundingClientRect();
       const [placementY, placementX] = placement.split('-');
 
+      setMinWidth(containerRect.width);
+
       let offsetTop = containerRect.bottom + 5;
       // let offsetTop = containerRect.bottom + document.documentElement.scrollTop + 5;
 
@@ -57,10 +68,10 @@ export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Pr
     }
   }, [menuRef, containerRef, placement]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     isOpen
-      ? window.addEventListener('resize', recalculatePosition)
-      : window.removeEventListener('resize', recalculatePosition);
+      ? document.addEventListener('resize', recalculatePosition)
+      : document.removeEventListener('resize', recalculatePosition);
     // Disable scroll & fix page resize on menu open
     document.body.style.marginRight =
       isOpen && window.innerWidth > document.body.clientWidth ? '19px' : '';
@@ -72,9 +83,15 @@ export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Pr
     };
   }, [isOpen, recalculatePosition]);
 
-  return {
+  const data: IAnyObject = {
     top: offsets.offsetTop + 'px',
     left: offsets.offsetLeft + 'px',
     maxHeight,
   };
+
+  if (withMinWidth) {
+    data.minWidth = minWidth;
+  }
+
+  return data;
 };

package/src/components/Pullover/Pullover.tsx

@@ -1,85 +1,148 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { FC, KeyboardEventHandler, ReactNode, Ref, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { rootDir } from '../../utils/rootDir';
+import clsx from 'clsx';
+import { SearchInput } from '../Inputs/SearchInput';
+import {
+  PopupControlRef,
+  useLocalPopoverControl,
+} from '../../hooks/useLocalPopoverControl';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { useGetFocusableElements } from '../../hooks/useGetFocusableElements';
+import { IDialogFooterActions } from '../Dialog/components/DialogFooter';
+import { Button } from '../Button/Button';
 import { useTranslation } from 'react-i18next';
-import { FormWrapper } from '../Wrappers/FormWrapper';
-import { rootDir } from '../../utils/RootDir';
-import { IButtonColor } from '../Button/Button';
+import { onPopupKeyDown } from '../../utils/popupUtils';
 
 interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  size: 's' | 'm' | 'l' | 'xl';
-  form?: {
-    isLoading: boolean;
-    onSubmit: (data: any) => void;
-    submitLabel?: string;
-    submitDisabled?: boolean;
+  controlRef: Ref<PopupControlRef>;
+  header?: {
+    title: string;
+    onSearch?: (search: string) => void;
   };
-  additionalButtons?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-    hidden?: boolean;
-    outlined?: boolean;
-    color?: IButtonColor;
-  }[];
+  onFormSubmit?: () => void;
+  onCloseCallback?: () => void;
+  footer?: IDialogFooterActions;
+  size?: 'vw25' | 'vw50' | 'vw75' | 'vw100' | 'w500' | 'w600';
+  className?: string;
+  contentClassName?: string;
   children: ReactNode;
 }
 
 export const Pullover: FC<Props> = ({
-  isOpen,
-  onClose,
-  size,
-  form,
-  additionalButtons,
+  controlRef,
+  header,
+  onFormSubmit,
+  onCloseCallback,
+  footer,
+  size = 'vw50',
+  className,
+  contentClassName,
   children,
 }) => {
-  const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
+  const searchRef = useRef<HTMLInputElement>(null);
 
-  const handleClose = useCallback(() => {
-    ref.current?.classList.add('closing');
-    setTimeout(onClose, 200);
-  }, [ref, onClose]);
+  const { elementRef, isOpen, onClose } = useLocalPopoverControl({
+    controlRef,
+    onCloseCallback,
+  });
+
+  const focusableElements = useGetFocusableElements({
+    elementRef,
+    isOpen,
+    autoFocusIndex: header?.onSearch ? 1 : 0,
+  });
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
-        ref.current?.classList.add('open');
+        elementRef.current?.classList.add('open');
+        elementRef.current?.focus();
       });
-      const handleClick = (e: KeyboardEvent) => {
-        e.code === 'Escape' && handleClose();
-      };
-      window.addEventListener('keydown', handleClick);
-      return () => window.removeEventListener('keydown', handleClick);
     }
-  }, [isOpen, handleClose]);
+  }, [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 ref={ref} className="pullover" onClick={handleClose}>
-          <div className={`container ${size}`} onClick={e => e.stopPropagation()}>
-            <div className="content">
-              {form ? (
-                <FormWrapper
-                  isLoading={form.isLoading}
-                  submitButton={{
-                    onSubmit: form.onSubmit,
-                    label: form.submitLabel,
-                    disabled: form.submitDisabled,
-                  }}
-                  otherButtons={[
-                    { label: t('Close'), onClick: handleClose },
-                    ...(additionalButtons?.filter(e => !e.hidden) || []),
-                  ]}
-                >
-                  <div className="flex column gap-2 flex-grow">{children}</div>
-                </FormWrapper>
-              ) : (
-                children
+        <div
+          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">
+                  <h3>{header.title}</h3>
+                  {header.onSearch && (
+                    <SearchInput
+                      ref={searchRef}
+                      onSearch={header.onSearch}
+                      className="search-input"
+                    />
+                  )}
+                </div>
               )}
+              <ConditionalWrapper
+                condition={!!onFormSubmit}
+                wrapper={children => (
+                  <form
+                    className="pullover-form"
+                    onSubmit={e => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onFormSubmit?.();
+                    }}
+                  >
+                    {children}
+                  </form>
+                )}
+              >
+                {/* CONTENT */}
+                <div className={clsx('pullover-content', contentClassName)}>
+                  {children}
+                </div>
+
+                {/* FOOTER */}
+                {footer && (
+                  <div className={clsx('pullover-footer', className)}>
+                    {footer.additionalButton && (
+                      <Button
+                        {...footer.additionalButton}
+                        variant="simple"
+                        className="mr-auto"
+                      />
+                    )}
+                    <Button label={t('Cancel')} variant="outlined" onClick={onClose} />
+                    <Button
+                      {...footer.confirmButton}
+                      label={footer.confirmButton.label ?? t('Confirm')}
+                    />
+                  </div>
+                )}
+              </ConditionalWrapper>
             </div>
           </div>
         </div>,