feat(ActionBar): logic refactor

packages/react-components/src/components/ActionBar/ActionBar.module.scss

@@ -10,17 +10,11 @@ $base-class: 'action-bar';
   &__items {
     display: flex;
     flex-direction: inherit;
-    width: 100%;
-    overflow: hidden;
 
     &--scroll {
       overflow: auto;
     }
 
-    &--with-menu {
-      margin-right: 78px;
-    }
-
     &__button-wrapper {
       display: flex;
       position: relative;
@@ -54,6 +48,30 @@ $base-class: 'action-bar';
           width: 24px;
           height: 24px;
         }
+
+        &--with-divider {
+          &::after {
+            position: absolute;
+            top: 0;
+            right: -5.5px;
+            bottom: 0;
+            background-color: var(--border-basic-secondary);
+            width: 1px;
+            content: '';
+          }
+        }
+
+        &--with-vertical-divider {
+          &::after {
+            position: absolute;
+            right: 0;
+            bottom: -5.5px;
+            left: 0;
+            background-color: var(--border-basic-secondary);
+            height: 1px;
+            content: '';
+          }
+        }
       }
     }
 
@@ -64,21 +82,19 @@ $base-class: 'action-bar';
 
   &__menu-wrapper {
     display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
+    position: relative;
     align-items: center;
+    margin-left: var(--spacing-1);
 
     &--active {
       @include select-indicator.select-indicator-h();
     }
 
     &--vertical {
-      right: 0;
-      bottom: auto;
-      left: 0;
       align-items: normal;
       justify-content: center;
+      margin-top: var(--spacing-1);
+      margin-left: 0;
 
       &.#{$base-class}__menu-wrapper--active {
         @include select-indicator.select-indicator-v();

packages/react-components/src/components/ActionBar/ActionBar.tsx

@@ -8,12 +8,13 @@ import { Button } from '../Button';
 import { Icon } from '../Icon';
 
 import { ActionBarItem } from './ActionBarItem';
-import { IActionBarProps } from './types';
+import { IActionBarOption, IActionBarProps } from './types';
 
 import styles from './ActionBar.module.scss';
 
 const baseClass = 'action-bar';
 const menuWrapperClass = 'action-bar__menu-wrapper';
+const singleElementSize = 44;
 
 export const ActionBar: React.FC<IActionBarProps> = ({
   className,
@@ -24,128 +25,83 @@ export const ActionBar: React.FC<IActionBarProps> = ({
   vertical,
   menuFooter,
 }) => {
-  const [menuItemsKeys, setMenuItemsKeys] = React.useState<string[]>([]);
-  const [menuPosition, setMenuPosition] = React.useState<number>(0);
+  const [visibleItemsCount, setVisibleItemsCount] = React.useState<number>(
+    options.length
+  );
+  const [menuOptions, setMenuOptions] = React.useState<IActionBarOption[]>([]);
   const [isMenuOpen, setIsMenuOpen] = React.useState<boolean>(false);
   const isScrollType = type === 'scroll';
   const mergedClassNames = cx(
     styles[baseClass],
     className,
     vertical && styles[`${baseClass}--vertical`]
   );
-  const observerOptions = {
-    root: document.querySelector(`${id}`),
-    threshold: 1,
-  };
-  const shouldDisplayMenu = !isScrollType && menuItemsKeys.length !== 0;
+  const shouldDisplayMenu = !isScrollType && menuOptions.length !== 0;
 
   React.useEffect(() => {
     if (isScrollType) {
       return;
     }
 
-    // Single element size with margin
-    const singleElementSize = 44;
-    // Extra spacing to include for menu placement
-    const menuPlacementSpacing = 4;
-    const allOptionsCount = options.length;
-    const hiddenOptionsCount = menuItemsKeys.length;
-    const visibleOptionsCount = allOptionsCount - hiddenOptionsCount;
-    const position =
-      visibleOptionsCount * singleElementSize + menuPlacementSpacing;
-
-    setMenuPosition(position);
-  }, [menuItemsKeys, options, isScrollType]);
-
-  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
-    entries.map((entry) => {
-      const entryExistInMenu = menuItemsKeys.includes(entry.target.id);
-
-      if (!entry.isIntersecting) {
-        entry.target.setAttribute('tabindex', '-1');
-
-        if (!entryExistInMenu) {
-          setMenuItemsKeys((prevItemKeys) => [
-            ...prevItemKeys,
-            entry.target.id,
-          ]);
-        }
-
-        return;
-      }
-
-      entry.target.removeAttribute('tabindex');
-
-      if (entryExistInMenu) {
-        setMenuItemsKeys(menuItemsKeys.filter((i) => i !== entry.target.id));
-      }
-    });
-  };
+    if (options.length > visibleItemsCount) {
+      setMenuOptions(options.slice(visibleItemsCount, options.length));
+    } else {
+      setMenuOptions([]);
+    }
+  }, [options, visibleItemsCount]);
 
   React.useEffect(() => {
-    const hasIOSupport = !!window.IntersectionObserver;
+    const hasIOSupport = !!window.ResizeObserver;
 
     if (!isScrollType && hasIOSupport) {
-      const target = document.querySelectorAll(
-        `button[data-actionbarid='${id}']`
-      );
+      const observer = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        const containerSize = vertical ? height : width;
+        const extraSpacing = menuOptions.length > 0 ? 60 : 0;
 
-      const observer = new IntersectionObserver(
-        handleIntersection,
-        observerOptions
-      );
+        const newVisibleOptionsCount = Math.floor(
+          (containerSize - extraSpacing) / singleElementSize
+        );
 
-      target.forEach((e) => observer.observe(e));
+        if (
+          newVisibleOptionsCount >= 0 &&
+          newVisibleOptionsCount !== visibleItemsCount
+        )
+          setVisibleItemsCount(newVisibleOptionsCount);
+      });
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      observer.observe(document.querySelector(`#${id}`)!);
 
       return () => observer.disconnect();
     }
-  }, [menuItemsKeys, isScrollType]);
-
-  const getMenuItems = (keys: string[]) => {
-    const filteredOptions = options.filter((row) =>
-      keys.find((k) => k === row.key && !row.hideInMenu)
-    );
+  }, [menuOptions, isScrollType, visibleItemsCount]);
 
-    return filteredOptions.map((o) => {
+  const getMenuItems = React.useCallback(() => {
+    return menuOptions.map((o) => {
       return {
         key: o.key,
         element: (
           <ActionMenuItem leftNode={o.element}>{o.label}</ActionMenuItem>
         ),
+        withDivider: o.withDivider,
         onClick: o.onClick,
       };
     });
-  };
-
-  const buttonElement = options
-    .filter((row) => menuItemsKeys.find((i) => i === row.key))
-    .find((o) => o.key === activeOptionKey);
-
-  const getMenuPosition = (position: number, vertical?: boolean) => {
-    if (vertical) {
-      return {
-        top: position,
-      };
-    }
+  }, [menuOptions]);
 
-    return {
-      left: position,
-    };
-  };
+  const buttonElement = menuOptions.find((o) => o.key === activeOptionKey);
 
   return (
     <div id={id} className={mergedClassNames}>
       <div
         className={cx(styles[`${baseClass}__items`], {
           [styles[`${baseClass}__items--scroll`]]: isScrollType,
-          [styles[`${baseClass}__items--with-menu`]]: shouldDisplayMenu,
         })}
       >
-        {options.map((o) => (
+        {options.slice(0, visibleItemsCount).map((o) => (
           <ActionBarItem
-            id={id}
             option={o}
-            isHidden={menuItemsKeys.includes(o.key)}
             isActive={o.key === activeOptionKey}
             vertical={vertical}
           />
@@ -158,15 +114,14 @@ export const ActionBar: React.FC<IActionBarProps> = ({
             buttonElement && styles[`${menuWrapperClass}--active`],
             vertical && styles[`${menuWrapperClass}--vertical`]
           )}
-          style={getMenuPosition(menuPosition, vertical)}
         >
           <ActionMenu
             selectedOptions={activeOptionKey ? [activeOptionKey] : []}
             onOpen={() => setIsMenuOpen(true)}
             onClose={() => setIsMenuOpen(false)}
             floatingStrategy="fixed"
             placement={vertical ? 'left-start' : 'bottom-end'}
-            options={getMenuItems(menuItemsKeys)}
+            options={getMenuItems()}
             triggerClassName={cx(
               vertical && styles[`${menuWrapperClass}__trigger-vertical`]
             )}

packages/react-components/src/components/ActionBar/ActionBarItem.tsx

@@ -13,29 +13,29 @@ const baseClass = 'action-bar__items';
 const menuWrapperClass = `${baseClass}__button-wrapper`;
 
 export const ActionBarItem: React.FC<IActionBarItem> = ({
-  id,
   option,
-  isHidden,
   isActive,
   vertical,
 }) => {
   const mergedButtonClassNames = cx(styles[menuWrapperClass], {
-    [styles[`${menuWrapperClass}--hidden`]]: isHidden,
     [styles[`${menuWrapperClass}--active`]]: isActive,
     [styles[`${menuWrapperClass}--vertical`]]: vertical,
   });
 
   const button = (
     <Button
-      data-actionbarid={id}
       id={option.key}
       key={option.key}
       title={option?.showTooltip ? undefined : option.label}
       kind="plain"
       onClick={option.onClick}
       icon={option.element}
-      disabled={isHidden}
-      className={styles[`${menuWrapperClass}__button`]}
+      className={cx(styles[`${menuWrapperClass}__button`], {
+        [styles[`${menuWrapperClass}__button--with-vertical-divider`]]:
+          vertical && option.withDivider,
+        [styles[`${menuWrapperClass}__button--with-divider`]]:
+          !vertical && option.withDivider,
+      })}
     />
   );
 

packages/react-components/src/components/ActionBar/constants.tsx

@@ -35,6 +35,7 @@ export const getDefaultOptions = (
     element: <Icon source={Adjust} kind="primary" />,
     label: 'Three test',
     showTooltip: true,
+    withDivider: true,
     onClick: () => onClickHandler('three'),
   },
   {

packages/react-components/src/components/ActionBar/types.ts

@@ -35,15 +35,14 @@ export interface IActionBarOption {
   key: string;
   element: React.ReactElement;
   label: string;
+  withDivider?: boolean;
   showTooltip?: boolean;
   hideInMenu?: boolean;
   onClick: () => void;
 }
 
 export interface IActionBarItem {
-  id: string;
   option: IActionBarOption;
-  isHidden: boolean;
   isActive?: boolean;
   vertical?: boolean;
 }