@admin-layout/tailwind-design-pro 11.0.4-alpha.4 → 11.2.1-alpha.1

package/lib/components/Layout/GlobalHeader/Header.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import {Menu,Search,Sun,Moon}from'lucide-react';import {useTheme}from'../BasicLayout/index.js';import OrganizationDropDown from'./OrganizationDropdown.js';import {LanguageMenu}from'../../LanguageMenu/LanguageMenu.js';const GlobalHeader = props => {
+import React__default from'react';import {Link}from'@remix-run/react';import {useDispatch,useSelector}from'react-redux';import {RightContent}from'./RightContent.js';import {icons}from'../../../icons.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {SearchBar}from'./SearchBar.js';import {HeaderNoticeSlot}from'../slot-fill/HeaderNotice.js';import'@common-stack/components-pro';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';const GlobalHeader = props => {
   const {
     theme,
     layout,
@@ -6,69 +6,111 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import {Me
     routeParams,
     collapsed,
     settings,
-    toggleSideMenu
+    toggleSideMenu,
+    location
   } = props;
-  const [isNotificationsMenuOpen, setIsNotificationsMenuOpen] = useState(false);
-  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
   const {
-    isDarkMode,
-    toggleTheme
-  } = useTheme();
-  if (!settings?.showHeader) return null;
-  return jsx("header", {
-    className: "z-10 py-4 bg-white shadow-md dark:bg-gray-800",
-    children: jsxs("div", {
-      className: "container flex items-center justify-end h-full px-6 mx-auto text-gray-700 dark:text-gray-200",
-      children: [jsx("button", {
-        className: "p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple",
-        onClick: toggleSideMenu,
-        "aria-label": "Menu",
-        children: jsx(Menu, {
-          className: "w-6 h-6"
-        })
-      }), settings?.searchBarRender && jsx("div", {
-        className: "flex justify-center flex-1 lg:mr-32",
-        children: jsxs("div", {
-          className: "relative w-full max-w-xl mr-6 focus-within:text-purple-500",
-          children: [jsx("div", {
-            className: "absolute inset-y-0 flex items-center pl-2",
-            children: jsx(Search, {
-              className: "w-4 h-4"
-            })
-          }), jsx("input", {
-            className: "w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input",
-            type: "text",
-            placeholder: "Search",
-            "aria-label": "Search"
-          })]
-        })
-      }), jsxs("ul", {
-        className: "flex items-center flex-shrink-0 space-x-6",
-        children: [jsx("li", {
-          className: "flex",
-          children: jsx("button", {
-            className: "rounded-md focus:outline-none focus:shadow-outline-purple",
-            onClick: toggleTheme,
-            "aria-label": "Toggle color mode",
-            children: isDarkMode ? jsx(Sun, {
-              className: "w-5 h-5"
-            }) : jsx(Moon, {
-              className: "w-5 h-5"
-            })
-          })
-        }), jsx("li", {
-          className: "relative",
-          children: jsx(LanguageMenu, {})
-        }), jsx("li", {
-          className: "relative",
-          children: jsx(OrganizationDropDown, {
-            upperMenus: upperMenus,
-            routeParams: routeParams,
-            collapsed: collapsed,
-            settings: settings
-          })
-        })]
-      })]
-    })
-  });
-};export{GlobalHeader,GlobalHeader as default};//# sourceMappingURL=Header.js.map
+    MenuIcon
+  } = icons;
+  const {
+    isMobile
+  } = useMediaQuery();
+  useDispatch();
+  const {
+    searchQuery,
+    isSearching
+  } = useSelector(state => state.search);
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  // Helper function to get value from uilayout with route/device override support
+  const getUILayoutValue = path => {
+    // Check for route/device-specific override first
+    const routeDeviceKey = `[${currentRoute}][${deviceType}]`;
+    const uiOverride = settings?.uiSettings?.[routeDeviceKey];
+    if (uiOverride) {
+      const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
+      if (value !== undefined) return value;
+    }
+    // Fallback to settings (flattened uilayout from configuration-registries)
+    return path.split('.').reduce((obj, key) => obj?.[key], settings);
+  };
+  // Get device settings directly from uilayout
+  const deviceSettings = {
+    header: getUILayoutValue('header'),
+    background: getUILayoutValue('background')
+  };
+  // Get layout settings directly from uilayout
+  const layoutSettings = {
+    contentWidth: getUILayoutValue('contentWidth'),
+    navigationMode: getUILayoutValue('navigationMode'),
+    sideMenuType: getUILayoutValue('sideMenuType'),
+    fixedHeader: getUILayoutValue('fixedHeader'),
+    fixedSidebar: getUILayoutValue('fixedSidebar'),
+    splitMenus: getUILayoutValue('splitMenus'),
+    upperMenuDividerName: getUILayoutValue('upperMenuDividerName'),
+    middleMenuDividerName: getUILayoutValue('middleMenuDividerName'),
+    lowerMenuDividerName: getUILayoutValue('lowerMenuDividerName')
+  };
+  const headerSettings = deviceSettings?.header || {};
+  const backgroundSettings = deviceSettings?.background || {};
+  // Use CSS classes instead of theme-based styling
+  const getHeaderClasses = () => {
+    let classes = `z-10 py-4 top-0 border-b border-border header-container relative ${layoutSettings?.fixedHeader ? 'sticky' : 'relative'}`;
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      classes += ' bg-cover bg-center';
+    }
+    return classes;
+  };
+  const getHeaderStyles = () => {
+    const baseStyles = {};
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      baseStyles.backgroundImage = `url(${backgroundSettings.image})`;
+    } else if (backgroundSettings.type === 'color' && backgroundSettings.color !== 'inherit') {
+      baseStyles.backgroundColor = backgroundSettings.color;
+    }
+    // Add dark theme styling
+    if (settings?.navTheme === 'realDark') {
+      baseStyles.backgroundColor = '#222';
+      baseStyles.color = '#fff !important';
+    }
+    return baseStyles;
+  };
+  // Early return if header is disabled
+  if (!headerSettings?.showHeader) return null;
+  // Determine if search bar should be shown
+  const showSearchBar = headerSettings?.showSearchSlot && headerSettings?.searchBarRender;
+  // Determine if right content should be shown
+  const showRightContent = headerSettings?.showRightContent && layoutSettings?.navigationMode !== 'sidebar';
+  return React__default.createElement("header", {
+    className: getHeaderClasses(),
+    style: getHeaderStyles()
+  }, React__default.createElement("div", {
+    className: `flex items-center justify-between h-full px-4 sm:px-6 mx-auto relative z-10 ${settings?.navTheme === 'realDark' ? 'text-white' : 'text-foreground'}`
+  }, isMobile && headerSettings?.showMenuToggle && React__default.createElement("button", {
+    className: "p-1 -ml-1 rounded-md md:hidden focus:outline-none focus-themed",
+    onClick: toggleSideMenu,
+    "aria-label": "Menu"
+  }, React__default.createElement(MenuIcon, {
+    className: "w-6 h-6"
+  })), headerSettings?.showLogo && React__default.createElement("div", null, React__default.createElement(Link, {
+    to: "/",
+    className: "ml-6 flex items-center gap-2.5 text-lg font-bold text-foreground"
+  }, typeof settings?.logo === 'string' ? React__default.createElement("img", {
+    src: settings?.logo,
+    alt: "Logo",
+    className: "w-[28px]"
+  }) : settings?.logo, !isMobile && headerSettings?.showPageTitle && React__default.createElement("span", {
+    style: {
+      color: settings?.navTheme === 'realDark' ? '#fff' : undefined
+    }
+  }, settings?.title))), showSearchBar && React__default.createElement("div", {
+    className: "flex-1 max-w-xl mx-4 hidden md:block"
+  }, React__default.createElement(SearchBar, null)), React__default.createElement("div", null, React__default.createElement("span", {
+    className: "pull-right pt-2 mr-2"
+  }, React__default.createElement(HeaderNoticeSlot, null))), showRightContent && React__default.createElement(RightContent, {
+    upperMenus: upperMenus,
+    collapsed: collapsed,
+    routeParams: routeParams,
+    settings: settings
+  })));
+};export{GlobalHeader};//# sourceMappingURL=Header.js.map

package/lib/components/Layout/GlobalHeader/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"sourcesContent":[null],"names":[],"mappings":"+RAsBa,MAAA,YAAY,GAAqC,KAAC,IAAS;AACpE,EAAA,MAAA;IACA,KAAM;IACN,MAAM;IACN;IAEA,WAAM;AACF,IAAA,SAAA;YACoB;AACxB,IAAA;MAEM,KAAA;AACF,EAAA,MAAA,CAAA,uBAAuC,EAAA,0BAAE,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QACzC,CAA0B,iBAAA,EAAA,oBAAQ,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACtC,EAAA,MAAE;IAEF,UAAa;AAAc,IAAA;AAC3B,GAAA,GAAA,QACY,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/Layout/GlobalHeader/MainHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { MainHeaderProps, PrivateHeaderProps } from '../../typings';
+export declare const MainHeader: React.FC<MainHeaderProps & PrivateHeaderProps>;
+//# sourceMappingURL=MainHeader.d.ts.map

package/lib/components/Layout/GlobalHeader/MainHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMpE,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,kBAAkB,CA0PrE,CAAC"}

package/lib/components/Layout/GlobalHeader/MainHeader.js

@@ -0,0 +1,187 @@
+import*as React from'react';import {getMenuSeparation}from'@admin-layout/client';import {Link}from'@remix-run/react';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {SearchBarBehavior}from'../../../machines/types.js';import'@common-stack/components-pro';import {HeaderSearchBarSlot}from'../slot-fill/HeaderSearchBar.js';import {HeaderSearchButtonSlot}from'../slot-fill/HeaderSearchButton.js';import {RightContentSlot}from'../slot-fill/RightContent.js';import {LogoSlot}from'../slot-fill/Logo.js';import {RightMenu}from'./RightMenu.js';const MainHeader = props => {
+  const {
+    rightContentRender,
+    setSettingToggle,
+    settingToggle,
+    menuData,
+    routeParams,
+    navTheme,
+    layout,
+    location,
+    showSettings,
+    settings,
+    primaryColor,
+    pageTitleInfo,
+    scrolled,
+    searchOptionsShown,
+    setSearchOptionsShown,
+    authorities,
+    picture,
+    componentVisibility,
+    showMenu,
+    toggleSideMenu
+  } = props;
+  const {
+    isMobile
+  } = useMediaQuery();
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  // Helper function to get value from uilayout with route/device override support
+  const getUILayoutValue = path => {
+    // Check for route/device-specific override first
+    const routeDeviceKey = `[${currentRoute}][${deviceType}]`;
+    const uiOverride = settings?.uiSettings?.[routeDeviceKey];
+    if (uiOverride) {
+      const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
+      if (value !== undefined) return value;
+    }
+    // Fallback to settings (flattened uilayout from configuration-registries)
+    return path.split('.').reduce((obj, key) => obj?.[key], settings);
+  };
+  // Get device regions directly from uilayout
+  const deviceRegions = {
+    header: getUILayoutValue('header')
+  };
+  const headerSettings = deviceRegions?.header || {};
+  // State to track reduced motion preference
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+  const [showSearchBar, setShowSearchBar] = React.useState(false);
+  React.useEffect(() => {
+    // Check reduced motion preference - only in browser
+    if (typeof window !== 'undefined') {
+      setPrefersReducedMotion(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+      // Optional: add listener for preference changes
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const handleMediaChange = e => {
+        setPrefersReducedMotion(e.matches);
+      };
+      mediaQuery.addEventListener('change', handleMediaChange);
+      return () => {
+        mediaQuery.removeEventListener('change', handleMediaChange);
+      };
+    }
+  }, []);
+  React.useEffect(() => {
+    if (!deviceRegions?.header?.searchBarRender || !headerSettings?.showSearchSlot) {
+      setShowSearchBar(false);
+      return;
+    }
+    if (deviceRegions?.header?.searchBarBehavior === SearchBarBehavior.ON_SCROLL) {
+      // Show search bar only when scrolling
+      setShowSearchBar(componentVisibility['search-bar']);
+    } else {
+      // Show search bar by default when PERMANENT
+      setShowSearchBar(true);
+    }
+  }, [componentVisibility['search-bar'], scrolled, deviceRegions?.header?.searchBarRender, deviceRegions?.header?.searchBarBehavior, headerSettings?.showSearchSlot]);
+  // const toggleSettings = () => {
+  //     setSettingToggle(!settingToggle);
+  // };
+  // Use CSS classes instead of theme-based styling
+  const getHeaderClasses = () => {
+    let classes = ` ${isMobile ? headerSettings?.position || 'fixed' : scrolled ? 'fixed' : 'absolute'} w-full top-0 z-[100] px-[8%] transition-all duration-1000 ease-in-out group`;
+    if (scrolled) {
+      classes += ' py-2 shadow-themed-md';
+    } else {
+      classes += ' py-2';
+    }
+    if (searchOptionsShown) {
+      classes += ' pb-8';
+    }
+    if (showMenu) {
+      classes += ' border-b';
+    }
+    if (isMobile) {
+      classes += ' border-none';
+    }
+    return classes;
+  };
+  const getHeaderStyles = () => {
+    if (scrolled) {
+      return {
+        backgroundColor: 'hsl(var(--card))',
+        color: 'hsl(var(--card-foreground))'
+      };
+    }
+    return {
+      backgroundColor: 'transparent',
+      color: 'hsl(var(--foreground))'
+    };
+  };
+  if (!deviceRegions?.header?.showHeader && deviceRegions?.header?.showHeader !== undefined) {
+    return null;
+  }
+  return React.createElement("div", {
+    className: getHeaderClasses(),
+    style: getHeaderStyles()
+  }, React.createElement("div", {
+    className: "flex flex-col"
+  }, React.createElement("div", {
+    className: `
+                        justify-around items-start ${deviceRegions?.header?.searchBarRender ? 'pt-0' : 'pt-[7px]'}
+                        ${deviceRegions?.header?.hidden ? 'hidden' : 'flex'}
+                    `
+  }, isMobile && showMenu && React.createElement("button", {
+    onClick: toggleSideMenu,
+    className: "flex items-center justify-center p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200",
+    "aria-label": "Toggle sidebar"
+  }, React.createElement("svg", {
+    className: "w-6 h-6 text-gray-600 dark:text-gray-300",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 6h16M4 12h16M4 18h16"
+  }))), headerSettings?.showLogo && React.createElement(Link, {
+    to: "/",
+    className: "text-foreground"
+  }, React.createElement(LogoSlot, {
+    settings: settings,
+    scrolled: scrolled,
+    location: location,
+    prefersReducedMotion: prefersReducedMotion,
+    layout: layout
+  })), React.createElement("div", {
+    className: "flex-grow"
+  }), headerSettings?.showSearchSlot && React.createElement("div", {
+    className: "relative flex items-start justify-center"
+  }, React.createElement("div", {
+    className: `transition-all duration-300 ease-in-out ${searchOptionsShown ? 'opacity-0 absolute' : 'opacity-100'}`
+  }, showSearchBar && !searchOptionsShown ? React.createElement(HeaderSearchButtonSlot, {
+    transform: "scale",
+    transitionDuration: "1.5s",
+    transitionTimingFunction: "ease-in",
+    setSearchOptionsShown: () => {
+      setSearchOptionsShown(true);
+    }
+  }) : null), React.createElement("div", {
+    className: `transition-all duration-300 ease-in-out ${searchOptionsShown ? 'opacity-100' : 'opacity-0 absolute'}`
+  }, showSearchBar && searchOptionsShown ? React.createElement(HeaderSearchBarSlot, {
+    searchOptionsShown: searchOptionsShown,
+    listId: "navbar_searchbox",
+    onClose: () => {
+      setSearchOptionsShown(false);
+      setShowSearchBar(deviceRegions?.header?.searchBarBehavior !== SearchBarBehavior.ON_SCROLL || scrolled);
+    }
+  }) : null)), React.createElement("div", {
+    className: "flex-grow"
+  }), headerSettings?.showRightContent && React.createElement("div", {
+    className: "flex space-x-1 md:space-x-4"
+  }, React.createElement(RightContentSlot, {
+    scrolled: scrolled,
+    navTheme: settings?.navTheme
+  }), React.createElement(RightMenu, {
+    match: null,
+    menuData: menuData,
+    settings: settings,
+    routeParams: routeParams,
+    getMenuSeparation: getMenuSeparation,
+    scrolled: scrolled,
+    authorities: authorities,
+    picture: picture
+  })))));
+};export{MainHeader};//# sourceMappingURL=MainHeader.js.map

package/lib/components/Layout/GlobalHeader/MainHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainHeader.js","sources":["../../../../src/components/Layout/GlobalHeader/MainHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":"ioBAWO,MAAM,UAAU,GAAmD,KAAC,IAAO;AAC9E,EAAA,MAAA;AAuBA,IAAA,kBAAkB;AAClB,IAAA;IACA,aAAM;IAEN,QAAA;AACA,IAAA,WAAM;YACF;AACA,IAAA,MAAA;YACA;gBAEI;YACA;gBACI;AAAqB,IAAA,aAAA;YAC5B;sBAED;yBACiB;AACrB,IAAA,WAAE;IAEF,OAAA;AACA,IAAA,mBAAmB;AACf,IAAA,QAAA;;AAGJ,GAAA,GAAA;QAEA;AACA,IAAA;AACA,GAAA,GAAA,aAAO,EAAA;AAEP,EAAA,MAAA,YAAgB,GAAG,QAAE,EAAA,QAAA,IAAA,GAAA;QACjB,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,SAAA;AACA;wBACI,GAAA,IAAA,IAAuB;;wBAGjB,GAAA,CAAU,GAAG,iBAAiB,UAAC,CAAA,CAAA,CAAA;AACrC,IAAA,MAAA,UAAM,GAAA,QAAA,EAAA,UAAwB,GAAE,cAAA,CAAA;AAC5B,IAAA,IAAA,UAAA,EAAA;AACJ,MAAA,MAAA,KAAE,GAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,MAAA,CAAA,CAAA,GAAA,EAAA,GAAA,KAAA,GAAA,GAAA,GAAA,CAAA,EAAA,UAAA,CAAA;AAEF,MAAA,IAAA,KAAA,KAAA,SAAW,EAAA,OAAA;AACX,IAAA;AACI;AACJ,IAAA,OAAA,IAAE,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,MAAA,CAAA,CAAA,GAAA,EAAA,GAAA,KAAA,GAAA,GAAA,GAAA,CAAA,EAAA,QAAA,CAAA;;;AAIV,EAAA,MAAA,aAAgB,GAAG;AACf,IAAA,MAAA,EAAI,gBAAgB,CAAA,QAAQ;;sBAEjB,GAAA,aAAA,EAAA,MAAA,IAAA,EAAA;;QAGX,CAAA,oBAAmB,EAAA,2BAA8B,KAAA,CAAA,QAAA,CAAA,KAAkB,CAAA;sBAC/D,EAAA,gBAAA,CAAA,GAAA,KAAA,CAAsC,QAAA,CAAA,KAAA,CAAA;AACtC,EAAA,KAAA,CAAA,SAAA,CAAA,MAAA;;eACI,MAAA,KAAA,WAAA,EAAA;6BACJ,CAAA,MAAA,CAAA,UAAA,CAAA,kCAA4C,CAAA,CAAA,OAAA,CAAA;;YAE/C,UAAA,GAAA,MAAA,CAAA,UAAA,CAAA,kCAAA,CAAA;AACL,MAAC,MAAE,iBAAA,GAAA,CAAA,IAAA;QACC,iCAAiC,CAAA;;gBAEjC,CAAA,gBAAuB,CAAA,QAAA,EAAA,iBAAe,CAAA;aACtC,MAAA;AACA,QAAA,UAAA,CAAA,mBAA8B,CAAA,QAAA,EAAA,iBAAA,CAAA;AACjC,MAAC,CAAC;IAEH;KACA,EAAA,CAAA;OACA,CAAA,SAAK,CAAA,MAAA;IAEL,IAAA,CAAA,aAAA,EAAA,MAAA,EAAA,eAAA,IAAA,CAAA,cAAiD,EAAA,cAAA,EAAA;MACjD,gBAAM,CAAA,KAAgB,CAAG;;;qBAMV,EAAI,yBAAyB,KAAA,iBAAA,CAAA,SAAA,EAAA;;sBAChC,CAAA,mBAAA,CAAA,YAAA,CAAA,CAAA;;;sBAIJ,CAAA,IAAA,CAAA;;yBAEH,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,eAAA,EAAA,aAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,cAAA,CAAA,CAAA;;;;;;QAQD,OAAC,GAAA,CAAA,CAAA,EAAA,QAAA,GAAA,cAAA,EAAA,QAAA,IAAA,OAAA,GAAA,QAAA,GAAA,OAAA,GAAA,UAAA,CAAA,4EAAA,CAAA;AAED,IAAA,IAAA;AACJ,MAAE,OAAA,IAAA,wBAAA;IAEF,CAAA,MAAM;aACE,IAAA,OAAW;;AAEP,IAAA,IAAA,kBAAA,EAAA;AACA,MAAA,OAAA,IAAA,OAAO;;QAEf,QAAC,EAAA;aACD,IAAO,WAAA;AACH,IAAA;AACA,IAAA,IAAA,QAAA;aACF,IAAA,cAAA;AACN,IAAA;AAEA,IAAA,OAAK,OAAA;AACD,EAAA,CAAA;QACH,eAAA,GAAA,MAAA;IACD,IAAA,QACI,EAAA;aACI;AACI,QAAA,eAAA,EAAA;;;AAIK,IAAA;AAGA,IAAA,OAAA;AAMO,MAAA,eAAA,EAAA,aAAA;AAOI,MAAA,KAAA,EAAA;AAWX,KAAA;;oBAYD,EAAA,MAAA,EAAA,UAAA,IAAA,aAAe,EAAA,MAAA,EAAW,UAAO,KAAA,SAAA,EAAA;AAGhC,IAAA,OAAA,IAAA;AAEO,EAAA;4BAWgB,CAAA,KAAA,EAAA;AACJ,IAAA,SAAA,EAAA,gBAEL;AAEP,IAAA,KAAA,EAAA,eAAA;8BAUgB,EAAA;AACA,IAAA,SAAA,EAAA;AAEQ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;;mDAQ3B,EAAA,aAAU,EAAW,MAAO,EAAA,eAAA,GAAA,MAAA,GAAA,UAAA;AAGhC,wBAAA,EAAA,aAAgB,EAAA,MAAA,EAAgB,MAC7B,GAAA,QAAA,GAAA,MAAA;oBACI;AACA,GAAA,EAAA,QAAA,IAAA,QAAA,IAAA,KAAA,CAAA,cAAU,QACN;AAehC,IAAE,OAAA,EAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalHeader/OrganizationDropdown.d.ts

@@ -1,16 +1,5 @@
 import React from 'react';
-import { ProSettings } from '@ant-design/pro-layout';
-export interface GlobalHeaderRightProps {
-    theme?: string;
-    layout?: any;
-    upperMenus: any;
-    routeParams: {
-        orgName?: string;
-        [key: string]: string;
-    };
-    collapsed?: boolean;
-    settings?: ProSettings | any;
-}
+import { GlobalHeaderRightProps } from '../../typings';
 declare const OrganizationDropDown: React.FC<GlobalHeaderRightProps>;
 export default OrganizationDropDown;
 //# sourceMappingURL=OrganizationDropdown.d.ts.map

package/lib/components/Layout/GlobalHeader/OrganizationDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/OrganizationDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,WAAW,sBAAsB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,WAAW,EAAE;QACT,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACzB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC;CAChC;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0E1D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"OrganizationDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/OrganizationDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuE1D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/Layout/GlobalHeader/OrganizationDropdown.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {Link}from'react-router-dom';import {useTranslation}from'react-i18next';import {generateMenuPath}from'@admin-layout/client';const OrganizationDropDown = props => {
+import React__default,{useState,useRef,useEffect}from'react';import {Link}from'@remix-run/react';import {useTranslation}from'react-i18next';import {generateMenuPath}from'@admin-layout/client';const OrganizationDropDown = props => {
   const {
     theme,
     layout,
@@ -38,36 +38,32 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
   const handleMouseLeave = () => {
     setIsProfileMenuOpen(false);
   };
-  return jsxs("div", {
+  return React__default.createElement("div", {
     ref: dropdownRef,
     className: "relative",
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    children: [jsxs("button", {
-      className: "align-middle rounded-full flex items-center focus:shadow-outline-purple focus:outline-none",
-      onClick: toggleProfileMenu,
-      "aria-label": "Account",
-      "aria-haspopup": "true",
-      children: [jsx("img", {
-        className: "object-cover w-8 h-8 rounded-full",
-        src: "https://e7.pngegg.com/pngimages/241/832/png-clipart-business-management-computer-software-apartment-organization-user-avatar-blue-angle.png",
-        alt: "",
-        "aria-hidden": "true"
-      }), jsx("span", {
-        className: "ml-2",
-        children: routeParams?.orgName
-      })]
-    }), isProfileMenuOpen && jsx("ul", {
-      className: "absolute right-0 w-56 p-2  space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700",
-      "aria-label": "submenu",
-      children: upperMenus && upperMenus[0]?.children?.map(menu => jsx("li", {
-        className: "flex",
-        children: jsx(Link, {
-          to: generateMenuPath(menu?.path, routeParams),
-          className: "w-full px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors duration-150",
-          children: t(menu?.name)
-        }, menu?.key || menu?.name)
-      }, menu?.key || menu?.name))
-    })]
-  });
+    onMouseLeave: handleMouseLeave
+  }, React__default.createElement("button", {
+    className: "align-middle rounded-full flex items-center focus-themed",
+    onClick: toggleProfileMenu,
+    "aria-label": "Account",
+    "aria-haspopup": "true"
+  }, React__default.createElement("img", {
+    className: "object-cover w-8 h-8 rounded-full",
+    src: "https://e7.pngegg.com/pngimages/241/832/png-clipart-business-management-computer-software-apartment-organization-user-avatar-blue-angle.png",
+    alt: "",
+    "aria-hidden": "true"
+  }), React__default.createElement("span", {
+    className: "ml-2 text-foreground"
+  }, routeParams?.orgName)), isProfileMenuOpen && React__default.createElement("ul", {
+    className: "absolute right-0 w-56 p-2 space-y-2 themed-dropdown",
+    "aria-label": "submenu"
+  }, upperMenus && upperMenus[0]?.children?.map(menu => React__default.createElement("li", {
+    className: "flex",
+    key: menu?.key || menu?.name
+  }, React__default.createElement(Link, {
+    key: menu?.key || menu?.name,
+    to: generateMenuPath(menu?.path, routeParams),
+    className: "w-full px-3 py-2 hover:bg-muted rounded-themed transition-colors duration-150 text-foreground"
+  }, t(menu?.name))))));
 };export{OrganizationDropDown as default};//# sourceMappingURL=OrganizationDropdown.js.map

package/lib/components/Layout/GlobalHeader/OrganizationDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationDropdown.js","sources":["../../../../src/components/Layout/GlobalHeader/OrganizationDropdown.tsx"],"sourcesContent":[null],"names":[],"mappings":"0NAkBA,MAAM,oBAAoB,GAAqC,KAAC,IAAS;AACrE,EAAA,MAAA;IACA,KAAM;IACN,MAAM;AACN,IAAA;IACA,WAAW;IAEX,SAAsB;IACtB;AACI,GAAA,GAAA,KAAA;QACA,CAA0B,uBAAA,EAAA,0BAAQ,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACtC,EAAA,MAAE,CAAA,iBAAA,EAAA,oBAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAE2C,WAAA,GAAA,MAAA,CAAA,IAAA,CAAA;QACpC;AACL,IAAA,CAAA;AACI,IAAA;oBACwB,CAAA,MAAA,CAAA;;AAE5B,EAAA,MAAA,iBAAE,GAAA,MAAA;AAEF,IAAA,oBAAyB,CAAA,CAAA;AACzB,IAAA,0BAAY,CAAA,KAAA,CAAA;AACR,GAAA;AACJ;WACG,CAAA,MAAA;IAEP,MAAsB,kBAAA,GAAA,KAAA,IAAA;MAChB,IAAA,WAAA,CAAA,OAAmB,IAAK,CAAA,WAAA,CAAA,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA;QAC1B,oBAAoB,CAAC,KAAK,CAAC;AAC/B;KAEM;YACkB,CAAA,gBAAC,CAAK,WAAE,EAAA,kBAAA,CAAA;AAChC,IAAA,OAAE,MAAA;AAEF,MAAA,QACI,CAAA,+BAAuB,EAAA,kBAAoB,CAAC;AAsB5B,KAAA;AAexB,GAAE,EAAA,EAAA,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OrganizationDropdown.js","sources":["../../../../src/components/Layout/GlobalHeader/OrganizationDropdown.tsx"],"sourcesContent":[null],"names":[],"mappings":"gMAMA,MAAM,oBAAoB,GAAqC,KAAC,IAAO;AACnE,EAAA,MAAA;IACA,KAAA;IACA,MAAM;AACN,IAAA;IACA,WAAW;IAEX,SAAA;IACA;AACI,GAAA,GAAA,KAAA;QACA,CAAA,uBAAA,EAA0B,0BAAQ,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACtC,EAAA,MAAE,CAAA,iBAAA,EAAA,oBAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAEF,WAAA,GAAA,MAAA,CAAA,IAAA,CAAA;QACA;AACI,IAAA,CAAA;AACI,IAAA;oBACI,CAAA,MAAA,CAAA;;AAER,EAAA,MAAA,iBAAE,GAAA,MAAA;AAEF,IAAA,oBAAS,CAAA,CAAA;AACT,IAAA,0BAAY,CAAA,KAAA,CAAA;AACR,EAAA,CAAA;AACJ;WACG,CAAA,MAAA;IAEP,MAAA,kBAAsB,GAAA,KAAA,IAAA;MACtB,IAAM,WAAA,CAAA,OAAmB,IAAG,CAAE,WAAA,CAAA,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA;QAC1B,oBAAoB,CAAC,KAAK,CAAC;AAC/B,MAAE;IAEF,CAAA;YACI,CAAA,gBAAqB,CAAA,WAAO,EAAA,kBAAA,CAAA;AAChC,IAAA,OAAE,MAAA;AAEF,MAAA,QACI,CAAA,mBAAA,CAAA,WAAU,EAAA,kBAAa,CAAA;;AAOf,EAAA,CAAA,EAAA,EAAA,CAAA;;QASH,gBAAA,GAAiB,MACd;wBAEoB,CAAC,IAAE,CAAA;AAEP,EAAA,CAAA;AAahC,EAAE,MAAA,gBAAA,GAAA,MAAA;AAEF,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalHeader/RightContent.d.ts

@@ -1,18 +1,5 @@
 import * as React from 'react';
-import { ProSettings } from '@admin-layout/client';
-export interface GlobalHeaderRightProps {
-    theme?: string;
-    layout?: any;
-    upperMenus: any;
-    routeParams: {
-        orgName?: string;
-        [key: string]: string;
-    };
-    formatMessage?: any;
-    collapsed?: boolean;
-    settings?: ProSettings;
-}
-export declare const useHorizontalScroll: () => React.MutableRefObject<undefined>;
-declare const GlobalHeaderRight: React.FC<GlobalHeaderRightProps>;
-export default GlobalHeaderRight;
+import { GlobalHeaderRightProps } from '../../typings';
+export declare const useHorizontalScroll: () => React.MutableRefObject<HTMLDivElement>;
+export declare const RightContent: React.FC<GlobalHeaderRightProps>;
 //# sourceMappingURL=RightContent.d.ts.map

package/lib/components/Layout/GlobalHeader/RightContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/RightContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,sBAAsB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,WAAW,EAAE;QACT,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACzB,CAAC;IACF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,yCAsB/B,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"RightContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/RightContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,mBAAmB,8CAsB/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8EzD,CAAC"}

package/lib/components/Layout/GlobalHeader/RightContent.js

@@ -0,0 +1,86 @@
+import*as React from'react';import {useState,useEffect,useRef}from'react';import {LanguageMenu}from'../../LanguageMenu/LanguageMenu.js';import OrganizationDropDown from'./OrganizationDropdown.js';const useHorizontalScroll = () => {
+  const elRef = useRef(null);
+  useEffect(() => {
+    const el = elRef.current;
+    if (el) {
+      const onWheel = e => {
+        if (e.deltaY === 0) return;
+        e.preventDefault();
+        el.scrollTo({
+          left: el.scrollLeft + e.deltaY,
+          behavior: 'smooth'
+        });
+      };
+      el.addEventListener('wheel', onWheel);
+      return () => {
+        el.removeEventListener('wheel', onWheel);
+      };
+    }
+  }, []);
+  return elRef;
+};
+const RightContent = props => {
+  const {
+    theme,
+    layout,
+    upperMenus,
+    routeParams,
+    collapsed,
+    settings
+  } = props;
+  const [navBarItems, setNavBarItems] = useState([]);
+  const scrollRef = useHorizontalScroll();
+  // TODO: uncomment this once the extension API is updated
+  // const controller: any = useExtensionController();
+  // useEffect(() => {
+  //     if (controller) {
+  //         const subscription = controller.services.contribution.getContributions().subscribe(({ pageNavBar }) => {
+  //             setNavBarItems(pageNavBar || []);
+  //         });
+  //         return () => subscription.unsubscribe();
+  //     }
+  // }, [controller]);
+  useEffect(() => {
+    const ele = document.getElementById('item-wrapper');
+    if (ele) {
+      if (check(ele)) {
+        ele.style.boxShadow = 'inset 0 0 5px #e2e2e2';
+      } else {
+        ele.style.boxShadow = 'none';
+      }
+    }
+  });
+  const check = el => {
+    const curOverflow = el.style.overflow;
+    if (!curOverflow || curOverflow === 'visible') {
+      el.style.overflow = 'hidden';
+    }
+    const isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
+    el.style.overflow = curOverflow;
+    return isOverflowing;
+  };
+  return React.createElement("div", {
+    className: `flex items-center ${collapsed ? 'ml-2.5' : 'ml-0'}`
+  }, React.createElement("div", {
+    id: "item-wrapper",
+    ref: scrollRef,
+    className: "flex overflow-x-auto scrollbar-hide whitespace-nowrap space-x-2 py-2 px-1"
+  }, navBarItems.map((item, index) => {
+    if (item.position === 'right' && item.component) {
+      return React.createElement("div", {
+        key: index,
+        className: "flex-shrink-0"
+      }, item.component(props));
+    }
+    return null;
+  })), React.createElement("div", {
+    className: "relative"
+  }, React.createElement(LanguageMenu, null)), React.createElement("div", {
+    className: "relative"
+  }, React.createElement(OrganizationDropDown, {
+    upperMenus: upperMenus,
+    routeParams: routeParams,
+    collapsed: collapsed,
+    settings: settings
+  })));
+};export{RightContent,useHorizontalScroll};//# sourceMappingURL=RightContent.js.map

package/lib/components/Layout/GlobalHeader/RightContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightContent.js","sources":["../../../../src/components/Layout/GlobalHeader/RightContent.tsx"],"sourcesContent":[null],"names":[],"mappings":"oMAOO,MAAM,mBAAmB,GAAG,MAAK;AACpC,EAAA,MAAA,QAAW,MAAG,CAAA,IAAuB,CAAA;WAErC,CAAA,MAAa;AACT,IAAA,MAAA,EAAA,GAAM,KAAK,CAAA;QACX,EAAA,EAAI;AACA,MAAA,MAAA,OAAM,GAAA,CAAA,IAAO;AACT,QAAA,IAAA,CAAA,CAAA,MAAI,KAAE,CAAA,EAAM;wBAAQ,EAAA;mBAClB,CAAA;gBACF,EAAE,CAAC,UAAS,GAAA,CAAA,CAAA,MAAA;AACR,UAAA,QAAA,EAAA;AACA,SAAA,CAAA;AACH,MAAA,CAAA;AACL,MAAA,EAAA,CAAA,gBAAE,CAAA,OAAA,EAAA,OAAA,CAAA;AACF,MAAA,OAAA,MAAG;AACH,QAAA,EAAA,CAAA,mBAAY,CAAA,OAAA,EAAA,OAAA,CAAA;AACR,MAAA,CAAA;AACJ,IAAA;QACJ;SACC,KAAE;AAEP;AACF,MAAA,YAAA,GAAA,KAAA,IAAA;AAEF,EAAA,MAAO;AACH,IAAA,KAAA;IACA,MAAM;AACN,IAAA,UAAM;IAEN,WAAA;IAEA,SAAA;IAEA;MACA,KAAA;QACA,CAAA,WAAA,EAAA,cAAA,CAAA,GAAA,QAAA,CAAA,EAAA,CAAA;QACA,SAAA,GAAA,mBAAA,EAAA;;;;;;;;AASQ;AACI;;kBACI;AACJ,IAAA,MAAA,GAAA,GAAA,QAAI,CAAK,6BAAoB,CAAA;aAChC;UACJ,KAAA,CAAA,GAAA,CAAA,EAAA;AACL,QAAG,GAAA,CAAA,KAAA,CAAA,SAAA,GAAA,uBAAA;AAEH,MAAA,CAAA,MAAM;AACF,QAAA,GAAA,CAAA,eAAiB,GAAK,MAAM;AAC5B,MAAA;AACI,IAAA;;AAEJ,EAAA,MAAA,KAAA;AACA,IAAA,MAAE,WAAO,GAAA,EAAQ,CAAA,cAAe;AAChC,IAAA,IAAA,CAAA,0BAAqB,KAAA,SAAA,EAAA;AACzB,MAAE,EAAA,CAAA,KAAA,CAAA,QAAA,GAAA,QAAA;IAEF;IACA,MAAI,aAAU,GAAM,EAAI,YAAW,GAAA,GAAO,WAAC,IAAA,EAAA,CAAA,YAAA,GAAA,EAAA,CAAA,YAAA;YACvC,CAAA,QAAA,GAAc;IAClB,OAAC,aAAA;AAED,EAAA,CAAA;AAegB,EAAA,OAAA,KAAA,CAAA,aAAY,CAAA,KAAA,EAAA;AAChB,IAAA,SACE,EAAA,CAAA,kBAAA,EAAA,SAAA,GAAA,QAAA,GAAA,MAAA,CAAA;UAEN,CAAA,aAAA,CAAA,KAAA,EAAA;sBACI;SAIJ,SAAA;aACI,EAAA;AAShB,GAAE,EAAA,WAAA,CAAA,GAAA,CAAA,CAAA,IAAA,EAAA,KAAA,KAAA;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalHeader/RightMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IRightMenuProps } from '../../typings';
+export declare const RightMenu: React.FC<IRightMenuProps>;
+//# sourceMappingURL=RightMenu.d.ts.map

package/lib/components/Layout/GlobalHeader/RightMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/RightMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAOrE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAgBhD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiR/C,CAAC"}