From 1e9ded0355ecc1a9a46c2411267c4bd0f2c5d380 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 28 Jun 2024 13:19:16 +0200
Subject: [PATCH 1/5] feat(ActionBar): logic refactor

---
 .../ActionBar/ActionBar.module.scss           |  16 +--
 .../ActionBar/ActionBar.stories.tsx           |   2 +-
 .../src/components/ActionBar/ActionBar.tsx    | 113 +++++-------------
 .../components/ActionBar/ActionBarItem.tsx    |   5 -
 .../src/components/ActionBar/types.ts         |   2 -
 5 files changed, 35 insertions(+), 103 deletions(-)

diff --git a/packages/react-components/src/components/ActionBar/ActionBar.module.scss b/packages/react-components/src/components/ActionBar/ActionBar.module.scss
index 633bc79ab..5077e3d9f 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.module.scss
+++ b/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;
@@ -64,21 +58,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();
diff --git a/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx b/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
index 6d236e4b6..295ed071a 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
@@ -7,7 +7,7 @@ import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 import { ActionBar } from './ActionBar';
 import { getDefaultOptions } from './constants';
 
-const CONTAINER_SIZE = 220;
+const CONTAINER_SIZE = 260;
 
 export default {
   title: 'Components/ActionBar',
diff --git a/packages/react-components/src/components/ActionBar/ActionBar.tsx b/packages/react-components/src/components/ActionBar/ActionBar.tsx
index 104b33681..3518bcd5d 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.tsx
@@ -8,7 +8,7 @@ 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';
 
@@ -24,8 +24,10 @@ 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(
@@ -33,80 +35,44 @@ export const ActionBar: React.FC<IActionBarProps> = ({
     className,
     vertical && styles[`${baseClass}--vertical`]
   );
-  const observerOptions = {
-    root: document.querySelector(`${id}`),
-    threshold: 1,
-  };
-  const shouldDisplayMenu = !isScrollType && menuItemsKeys.length !== 0;
+  const singleElementSize = 44;
 
   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));
+    }
+  }, [options, visibleItemsCount]);
+
+  const shouldDisplayMenu = !isScrollType && menuOptions.length !== 0;
 
   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 exstraSpacing = menuOptions.length > 0 ? 60 : 0;
 
-      const observer = new IntersectionObserver(
-        handleIntersection,
-        observerOptions
-      );
+        const visibleOptionsCount = Math.floor(
+          (containerSize - exstraSpacing) / singleElementSize
+        );
+        setVisibleItemsCount(visibleOptionsCount);
+      });
 
-      target.forEach((e) => observer.observe(e));
+      // 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]);
 
-    return filteredOptions.map((o) => {
+  const getMenuItems = (menuOptions: IActionBarOption[]) =>
+    menuOptions.map((o) => {
       return {
         key: o.key,
         element: (
@@ -115,37 +81,19 @@ export const ActionBar: React.FC<IActionBarProps> = ({
         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,
-      };
-    }
 
-    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,7 +106,6 @@ export const ActionBar: React.FC<IActionBarProps> = ({
             buttonElement && styles[`${menuWrapperClass}--active`],
             vertical && styles[`${menuWrapperClass}--vertical`]
           )}
-          style={getMenuPosition(menuPosition, vertical)}
         >
           <ActionMenu
             selectedOptions={activeOptionKey ? [activeOptionKey] : []}
@@ -166,7 +113,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
             onClose={() => setIsMenuOpen(false)}
             floatingStrategy="fixed"
             placement={vertical ? 'left-start' : 'bottom-end'}
-            options={getMenuItems(menuItemsKeys)}
+            options={getMenuItems(menuOptions)}
             triggerClassName={cx(
               vertical && styles[`${menuWrapperClass}__trigger-vertical`]
             )}
diff --git a/packages/react-components/src/components/ActionBar/ActionBarItem.tsx b/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
index db9b2b91f..a0beaaae4 100644
--- a/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
@@ -13,28 +13,23 @@ 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`]}
     />
   );
diff --git a/packages/react-components/src/components/ActionBar/types.ts b/packages/react-components/src/components/ActionBar/types.ts
index f64b41ded..ca7ded06d 100644
--- a/packages/react-components/src/components/ActionBar/types.ts
+++ b/packages/react-components/src/components/ActionBar/types.ts
@@ -41,9 +41,7 @@ export interface IActionBarOption {
 }
 
 export interface IActionBarItem {
-  id: string;
   option: IActionBarOption;
-  isHidden: boolean;
   isActive?: boolean;
   vertical?: boolean;
 }

From e5b581bcd6763e285bc41c7c2c57b4c109047739 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 28 Jun 2024 13:34:25 +0200
Subject: [PATCH 2/5] feat(ActionBar): story change

---
 .../src/components/ActionBar/ActionBar.stories.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx b/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
index 295ed071a..6d236e4b6 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.stories.tsx
@@ -7,7 +7,7 @@ import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 import { ActionBar } from './ActionBar';
 import { getDefaultOptions } from './constants';
 
-const CONTAINER_SIZE = 260;
+const CONTAINER_SIZE = 220;
 
 export default {
   title: 'Components/ActionBar',

From bd9f7e9201bac92ea3147e29eb7a8550b0f1c913 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Fri, 28 Jun 2024 13:57:34 +0200
Subject: [PATCH 3/5] feat(ActionBar): change after review

---
 .../react-components/src/components/ActionBar/ActionBar.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/src/components/ActionBar/ActionBar.tsx b/packages/react-components/src/components/ActionBar/ActionBar.tsx
index 3518bcd5d..b92f01b9a 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.tsx
@@ -44,6 +44,8 @@ export const ActionBar: React.FC<IActionBarProps> = ({
 
     if (options.length !== visibleItemsCount) {
       setMenuOptions(options.slice(visibleItemsCount, options.length));
+    } else {
+      setMenuOptions([]);
     }
   }, [options, visibleItemsCount]);
 

From 169bc4d13fe37eb78137743d7382eca2a2d427d5 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Mon, 1 Jul 2024 13:27:26 +0200
Subject: [PATCH 4/5] feat(ActionBar): fix for logic loop

---
 .../ActionBar/ActionBar.module.scss           | 24 +++++++++++++++++++
 .../src/components/ActionBar/ActionBar.tsx    | 17 ++++++++-----
 .../components/ActionBar/ActionBarItem.tsx    |  7 +++++-
 .../src/components/ActionBar/constants.tsx    |  1 +
 .../src/components/ActionBar/types.ts         |  1 +
 5 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/ActionBar/ActionBar.module.scss b/packages/react-components/src/components/ActionBar/ActionBar.module.scss
index 5077e3d9f..8ad17257f 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.module.scss
+++ b/packages/react-components/src/components/ActionBar/ActionBar.module.scss
@@ -48,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: '';
+          }
+        }
       }
     }
 
diff --git a/packages/react-components/src/components/ActionBar/ActionBar.tsx b/packages/react-components/src/components/ActionBar/ActionBar.tsx
index b92f01b9a..953fb24c7 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.tsx
@@ -36,21 +36,20 @@ export const ActionBar: React.FC<IActionBarProps> = ({
     vertical && styles[`${baseClass}--vertical`]
   );
   const singleElementSize = 44;
+  const shouldDisplayMenu = !isScrollType && menuOptions.length !== 0;
 
   React.useEffect(() => {
     if (isScrollType) {
       return;
     }
 
-    if (options.length !== visibleItemsCount) {
+    if (options.length > visibleItemsCount) {
       setMenuOptions(options.slice(visibleItemsCount, options.length));
     } else {
       setMenuOptions([]);
     }
   }, [options, visibleItemsCount]);
 
-  const shouldDisplayMenu = !isScrollType && menuOptions.length !== 0;
-
   React.useEffect(() => {
     const hasIOSupport = !!window.ResizeObserver;
 
@@ -60,10 +59,15 @@ export const ActionBar: React.FC<IActionBarProps> = ({
         const containerSize = vertical ? height : width;
         const exstraSpacing = menuOptions.length > 0 ? 60 : 0;
 
-        const visibleOptionsCount = Math.floor(
+        const newVisibleOptionsCount = Math.floor(
           (containerSize - exstraSpacing) / singleElementSize
         );
-        setVisibleItemsCount(visibleOptionsCount);
+
+        if (
+          newVisibleOptionsCount >= 0 &&
+          newVisibleOptionsCount !== visibleItemsCount
+        )
+          setVisibleItemsCount(newVisibleOptionsCount);
       });
 
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -71,7 +75,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
 
       return () => observer.disconnect();
     }
-  }, [menuOptions, isScrollType]);
+  }, [menuOptions, isScrollType, visibleItemsCount]);
 
   const getMenuItems = (menuOptions: IActionBarOption[]) =>
     menuOptions.map((o) => {
@@ -80,6 +84,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
         element: (
           <ActionMenuItem leftNode={o.element}>{o.label}</ActionMenuItem>
         ),
+        withDivider: o.withDivider,
         onClick: o.onClick,
       };
     });
diff --git a/packages/react-components/src/components/ActionBar/ActionBarItem.tsx b/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
index a0beaaae4..4a390a7b5 100644
--- a/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBarItem.tsx
@@ -30,7 +30,12 @@ export const ActionBarItem: React.FC<IActionBarItem> = ({
       kind="plain"
       onClick={option.onClick}
       icon={option.element}
-      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,
+      })}
     />
   );
 
diff --git a/packages/react-components/src/components/ActionBar/constants.tsx b/packages/react-components/src/components/ActionBar/constants.tsx
index 4f7df5730..575287cea 100644
--- a/packages/react-components/src/components/ActionBar/constants.tsx
+++ b/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'),
   },
   {
diff --git a/packages/react-components/src/components/ActionBar/types.ts b/packages/react-components/src/components/ActionBar/types.ts
index ca7ded06d..35a63814b 100644
--- a/packages/react-components/src/components/ActionBar/types.ts
+++ b/packages/react-components/src/components/ActionBar/types.ts
@@ -35,6 +35,7 @@ export interface IActionBarOption {
   key: string;
   element: React.ReactElement;
   label: string;
+  withDivider?: boolean;
   showTooltip?: boolean;
   hideInMenu?: boolean;
   onClick: () => void;

From 18f39ac8b25781f1ea6e647683d584d55d0e62f7 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Wed, 3 Jul 2024 13:37:31 +0200
Subject: [PATCH 5/5] feat(ActionBar): changes after review

---
 .../src/components/ActionBar/ActionBar.tsx          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/components/ActionBar/ActionBar.tsx b/packages/react-components/src/components/ActionBar/ActionBar.tsx
index 953fb24c7..e5d9772c5 100644
--- a/packages/react-components/src/components/ActionBar/ActionBar.tsx
+++ b/packages/react-components/src/components/ActionBar/ActionBar.tsx
@@ -14,6 +14,7 @@ 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,
@@ -35,7 +36,6 @@ export const ActionBar: React.FC<IActionBarProps> = ({
     className,
     vertical && styles[`${baseClass}--vertical`]
   );
-  const singleElementSize = 44;
   const shouldDisplayMenu = !isScrollType && menuOptions.length !== 0;
 
   React.useEffect(() => {
@@ -57,10 +57,10 @@ export const ActionBar: React.FC<IActionBarProps> = ({
       const observer = new ResizeObserver((entries) => {
         const { width, height } = entries[0].contentRect;
         const containerSize = vertical ? height : width;
-        const exstraSpacing = menuOptions.length > 0 ? 60 : 0;
+        const extraSpacing = menuOptions.length > 0 ? 60 : 0;
 
         const newVisibleOptionsCount = Math.floor(
-          (containerSize - exstraSpacing) / singleElementSize
+          (containerSize - extraSpacing) / singleElementSize
         );
 
         if (
@@ -77,8 +77,8 @@ export const ActionBar: React.FC<IActionBarProps> = ({
     }
   }, [menuOptions, isScrollType, visibleItemsCount]);
 
-  const getMenuItems = (menuOptions: IActionBarOption[]) =>
-    menuOptions.map((o) => {
+  const getMenuItems = React.useCallback(() => {
+    return menuOptions.map((o) => {
       return {
         key: o.key,
         element: (
@@ -88,6 +88,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
         onClick: o.onClick,
       };
     });
+  }, [menuOptions]);
 
   const buttonElement = menuOptions.find((o) => o.key === activeOptionKey);
 
@@ -120,7 +121,7 @@ export const ActionBar: React.FC<IActionBarProps> = ({
             onClose={() => setIsMenuOpen(false)}
             floatingStrategy="fixed"
             placement={vertical ? 'left-start' : 'bottom-end'}
-            options={getMenuItems(menuOptions)}
+            options={getMenuItems()}
             triggerClassName={cx(
               vertical && styles[`${menuWrapperClass}__trigger-vertical`]
             )}