feat(SplitButton): new component (#266)

* fix(SplitButton): test commit

* feat(SplitButton): add functionality

* fix(SplitButton): component UI styles

* fix(SplitButton): classnames duplication

* fix(SplitButton): add className and change onClick

* feat(Menu): open with enter functionailty

* feat(Profile): add accessibility and test fix

* fix(GlobalHeader): test

* fix(SplitButton): rename and change directory

* fix(Menu): children render

* fix(SplitButton): code refactor , change structure and logic

* fix(SplitButton): add loading logic

* fix(SplitButton): loading state and update styles

* fix(SplitButton): loader appearance

* feat(SplitButton): logic improvement

* fix(SplitButton): change type prop to layout

* fix(SplitButton): loading state

* feat(SplitButton): tests

* refactor(SplitButton): docs for props and props default values changes

Menu component types

---------

Co-authored-by: Galust <[email protected]>
Co-authored-by: abrahamyan.karen <[email protected]>
Co-authored-by: Sos Petrosyan <[email protected]>
Co-authored-by: Areg Hakobyan <[email protected]>

Author: 5 people

src/components/molecules/Menu/Menu.tsx

@@ -6,9 +6,12 @@ import React, {
     FC,
     FunctionComponentElement,
     JSX,
+    KeyboardEvent as ReactKeyboardEvent,
+    MouseEvent as ReactMouseEvent,
     MutableRefObject,
     ReactElement,
     SetStateAction,
+    useCallback,
     useContext,
     useEffect,
     useMemo,
@@ -52,6 +55,8 @@ type RelativeRefsSetter = (props: {
 
 type SizeType = "large" | "medium" | "small";
 
+type GenericObject = Record<string, unknown>;
+
 interface IMenuContextProps {
     onChangeHandler: (props: OnchangeHandlerType) => void;
     openSelectedPath?: boolean;
@@ -84,7 +89,7 @@ interface IMenuProps {
     /**
      * A function for setting additional props for the Popover component that wraps the menu.
      */
-    setPropsForPopover: Dispatch<SetStateAction<Record<string, unknown>>>;
+    setPropsForPopover: Dispatch<SetStateAction<GenericObject>>;
     /**
      * Menu size.<br/>
      * Default value is `small`.<br/>
@@ -174,30 +179,97 @@ const Menu: FC<IMenuProps> = ({
         setOpenSelectedPathState(openSelectedPath);
     }, [openSelectedPath]);
 
+    const toggleMenuOpen = useCallback(() => {
+        if (isMobileBreakpoint) {
+            setIsOpenState(true);
+            return;
+        }
+
+        setIsOpenState((prev) => {
+            if (prev) {
+                setPaths([]);
+            }
+            return !prev;
+        });
+    }, [isMobileBreakpoint]);
+
     useClickOutside(
         (e) => {
             const onMenuTargetClick =
                 e.target instanceof Node &&
                 popoverRef.current.referenceElement?.current instanceof Node &&
                 popoverRef.current.referenceElement.current.contains(e.target);
 
-            if (onMenuTargetClick) {
-                if (isMobileBreakpoint) {
-                    setIsOpenState(true);
-                } else {
-                    setIsOpenState((prev) => !prev);
-                    if (isOpenState) {
-                        setPaths([]);
-                    }
-                }
-            } else if (!isMobileBreakpoint) {
+            if (!onMenuTargetClick && !isMobileBreakpoint) {
                 setIsOpenState(false);
                 setPaths([]);
             }
         },
         [popoverRef.current.floatingElement, ...Object.values(relativeRefs)]
     );
 
+    const enhanceTriggerPropsRef = useRef<(triggerProps: GenericObject) => GenericObject>();
+
+    const enhanceTriggerProps = useCallback(
+        (triggerProps: GenericObject): GenericObject => {
+            if (!triggerProps || typeof triggerProps !== "object") {
+                return triggerProps;
+            }
+
+            const { onClick, onKeyDown, ...rest } = triggerProps as {
+                onClick?: (event: ReactMouseEvent<HTMLElement>) => void;
+                onKeyDown?: (event: ReactKeyboardEvent<HTMLElement>) => void;
+                [key: string]: unknown;
+            };
+
+            return {
+                ...rest,
+                onClick: (event: ReactMouseEvent<HTMLElement>) => {
+                    onClick?.(event);
+                    if (!event.defaultPrevented) {
+                        toggleMenuOpen();
+                    }
+                },
+                onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {
+                    onKeyDown?.(event);
+                    if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+                        event.preventDefault();
+                        toggleMenuOpen();
+                    }
+                }
+            };
+        },
+        [toggleMenuOpen]
+    );
+
+    // Keep the ref updated with the latest function
+    enhanceTriggerPropsRef.current = enhanceTriggerProps;
+
+    const setReferenceProps = useCallback(
+        (value: SetStateAction<GenericObject>) => {
+            const enhanceFn = enhanceTriggerPropsRef.current;
+            if (!enhanceFn) {
+                // Fallback if ref is not set yet
+                if (typeof value === "function") {
+                    setPropsForPopover((prev) => value(prev));
+                } else {
+                    setPropsForPopover(value);
+                }
+                return;
+            }
+
+            if (typeof value === "function") {
+                setPropsForPopover((prev) => {
+                    const nextValue = value(prev);
+                    return enhanceFn(nextValue);
+                });
+            } else {
+                setPropsForPopover(enhanceFn(value));
+            }
+        },
+        [setPropsForPopover]
+    );
+
     useEffect(() => {
         const defaultPath = findPathOfSelected(children);
         if (defaultPath && isOpenState && openSelectedPathState && !paths.length) {
@@ -293,7 +365,7 @@ const Menu: FC<IMenuProps> = ({
     return (
         <MenuContext.Provider value={memoizedMenuContextValue}>
             <Popover
-                setProps={setPropsForPopover}
+                setProps={setReferenceProps}
                 size={popoverSizeMapping[size]}
                 position={position}
                 withArrow={false}

src/components/molecules/Menu/MenuItem.tsx

@@ -143,9 +143,15 @@ const MenuItem: FC<IMenuItemProps> = (props) => {
         referenceElement: { current: null }
     });
 
+    const hasNestedContent = useMemo(() => {
+        if (typeof children === "string") return false;
+
+        return !!children;
+    }, [children]);
+
     const onItemClickHandler = (isBack: boolean) => {
         if (onChangeHandler && generatedId) {
-            const shouldCloseMenu = !!render || typeof children === "string";
+            const shouldCloseMenu = !!render || !hasNestedContent;
             onChangeHandler({
                 generatedId,
                 id,
@@ -273,7 +279,7 @@ const MenuItem: FC<IMenuItemProps> = (props) => {
 
     return swappable ? (
         <>
-            {typeof children !== "string" ? (
+            {hasNestedContent ? (
                 <>
                     {isActiveSwappableContent && !popoverOpenState && renderMenuItem("parent")}
                     <div
@@ -296,7 +302,7 @@ const MenuItem: FC<IMenuItemProps> = (props) => {
         </>
     ) : (
         <>
-            {typeof children !== "string" ? (
+            {hasNestedContent ? (
                 <>
                     {renderMenuItem("parent")}
                     <Popover

src/components/molecules/Profile/Profile.test.tsx

@@ -13,6 +13,12 @@ describe("Profile ", () => {
         setup = mount(<Profile profileData={profileData} />);
     });
 
+    afterEach(() => {
+        if (setup) {
+            setup.unmount();
+        }
+    });
+
     it("renders without crashing", () => {
         expect(setup.exists()).toBeTruthy();
     });

src/components/molecules/Profile/Profile.tsx

@@ -98,6 +98,16 @@ const Profile: FC<IProfileProps> = ({ className, onToggle, fullName, src, onProf
         if (onToggle) {
             onToggle(e, !isOpen);
         }
+        // Call the onClick from propsForPopover if it exists (from Menu's enhanced props)
+        const popoverOnClick = (
+            propsForPopover as {
+                onClick?: (event: MouseEvent<HTMLElement>) => void;
+            }
+        ).onClick;
+
+        if (popoverOnClick) {
+            popoverOnClick(e as MouseEvent<HTMLElement>);
+        }
 
         setIsOpen((prev) => !prev);
     };
@@ -110,9 +120,9 @@ const Profile: FC<IProfileProps> = ({ className, onToggle, fullName, src, onProf
         <div className="profile">
             <button
                 type="button"
-                onClick={onProfileClickHandler}
                 className={classNames("profile__button", className)}
                 {...propsForPopover}
+                onClick={onProfileClickHandler}
             >
                 <Avatar className="profile__avatar" fullName={fullName} Icon={PersonFilled} src={src} />
                 {!isMobileBreakpoint && (