@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Menu/Menu.tsx

@@ -1,80 +1,81 @@
-import clsx from 'clsx';
-import { FC, ReactNode, RefObject, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { rootDir } from '../../utils/rootDir';
-import { useMenuPosition } from './hooks/useMenuPosition';
-import { useBackgroundClose } from '../../hooks/useBackgroundClose';
-import { MenuItem } from './MenuItem';
-import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-
-interface Props {
-  id?: string;
-  isOpen: boolean;
-  onClose: () => void;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  items?: IMenuItem[];
-  placement?: IMenuPlacement;
-  size?: 's' | 'm' | 'l';
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Menu: FC<Props> = ({
-  id,
-  isOpen,
-  onClose,
-  renderButton,
-  items,
-  placement = 'bottom-left',
-  size,
-  className,
-  children,
-}) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const portalRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<Element>(null);
-
-  const menuStyle = useMenuPosition({
-    isOpen,
-    placement,
-    containerRef,
-    menuRef,
-  });
-
-  useBackgroundClose({ portalRef, disabled: !isOpen, handleClose: onClose });
-
-  return (
-    <>
-      {renderButton(containerRef)}
-      {isOpen
-        ? createPortal(
-            <div
-              id={id}
-              ref={portalRef}
-              className="portal-background"
-              onClick={e => e.stopPropagation()}
-            >
-              <div
-                ref={menuRef}
-                className={clsx('iui-menu', className, size)}
-                style={menuStyle}
-              >
-                {items?.map(item => (
-                  <MenuItem
-                    {...item}
-                    key={item.label}
-                    onClick={e => {
-                      item.onClick?.(e);
-                      !item.keepOpen && onClose();
-                    }}
-                  />
-                ))}
-                {children}
-              </div>
-            </div>,
-            rootDir
-          )
-        : null}
-    </>
-  );
-};
+import type { FC, ReactNode, RefObject } from 'react';
+import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
+import { useRef } from 'react';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { useBackgroundClose } from '../../hooks/useBackgroundClose';
+import { rootDir } from '../../utils/rootDir';
+import { useMenuPosition } from './hooks/useMenuPosition';
+import { MenuItem } from './MenuItem';
+
+interface Props {
+  id?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  renderButton: (ref: RefObject<any>) => ReactNode;
+  items?: IMenuItem[];
+  placement?: IMenuPlacement;
+  size?: 's' | 'm' | 'l';
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Menu: FC<Props> = ({
+  id,
+  isOpen,
+  onClose,
+  renderButton,
+  items,
+  placement = 'bottom-left',
+  size,
+  className,
+  children,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<Element>(null);
+
+  const menuStyle = useMenuPosition({
+    isOpen,
+    placement,
+    containerRef,
+    menuRef,
+  });
+
+  useBackgroundClose({ portalRef, disabled: !isOpen, handleClose: onClose });
+
+  return (
+    <>
+      {renderButton(containerRef)}
+      {isOpen
+        ? createPortal(
+            <div
+              id={id}
+              ref={portalRef}
+              className="portal-background"
+              onClick={e => e.stopPropagation()}
+            >
+              <div
+                ref={menuRef}
+                className={clsx('iui-menu', className, size)}
+                style={menuStyle}
+              >
+                {items?.map(item => (
+                  <MenuItem
+                    {...item}
+                    key={item.label}
+                    onClick={e => {
+                      item.onClick?.(e);
+                      !item.keepOpen && onClose();
+                    }}
+                  />
+                ))}
+                {children}
+              </div>
+            </div>,
+            rootDir
+          )
+        : null}
+    </>
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -1,46 +1,46 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper.js';
-import { Link } from 'react-router';
-import { NotificationBadge } from '../Badge/NotificationBadge.js';
-import { IMenuItem } from '../../types/IMenu.js';
-import { FC } from 'react';
-
-export const MenuItem: FC<IMenuItem> = ({
-  label,
-  icon,
-  iconRotation,
-  onClick,
-  to,
-  badge,
-  active,
-  disabled,
-  hidden,
-  withDevider,
-  className,
-}) =>
-  hidden ? null : (
-    <ConditionalWrapper
-      condition={!disabled && !!to}
-      wrapper={children => <Link to={to!}>{children}</Link>}
-    >
-      <div
-        className={clsx('iui-menu-item', className, {
-          clickable: !!onClick || !!to,
-          disabled,
-          active,
-          'with-devider': withDevider,
-        })}
-        onClick={disabled ? undefined : onClick}
-      >
-        {icon && (
-          <div className="menu-item-icon">
-            <FontAwesomeIcon icon={icon} rotation={iconRotation} />
-          </div>
-        )}
-        <NotificationBadge number={badge} size="s" className="menu-item-badge">
-          <p className="menu-item-label">{label}</p>
-        </NotificationBadge>
-      </div>
-    </ConditionalWrapper>
-  );
+import type { FC } from 'react';
+import type { IMenuItem } from '../../types/IMenu.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { Link } from 'react-router';
+import { NotificationBadge } from '../Badge/NotificationBadge.js';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper.js';
+
+export const MenuItem: FC<IMenuItem> = ({
+  label,
+  icon,
+  iconRotation,
+  onClick,
+  to,
+  badge,
+  active,
+  disabled,
+  hidden,
+  withDevider,
+  className,
+}) =>
+  hidden ? null : (
+    <ConditionalWrapper
+      condition={!disabled && !!to}
+      wrapper={children => <Link to={to!}>{children}</Link>}
+    >
+      <div
+        className={clsx('iui-menu-item', className, {
+          clickable: !!onClick || !!to,
+          disabled,
+          active,
+          'with-devider': withDevider,
+        })}
+        onClick={disabled ? undefined : onClick}
+      >
+        {icon && (
+          <div className="menu-item-icon">
+            <FontAwesomeIcon icon={icon} rotation={iconRotation} />
+          </div>
+        )}
+        <NotificationBadge number={badge} size="s" className="menu-item-badge">
+          <p className="menu-item-label">{label}</p>
+        </NotificationBadge>
+      </div>
+    </ConditionalWrapper>
+  );

package/src/components/Menu/NewMenu.tsx

@@ -1,63 +1,63 @@
-// import '@oddbird/popover-polyfill';
-// import polyfill from 'https://unpkg.com/@oddbird/css-anchor-positioning/fn';
-import '../../styles/components/_menu-v2.scss';
-
-import clsx from 'clsx';
-import { FC, ReactNode, RefObject, useEffect, useRef } from 'react';
-import { MenuItem } from './MenuItem';
-import { IMenuItem, IMenuPlacement } from '../../types/IMenu';
-
-interface Props {
-  id: string;
-  renderButton: (ref: RefObject<any>) => ReactNode;
-  items: IMenuItem[];
-  placement?: IMenuPlacement;
-  size?: 's' | 'm' | 'l';
-  className?: string;
-}
-
-export const MenuV2: FC<Props> = ({
-  id,
-  renderButton,
-  items,
-  placement = 'bottom-left',
-  size,
-  className,
-}) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // polyfill();
-    buttonRef.current?.setAttribute('popovertarget', id);
-    buttonRef.current?.style.setProperty('anchor-name', `--${id}`);
-    popoverRef.current?.style.setProperty('position-anchor', `--${id}`);
-  }, [id]);
-
-  return (
-    <>
-      {renderButton(buttonRef)}
-      <div
-        ref={popoverRef}
-        role="menu"
-        // @ts-ignore
-        popover="auto"
-        className={clsx('iui-menu-v2', size, placement)}
-        id={id}
-      >
-        <div className={className}>
-          {items.map(item => (
-            <MenuItem
-              {...item}
-              key={item.label}
-              onClick={e => {
-                item.onClick?.(e);
-                !item.keepOpen && popoverRef.current?.hidePopover();
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};
+// import '@oddbird/popover-polyfill';
+// import polyfill from 'https://unpkg.com/@oddbird/css-anchor-positioning/fn';
+import '../../styles/components/_menu-v2.scss';
+import type { FC, ReactNode, RefObject } from 'react';
+import type { IMenuItem, IMenuPlacement } from '../../types/IMenu';
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { MenuItem } from './MenuItem';
+
+interface Props {
+  id: string;
+  renderButton: (ref: RefObject<any>) => ReactNode;
+  items: IMenuItem[];
+  placement?: IMenuPlacement;
+  size?: 's' | 'm' | 'l';
+  className?: string;
+}
+
+export const MenuV2: FC<Props> = ({
+  id,
+  renderButton,
+  items,
+  placement = 'bottom-left',
+  size,
+  className,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // polyfill();
+    buttonRef.current?.setAttribute('popovertarget', id);
+    buttonRef.current?.style.setProperty('anchor-name', `--${id}`);
+    popoverRef.current?.style.setProperty('position-anchor', `--${id}`);
+  }, [id]);
+
+  return (
+    <>
+      {renderButton(buttonRef)}
+      <div
+        ref={popoverRef}
+        role="menu"
+        // @ts-ignore
+        popover="auto"
+        className={clsx('iui-menu-v2', size, placement)}
+        id={id}
+      >
+        <div className={className}>
+          {items.map(item => (
+            <MenuItem
+              {...item}
+              key={item.label}
+              onClick={e => {
+                item.onClick?.(e);
+                !item.keepOpen && popoverRef.current?.hidePopover();
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -1,115 +1,116 @@
-import { RefObject, useCallback, useLayoutEffect, useState } from 'react';
-import { IMenuPlacement } from '../../../types/IMenu';
-import { IAnyObject } from '../../../types/IBasic';
-
-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;
+};