@inceptionbg/iui 2.0.8 → 2.0.11

package/src/components/Inputs/Selects/utils/selectStyles.ts

@@ -3,8 +3,10 @@ import { StylesConfig } from 'react-select';
 export const createSelectStyles = ({
   fontSize = 16,
   menuWidth,
+  size,
 }: {
   fontSize?: number;
+  size?: 's' | 'm';
   menuWidth?: 'fit-content' | 'max-content' | number;
 }) =>
   ({
@@ -14,7 +16,7 @@ export const createSelectStyles = ({
       borderWidth: 0,
       boxShadow: 'none',
       width: '100%',
-      // minHeight: size === 's' ? 12 : 36,
+      minHeight: size === 's' ? 12 : 36,
     }),
     container: provided => ({
       ...provided,
@@ -23,9 +25,7 @@ export const createSelectStyles = ({
     valueContainer: provided => ({
       ...provided,
       fontSize,
-      padding: '6px 0 6px 12px',
-      // fontSize: /*size === 's' ? 12 : */ 14,
-      // padding: /*size === 's' ? '0 4px' : */ state.isMulti ? '8px 14px' : '10px 14px',
+      padding: size === 's' ? '0 4px 0 8px' : '6px 0 6px 12px',
       gap: 4,
       width: '100%',
     }),
@@ -64,23 +64,20 @@ export const createSelectStyles = ({
       ...provided,
       padding: 0,
       margin: 0,
-      // height: size === 's' ? 24 : 36,
     }),
     option: (provided, state) => ({
       ...provided,
       fontSize,
-      // fontSize: /*size === 's' ? 12 : */ 14,
-      // padding: size === 's' ? 4 : provided.padding,
+      padding: size === 's' ? 4 : provided.padding,
       backgroundColor: state.isSelected
         ? 'var(--primary) !important'
         : state.isFocused
-        ? '#eee !important'
-        : 'inherit',
+          ? '#eee !important'
+          : 'inherit',
     }),
     noOptionsMessage: provided => ({
       ...provided,
       fontSize,
-      // fontSize: /*size === 's' ? 12 : */ 14,
       fontStyle: 'italic',
       textAlign: 'left',
       cursor: 'default',
@@ -97,8 +94,8 @@ export const createSelectStyles = ({
     indicatorSeparator: () => ({ display: 'none' }),
     dropdownIndicator: (provided, state) => ({
       ...provided,
-      // padding: size === 's' ? '4px' : provided.padding,
+      padding: size === 's' ? '4px' : provided.padding,
       transition: 'all .2s ease',
       transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
     }),
-  } as StylesConfig);
+  }) as StylesConfig;

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,29 +12,50 @@ 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) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const menuRect = menuRef.current.getBoundingClientRect();
-      const [placementY, placementX] = placement.split('-');
+      let [placementY, placementX] = placement.split('-');
+
+      setMinWidth(containerRect.width);
 
       let offsetTop = containerRect.bottom + 5;
-      // let offsetTop = containerRect.bottom + document.documentElement.scrollTop + 5;
 
-      const offsetLeft =
+      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);
       }
@@ -45,10 +67,21 @@ export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Pr
         );
       }
 
+      // 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) ||
-        placementY === 'top'
+        (placement.split('-')[0] === 'top' && placementY !== 'bottom')
       ) {
         offsetTop = containerRect.top - menuRect.height - 5; //+ document.documentElement.scrollTop
       }
@@ -57,14 +90,10 @@ export const useMenuPosition = ({ isOpen, placement, containerRef, menuRef }: Pr
     }
   }, [menuRef, containerRef, placement]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     isOpen
-      ? window.addEventListener('resize', recalculatePosition)
-      : window.removeEventListener('resize', recalculatePosition);
-    // Disable scroll & fix page resize on menu open
-    document.body.style.marginRight =
-      isOpen && window.innerWidth > document.body.clientWidth ? '19px' : '';
-    // document.body.style.overflow = isOpen ? 'hidden' : '';
+      ? document.addEventListener('resize', recalculatePosition)
+      : document.removeEventListener('resize', recalculatePosition);
 
     recalculatePosition();
     return () => {
@@ -72,9 +101,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,164 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { FC, KeyboardEventHandler, ReactNode, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { rootDir } from '../../utils/rootDir';
+import clsx from 'clsx';
+import { SearchInput } from '../Inputs/SearchInput';
+import { 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';
+import { ILocalPopupControl } from '../../types/IPopup';
+import { Loader } from '../Loader/Loader';
 
 interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  size: 's' | 'm' | 'l' | 'xl';
-  form?: {
-    isLoading: boolean;
-    onSubmit: (data: any) => void;
-    submitLabel?: string;
-    submitDisabled?: boolean;
+  id?: string;
+  control: ILocalPopupControl;
+  header?: {
+    title: string;
+    onSearch?: (search: string) => void;
   };
-  additionalButtons?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-    hidden?: boolean;
-    outlined?: boolean;
-    color?: IButtonColor;
-  }[];
+  isLoading?: boolean;
+  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,
+  id,
+  control,
+  header,
+  isLoading = false,
+  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({
+    control,
+    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
+          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">
+                  <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 */}
+                <Loader isLoading={isLoading}>
+                  <div className={clsx('pullover-content', contentClassName)}>
+                    {children}
+                  </div>
+                </Loader>
+
+                {/* FOOTER */}
+                {footer && (
+                  <div className={clsx('pullover-footer', className)}>
+                    {footer.additionalButton && (
+                      <Button
+                        {...footer.additionalButton}
+                        disabled={footer.additionalButton.disabled || isLoading}
+                        variant="simple"
+                        className="mr-auto"
+                      />
+                    )}
+                    <Button
+                      label={t('Cancel')}
+                      variant="outlined"
+                      onClick={onClose}
+                      disabled={isLoading}
+                    />
+                    <Button
+                      {...footer.confirmButton}
+                      label={footer.confirmButton.label ?? t('Confirm')}
+                      disabled={footer.confirmButton.disabled || isLoading}
+                      type={
+                        (footer.confirmButton.type ?? onFormSubmit) ? 'submit' : 'button'
+                      }
+                    />
+                  </div>
+                )}
+              </ConditionalWrapper>
             </div>
           </div>
         </div>,