@gooddata/sdk-ui-kit 10.38.0 → 10.39.0-alpha.1

package/esm/Header/Header.js

@@ -1,5 +1,5 @@
 // (C) 2007-2025 GoodData Corporation
-import React, { Component, createRef } from "react";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { injectIntl, FormattedMessage } from "react-intl";
 import cx from "classnames";
 import differenceInMonths from "date-fns/differenceInMonths/index.js";
@@ -33,108 +33,62 @@ function getWidthOfChildren(element, selector = "> *") {
         .map(getOuterWidth)
         .reduce((sum, childWidth) => sum + childWidth, SAFETY_PADDING);
 }
-class AppHeaderCore extends Component {
-    static defaultProps = {
-        logoHref: "/",
-        helpMenuDropdownAlignPoints: "br tr",
-        accountMenuItems: [],
-        helpMenuItems: [],
-        menuItemsGroups: [],
-        search: null,
-        notificationsPanel: null,
-    };
-    nodeRef = createRef();
-    resizeHandler = debounce(() => this.measure(), 100);
-    stylesheet;
-    constructor(props) {
-        super(props);
-        this.state = {
-            childrenWidth: 0,
-            guid: `header-${uuid()}`,
-            isOverlayMenuOpen: false,
-            responsiveMode: false,
-            isHelpMenuOpen: false,
-            isSearchMenuOpen: false,
-            isNotificationsMenuOpen: false,
-        };
-    }
-    render() {
-        const { workspacePicker, isAccessibilityCompliant, intl } = this.props;
-        this.createStyles();
-        const logoLinkClassName = cx({
-            "gd-header-logo": true,
-            "gd-header-measure": true,
-            "gd-header-shrink": this.state.responsiveMode,
-        });
-        const applicationHeaderAccessibilityLabel = intl.formatMessage({
-            id: "gs.header.accessibility.label",
-        });
-        return (React.createElement("header", { "aria-label": applicationHeaderAccessibilityLabel, className: this.getClassNames(), ref: this.nodeRef },
-            isAccessibilityCompliant
-                ? this.renderAccessibilityLogo(logoLinkClassName)
-                : this.renderLogo(logoLinkClassName),
-            workspacePicker,
-            this.renderNav()));
-    }
-    componentDidMount() {
-        window.addEventListener("resize", this.resizeHandler);
-    }
-    componentWillUnmount() {
-        window.removeEventListener("resize", this.resizeHandler);
-        removeFromDom(this.stylesheet);
-    }
-    renderLogo(logoLinkClassName) {
-        const { logoUrl, logoTitle } = this.props;
-        return (React.createElement("a", { href: this.props.logoHref, onClick: this.props.onLogoClick, className: logoLinkClassName },
-            React.createElement("img", { src: logoUrl, title: logoTitle, onLoad: this.measureChildren, onError: this.measureChildren, alt: "" })));
-    }
-    renderAccessibilityLogo(logoLinkClassName) {
-        const { logoUrl, logoTitle, intl } = this.props;
-        const logoHrefAccesibilityText = intl.formatMessage({
-            id: "gs.header.href.accessibility",
-        });
-        const imageAltAccessibilityText = intl.formatMessage({
-            id: "gs.header.logo.title.accessibility",
-        });
-        return (React.createElement("a", { "aria-label": logoHrefAccesibilityText, title: logoHrefAccesibilityText, href: this.props.logoHref, onClick: this.props.onLogoClick, className: logoLinkClassName },
-            React.createElement("img", { src: logoUrl, title: logoTitle, onLoad: this.measureChildren, onError: this.measureChildren, alt: imageAltAccessibilityText })));
-    }
-    getClassNames = () => {
-        return cx({
-            "gd-header": true,
-            [this.state.guid]: true,
-            [this.props.className]: !!this.props.className,
-        });
-    };
-    measureChildren = () => {
-        const currentDOMNode = this.nodeRef.current;
+function AppHeaderCore(props) {
+    const { logoHref = "/", accountMenuItems = [], helpMenuItems = [], menuItemsGroups = [], search = null, notificationsPanel = null, workspacePicker, isAccessibilityCompliant, intl, logoUrl, logoTitle, className, activeColor, headerColor, headerTextColor, documentationUrl, expiredDate, showUpsellButton, onUpsellButtonClick, badges, showStaticHelpMenu, userName, theme, helpMenuDropdownAlignPoints: helpDropdownAlign, disableHelpDropdown, onHelpClick, helpRedirectUrl, showInviteItem, onInviteItemClick, showChatItem, onChatItemClick, onLogoClick, onMenuItemClick, } = props;
+    const [state, setState] = useState({
+        childrenWidth: 0,
+        guid: `header-${uuid()}`,
+        isOverlayMenuOpen: false,
+        responsiveMode: false,
+        isHelpMenuOpen: false,
+        isSearchMenuOpen: false,
+        isNotificationsMenuOpen: false,
+    });
+    const nodeRef = useRef(null);
+    const stylesheetRef = useRef(null);
+    const measureChildren = useCallback(() => {
+        const currentDOMNode = nodeRef.current;
         const childrenWidth = getWidthOfChildren(currentDOMNode, ".gd-header-measure");
-        this.setState({
+        setState((prevState) => ({
+            ...prevState,
             childrenWidth,
-        }, this.measure);
-    };
-    measure = () => {
-        const currentDOMNode = this.nodeRef.current;
+        }));
+    }, []);
+    const measure = useCallback(() => {
+        const currentDOMNode = nodeRef.current;
         if (!currentDOMNode) {
             // ref is null because 'this.measure()' is called after 100ms 'componentWillUnmount' called,
             // which cleans the nodeRef
             return;
         }
         const currentWidth = currentDOMNode.clientWidth;
-        const responsiveMode = currentWidth < this.state.childrenWidth;
-        if (this.state.responsiveMode !== responsiveMode) {
-            this.setState({
+        const responsiveMode = currentWidth < state.childrenWidth;
+        if (state.responsiveMode !== responsiveMode) {
+            setState((prevState) => ({
+                ...prevState,
                 responsiveMode,
                 isOverlayMenuOpen: false,
                 isHelpMenuOpen: false,
                 isSearchMenuOpen: false,
                 isNotificationsMenuOpen: false,
-            });
+            }));
         }
-    };
-    createStyles = () => {
-        const { guid } = this.state;
-        const { activeColor, headerColor, headerTextColor } = this.props;
+    }, [state.childrenWidth, state.responsiveMode]);
+    const resizeHandler = useMemo(() => debounce(() => measure(), 100), [measure]);
+    useEffect(() => {
+        measure();
+    }, [state.childrenWidth, measure]);
+    useEffect(() => {
+        window.addEventListener("resize", resizeHandler);
+        return () => {
+            window.removeEventListener("resize", resizeHandler);
+            if (stylesheetRef.current) {
+                removeFromDom(stylesheetRef.current);
+            }
+        };
+    }, [resizeHandler]);
+    const createStyles = useCallback(() => {
+        const { guid } = state;
         const textColor = getTextColor(headerTextColor, headerColor);
         const itemActiveColor = getItemActiveColor(activeColor, headerColor);
         const itemHoverColor = getItemHoverColor(headerColor, activeColor);
@@ -150,87 +104,90 @@ class AppHeaderCore extends Component {
         css.push(`.${guid} .hamburger-icon:not(.is-open) i { border-color: ${textColor}}`);
         css.push(`.${guid} .hamburger-icon:not(.is-open):after { border-color: ${textColor}}`);
         css.push(`.${guid} .hamburger-icon:not(.is-open):before { border-color: ${textColor}}`);
-        this.stylesheet = addCssToStylesheet(`header-css-${guid}`, css.join("\n"), true);
-    };
-    setOverlayMenu = (isOverlayMenuOpen) => {
-        this.setState({
+        stylesheetRef.current = addCssToStylesheet(`header-css-${guid}`, css.join("\n"), true);
+    }, [state, activeColor, headerColor, headerTextColor]);
+    const setOverlayMenu = useCallback((isOverlayMenuOpen) => {
+        setState((prevState) => ({
+            ...prevState,
             isOverlayMenuOpen,
             isHelpMenuOpen: false,
             isSearchMenuOpen: false,
             isNotificationsMenuOpen: false,
-        });
-    };
-    toggleSearchMenu = () => {
-        this.setState(({ isSearchMenuOpen }) => ({
-            isSearchMenuOpen: !isSearchMenuOpen,
+        }));
+    }, []);
+    const toggleSearchMenu = useCallback(() => {
+        setState((prevState) => ({
+            ...prevState,
+            isSearchMenuOpen: !prevState.isSearchMenuOpen,
             isHelpMenuOpen: false,
             isNotificationsMenuOpen: false,
         }));
-    };
-    toggleNotificationsMenu = () => {
-        this.setState(({ isNotificationsMenuOpen }) => ({
-            isNotificationsMenuOpen: !isNotificationsMenuOpen,
+    }, []);
+    const toggleNotificationsMenu = useCallback(() => {
+        setState((prevState) => ({
+            ...prevState,
+            isNotificationsMenuOpen: !prevState.isNotificationsMenuOpen,
             isHelpMenuOpen: false,
             isSearchMenuOpen: false,
         }));
-    };
-    closeNotificationsMenu = () => {
-        this.setState(() => ({
+    }, []);
+    const closeNotificationsMenu = useCallback(() => {
+        setState((prevState) => ({
+            ...prevState,
             isNotificationsMenuOpen: false,
             isHelpMenuOpen: false,
             isSearchMenuOpen: false,
             isOverlayMenuOpen: false,
         }));
-    };
-    setHelpMenu = (isHelpMenuOpen) => {
-        this.setState({
+    }, []);
+    const setHelpMenu = useCallback((isHelpMenuOpen) => {
+        setState((prevState) => ({
+            ...prevState,
             isHelpMenuOpen,
             isSearchMenuOpen: false,
             isNotificationsMenuOpen: false,
-        });
-    };
-    toggleHelpMenu = () => this.setHelpMenu(!this.state.isHelpMenuOpen);
-    handleMenuItemClick = (item, event) => {
-        if (this.state.isHelpMenuOpen) {
-            this.setOverlayMenu(false);
+        }));
+    }, []);
+    const toggleHelpMenu = useCallback(() => setHelpMenu(!state.isHelpMenuOpen), [setHelpMenu, state]);
+    const handleMenuItemClick = useCallback((item, event) => {
+        if (state.isHelpMenuOpen) {
+            setOverlayMenu(false);
         }
-        this.props.onMenuItemClick(item, event);
-    };
-    addHelpItemGroup = (itemGroups) => {
-        return !this.props.documentationUrl ? itemGroups : [...itemGroups, [this.getHelpMenuLink()]];
-    };
-    addAdditionalItems = (itemGroups) => {
+        onMenuItemClick(item, event);
+    }, [state, setOverlayMenu, onMenuItemClick]);
+    const getHelpMenuLink = useCallback((icon = "gd-icon-header-help") => ({
+        key: "gs.header.help",
+        className: `s-menu-help ${icon}`,
+        href: state.responsiveMode && helpMenuItems ? undefined : documentationUrl,
+        onClick: state.responsiveMode && helpMenuItems ? toggleHelpMenu : undefined,
+    }), [state, helpMenuItems, documentationUrl, toggleHelpMenu]);
+    const addHelpItemGroup = useCallback((itemGroups) => {
+        return !documentationUrl ? itemGroups : [...itemGroups, [getHelpMenuLink()]];
+    }, [documentationUrl, getHelpMenuLink]);
+    const addAdditionalItems = useCallback((itemGroups) => {
         const additionalItems = [];
-        if (this.props.search) {
+        if (search) {
             additionalItems.push({
                 key: "gs.header.search",
                 className: "gd-icon-header-search",
-                onClick: this.toggleSearchMenu,
+                onClick: toggleSearchMenu,
             });
         }
-        if (this.props.notificationsPanel) {
+        if (notificationsPanel) {
             additionalItems.push({
                 key: "gs.header.notifications",
                 className: "gd-icon-header-notifications",
                 icon: React.createElement(Icon.Alert, { width: 16, height: 16 }),
-                onClick: this.toggleNotificationsMenu,
+                onClick: toggleNotificationsMenu,
             });
         }
         if (!additionalItems.length) {
             return itemGroups;
         }
         return [...itemGroups, additionalItems];
-    };
-    getHelpMenu = () => [
-        [this.getHelpMenuLink("gd-icon-header-help-back"), ...this.props.helpMenuItems],
-    ];
-    getHelpMenuLink = (icon = "gd-icon-header-help") => ({
-        key: "gs.header.help",
-        className: `s-menu-help ${icon}`,
-        href: this.state.responsiveMode && this.props.helpMenuItems ? undefined : this.props.documentationUrl,
-        onClick: this.state.responsiveMode && this.props.helpMenuItems ? this.toggleHelpMenu : undefined,
-    });
-    getTrialCountdown = (expiredDate) => {
+    }, [search, notificationsPanel, toggleSearchMenu, toggleNotificationsMenu]);
+    const getHelpMenu = useCallback(() => [[getHelpMenuLink("gd-icon-header-help-back"), ...helpMenuItems]], [getHelpMenuLink, helpMenuItems]);
+    const getTrialCountdown = useCallback((expiredDate) => {
         // expiredDate is the last day that user can use the service
         const trialDaysLeft = differenceInCalendarDays(new Date(expiredDate), new Date()) + 1;
         if (trialDaysLeft === 1) {
@@ -248,116 +205,202 @@ class AppHeaderCore extends Component {
             return (React.createElement(FormattedMessage, { id: "gs.header.countdown.numberOfMonthsLeft", values: { number: trialMonthsLeft + 1 } }));
         }
         return "";
-    };
-    renderNav = () => {
-        return this.state.responsiveMode ? this.renderMobileNav() : this.renderStandardNav();
-    };
-    renderMobileNav = () => {
-        const iconClasses = cx({
-            "hamburger-icon": true,
-            "is-open": this.state.isOverlayMenuOpen,
-            "search-open": this.state.isSearchMenuOpen,
-            "notifications-open": this.state.isNotificationsMenuOpen,
+    }, []);
+    const getClassNames = useCallback(() => {
+        return cx({
+            "gd-header": true,
+            [state.guid]: true,
+            [className]: !!className,
         });
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "hamburger-wrapper", key: "hamburger-wrapper" },
-                React.createElement("div", { className: iconClasses, key: "hamburger-icon", onClick: () => {
-                        this.setOverlayMenu(!this.state.isOverlayMenuOpen);
-                    } },
-                    React.createElement("i", null))),
-            this.state.isOverlayMenuOpen ? this.renderOverlayMenu() : null));
-    };
-    renderOverlayMenu = () => {
-        let content = this.renderVerticalMenu();
-        if (this.state.isSearchMenuOpen) {
-            content = this.renderSearchMenu();
-        }
-        if (this.state.isNotificationsMenuOpen) {
-            content = this.renderNotificationsOverlay();
-        }
-        return (React.createElement(Overlay, { key: "header-overlay-menu", alignPoints: [
-                {
-                    align: this.state.isSearchMenuOpen || this.state.isNotificationsMenuOpen
-                        ? "tl tl"
-                        : "tr tr",
-                },
-            ], closeOnOutsideClick: this.state.isOverlayMenuOpen, isModal: this.state.isOverlayMenuOpen, positionType: "fixed", onClose: () => {
-                this.setOverlayMenu(false);
-            } }, content));
-    };
-    renderSearchMenu = () => {
+    }, [state.guid, className]);
+    const renderLogo = useCallback((logoLinkClassName) => {
+        return (React.createElement("a", { href: logoHref, onClick: onLogoClick, className: logoLinkClassName },
+            React.createElement("img", { src: logoUrl, title: logoTitle, onLoad: measureChildren, onError: measureChildren, alt: "" })));
+    }, [logoHref, onLogoClick, logoUrl, logoTitle, measureChildren]);
+    const renderAccessibilityLogo = useCallback((logoLinkClassName) => {
+        const logoHrefAccesibilityText = intl.formatMessage({
+            id: "gs.header.href.accessibility",
+        });
+        const imageAltAccessibilityText = intl.formatMessage({
+            id: "gs.header.logo.title.accessibility",
+        });
+        return (React.createElement("a", { "aria-label": logoHrefAccesibilityText, title: logoHrefAccesibilityText, href: logoHref, onClick: onLogoClick, className: logoLinkClassName },
+            React.createElement("img", { src: logoUrl, title: logoTitle, onLoad: measureChildren, onError: measureChildren, alt: imageAltAccessibilityText })));
+    }, [intl, logoHref, onLogoClick, logoUrl, logoTitle, measureChildren]);
+    const renderSearchMenu = useCallback(() => {
         return (React.createElement("div", { className: "gd-header-menu-search" },
             React.createElement(Typography, { tagName: "h3", className: "gd-header-menu-search-title" },
                 React.createElement(FormattedMessage, { id: "gs.header.search" })),
-            React.createElement(HeaderSearchProvider, { isOpen: this.state.isSearchMenuOpen, toggleOpen: this.toggleSearchMenu }, this.props.search)));
-    };
-    renderNotificationsOverlay = () => {
-        if (!this.props.notificationsPanel) {
+            React.createElement(HeaderSearchProvider, { isOpen: state.isSearchMenuOpen, toggleOpen: toggleSearchMenu }, search)));
+    }, [state.isSearchMenuOpen, toggleSearchMenu, search]);
+    const renderNotificationsOverlay = useCallback(() => {
+        if (!notificationsPanel) {
             return null;
         }
         return (React.createElement("div", { className: "gd-header-menu-notifications" },
             React.createElement(Typography, { tagName: "h3", className: "gd-header-menu-notifications-title" },
                 React.createElement(FormattedMessage, { id: "gs.header.notifications" })),
-            this.props.notificationsPanel({
+            notificationsPanel({
                 isMobile: true,
-                closeNotificationsOverlay: this.closeNotificationsMenu,
+                closeNotificationsOverlay: closeNotificationsMenu,
             })));
-    };
-    renderTrialItems = () => {
-        if (this.props.expiredDate || this.props.showUpsellButton) {
+    }, [notificationsPanel, closeNotificationsMenu]);
+    const renderTrialItems = useCallback(() => {
+        if (expiredDate || showUpsellButton) {
             return (React.createElement("div", { className: "gd-header-menu-trial gd-header-measure" },
-                this.props.expiredDate ? (React.createElement("div", { className: "gd-header-expiration-date" }, this.getTrialCountdown(this.props.expiredDate))) : null,
-                this.props.showUpsellButton ? (React.createElement(HeaderUpsellButton, { onUpsellButtonClick: this.props.onUpsellButtonClick })) : null));
+                expiredDate ? (React.createElement("div", { className: "gd-header-expiration-date" }, getTrialCountdown(expiredDate))) : null,
+                showUpsellButton ? (React.createElement(HeaderUpsellButton, { onUpsellButtonClick: onUpsellButtonClick })) : null));
         }
         return null;
-    };
-    renderVerticalMenu = () => {
-        const { badges } = this.props;
-        const menuItemsGroups = !this.state.isHelpMenuOpen
-            ? this.props.showStaticHelpMenu
-                ? [[this.getHelpMenuLink()]]
-                : this.addHelpItemGroup(this.addAdditionalItems(this.props.menuItemsGroups))
-            : this.getHelpMenu();
+    }, [expiredDate, showUpsellButton, getTrialCountdown, onUpsellButtonClick]);
+    const renderLogoutButton = useCallback(() => {
+        const [logoutMenuItem] = accountMenuItems.filter((item) => item.key === "gs.header.logout");
+        return logoutMenuItem ? (React.createElement("button", { className: "logout-button gd-button s-logout", onClick: (e) => {
+                onMenuItemClick(logoutMenuItem, e);
+            } },
+            React.createElement(Icon.Logout, { className: "gd-icon-logout", color: theme?.palette?.complementary?.c0 }),
+            React.createElement("span", { className: "gd-button-text" },
+                React.createElement(FormattedMessage, { id: "gs.header.logout" })))) : (false);
+    }, [accountMenuItems, onMenuItemClick, theme?.palette?.complementary?.c0]);
+    const renderVerticalMenu = useCallback(() => {
+        const menuItemsGroupsToRender = !state.isHelpMenuOpen
+            ? showStaticHelpMenu
+                ? [[getHelpMenuLink()]]
+                : addHelpItemGroup(addAdditionalItems(menuItemsGroups))
+            : getHelpMenu();
         return (React.createElement("div", { key: "overlay-menu", className: "gd-header-menu-vertical-wrapper" },
             React.createElement("div", { className: "gd-header-menu-vertical-header" }, "Menu"),
             React.createElement("div", { className: "gd-header-menu-vertical-content" },
-                React.createElement(HeaderMenu, { onMenuItemClick: this.handleMenuItemClick, sections: menuItemsGroups, className: "gd-header-menu-vertical" }),
-                this.renderTrialItems()),
+                React.createElement(HeaderMenu, { onMenuItemClick: handleMenuItemClick, sections: menuItemsGroupsToRender, className: "gd-header-menu-vertical" }),
+                renderTrialItems()),
             React.createElement("div", { className: "gd-header-menu-vertical-footer" },
                 !!badges && React.createElement("div", { className: "gd-header-vertical-badges" }, badges),
                 React.createElement("div", { className: "gd-header-menu-vertical-bottom-item" },
-                    React.createElement("span", { className: "gd-header-username gd-icon-user" }, this.props.userName)),
-                React.createElement("div", null, this.renderLogoutButton()))));
-    };
-    renderLogoutButton = () => {
-        const [logoutMenuItem] = this.props.accountMenuItems.filter((item) => item.key === "gs.header.logout");
-        return logoutMenuItem ? (React.createElement("button", { className: "logout-button gd-button s-logout", onClick: (e) => {
-                this.props.onMenuItemClick(logoutMenuItem, e);
-            } },
-            React.createElement(Icon.Logout, { className: "gd-icon-logout", color: this.props.theme?.palette?.complementary?.c0 }),
-            React.createElement("span", { className: "gd-button-text" },
-                React.createElement(FormattedMessage, { id: "gs.header.logout" })))) : (false);
-    };
-    renderStandardNav = () => {
-        const { badges, helpMenuDropdownAlignPoints, headerTextColor, headerColor } = this.props;
+                    React.createElement("span", { className: "gd-header-username gd-icon-user" }, userName)),
+                React.createElement("div", null, renderLogoutButton()))));
+    }, [
+        state.isHelpMenuOpen,
+        showStaticHelpMenu,
+        getHelpMenuLink,
+        addHelpItemGroup,
+        addAdditionalItems,
+        menuItemsGroups,
+        getHelpMenu,
+        handleMenuItemClick,
+        renderTrialItems,
+        badges,
+        userName,
+        renderLogoutButton,
+    ]);
+    const renderOverlayMenu = useCallback(() => {
+        let content = renderVerticalMenu();
+        if (state.isSearchMenuOpen) {
+            content = renderSearchMenu();
+        }
+        if (state.isNotificationsMenuOpen) {
+            content = renderNotificationsOverlay();
+        }
+        return (React.createElement(Overlay, { key: "header-overlay-menu", alignPoints: [
+                {
+                    align: state.isSearchMenuOpen || state.isNotificationsMenuOpen ? "tl tl" : "tr tr",
+                },
+            ], closeOnOutsideClick: state.isOverlayMenuOpen, isModal: state.isOverlayMenuOpen, positionType: "fixed", onClose: () => {
+                setOverlayMenu(false);
+            } }, content));
+    }, [
+        renderVerticalMenu,
+        state.isSearchMenuOpen,
+        state.isNotificationsMenuOpen,
+        renderSearchMenu,
+        renderNotificationsOverlay,
+        state.isOverlayMenuOpen,
+        setOverlayMenu,
+    ]);
+    const renderMobileNav = useCallback(() => {
+        const iconClasses = cx({
+            "hamburger-icon": true,
+            "is-open": state.isOverlayMenuOpen,
+            "search-open": state.isSearchMenuOpen,
+            "notifications-open": state.isNotificationsMenuOpen,
+        });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "hamburger-wrapper", key: "hamburger-wrapper" },
+                React.createElement("div", { className: iconClasses, key: "hamburger-icon", onClick: () => {
+                        setOverlayMenu(!state.isOverlayMenuOpen);
+                    } },
+                    React.createElement("i", null))),
+            state.isOverlayMenuOpen ? renderOverlayMenu() : null));
+    }, [
+        state.isOverlayMenuOpen,
+        state.isSearchMenuOpen,
+        state.isNotificationsMenuOpen,
+        setOverlayMenu,
+        renderOverlayMenu,
+    ]);
+    const renderStandardNav = useCallback(() => {
         const textColor = getTextColor(headerTextColor, headerColor);
         return (React.createElement("div", { className: "gd-header-stretch gd-header-menu-wrapper" },
-            React.createElement(HeaderMenu, { onMenuItemClick: this.props.onMenuItemClick, sections: this.props.menuItemsGroups, className: "gd-header-menu-horizontal" }),
-            this.renderTrialItems(),
-            this.props.showChatItem ? (React.createElement(HeaderChatButton, { title: this.props.intl.formatMessage({ id: "gs.header.ai" }), color: this.props.theme?.palette?.primary?.base, onClick: this.props.onChatItemClick })) : null,
-            this.props.notificationsPanel
-                ? this.props.notificationsPanel({
+            React.createElement(HeaderMenu, { onMenuItemClick: onMenuItemClick, sections: menuItemsGroups, className: "gd-header-menu-horizontal" }),
+            renderTrialItems(),
+            showChatItem ? (React.createElement(HeaderChatButton, { title: intl.formatMessage({ id: "gs.header.ai" }), color: theme?.palette?.primary?.base, onClick: onChatItemClick })) : null,
+            notificationsPanel
+                ? notificationsPanel({
                     isMobile: false,
-                    closeNotificationsOverlay: this.closeNotificationsMenu,
+                    closeNotificationsOverlay: closeNotificationsMenu,
                 })
                 : null,
-            this.props.search ? (React.createElement(HeaderSearchProvider, { isOpen: this.state.isSearchMenuOpen, toggleOpen: this.toggleSearchMenu },
-                React.createElement(HeaderSearchButton, { title: this.props.intl.formatMessage({ id: "gs.header.search" }) }, this.props.search))) : null,
-            this.props.helpMenuItems.length ? (React.createElement(HeaderHelp, { onMenuItemClick: this.props.onMenuItemClick, className: "gd-header-measure", helpMenuDropdownAlignPoints: helpMenuDropdownAlignPoints, items: this.props.helpMenuItems, disableDropdown: this.props.disableHelpDropdown, onHelpClicked: this.props.onHelpClick, helpRedirectUrl: this.props.helpRedirectUrl })) : null,
-            this.props.showInviteItem ? (React.createElement(HeaderInvite, { onInviteItemClick: this.props.onInviteItemClick, textColor: textColor })) : null,
-            React.createElement(HeaderAccount, { userName: this.props.userName, onMenuItemClick: this.props.onMenuItemClick, className: "gd-header-measure", items: this.props.accountMenuItems }),
+            search ? (React.createElement(HeaderSearchProvider, { isOpen: state.isSearchMenuOpen, toggleOpen: toggleSearchMenu },
+                React.createElement(HeaderSearchButton, { title: intl.formatMessage({ id: "gs.header.search" }) }, search))) : null,
+            helpMenuItems.length ? (React.createElement(HeaderHelp, { onMenuItemClick: onMenuItemClick, className: "gd-header-measure", helpMenuDropdownAlignPoints: helpDropdownAlign, items: helpMenuItems, disableDropdown: disableHelpDropdown, onHelpClicked: onHelpClick, helpRedirectUrl: helpRedirectUrl })) : null,
+            showInviteItem ? (React.createElement(HeaderInvite, { onInviteItemClick: onInviteItemClick, textColor: textColor })) : null,
+            React.createElement(HeaderAccount, { userName: userName, onMenuItemClick: onMenuItemClick, className: "gd-header-measure", items: accountMenuItems }),
             badges ? React.createElement("div", { className: "gd-header-badges gd-header-measure" }, badges) : null));
-    };
+    }, [
+        headerTextColor,
+        headerColor,
+        onMenuItemClick,
+        menuItemsGroups,
+        renderTrialItems,
+        showChatItem,
+        intl,
+        theme?.palette?.primary?.base,
+        onChatItemClick,
+        notificationsPanel,
+        closeNotificationsMenu,
+        search,
+        state.isSearchMenuOpen,
+        toggleSearchMenu,
+        helpMenuItems,
+        helpDropdownAlign,
+        disableHelpDropdown,
+        onHelpClick,
+        helpRedirectUrl,
+        showInviteItem,
+        onInviteItemClick,
+        userName,
+        accountMenuItems,
+        badges,
+    ]);
+    const renderNav = useCallback(() => {
+        return state.responsiveMode ? renderMobileNav() : renderStandardNav();
+    }, [state.responsiveMode, renderMobileNav, renderStandardNav]);
+    useEffect(() => {
+        createStyles();
+    }, [createStyles]);
+    const logoLinkClassName = useMemo(() => cx({
+        "gd-header-logo": true,
+        "gd-header-measure": true,
+        "gd-header-shrink": state.responsiveMode,
+    }), [state.responsiveMode]);
+    const applicationHeaderAccessibilityLabel = useMemo(() => intl.formatMessage({
+        id: "gs.header.accessibility.label",
+    }), [intl]);
+    return (React.createElement("header", { "aria-label": applicationHeaderAccessibilityLabel, className: getClassNames(), ref: nodeRef },
+        isAccessibilityCompliant
+            ? renderAccessibilityLogo(logoLinkClassName)
+            : renderLogo(logoLinkClassName),
+        workspacePicker,
+        renderNav()));
 }
 /**
  * @internal