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

package/lib/components/LanguageMenu/LanguageMenu.js

@@ -1,16 +1,19 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useTranslation}from'react-i18next';import {useMediaQuery}from'react-responsive';import {useAppDispatch,languages,CHANGE_LANGUAGE}from'@admin-layout/client';import config from'@app/cde-webconfig.json';const LanguageMenu = () => {
-  const isMobile = useMediaQuery({
-    maxWidth: 767
-  });
-  const [locale, setLocale] = useState('en');
-  const dispatch = useAppDispatch();
+import React__default,{useState,useRef,useEffect}from'react';import {useTranslation}from'react-i18next';import {useMediaQuery}from'react-responsive';import {languages,useLayoutSettings}from'@admin-layout/client';import {Globe}from'lucide-react';import config from'@app/cde-webconfig.json';const LanguageMenu = () => {
   const {
     i18n
   } = useTranslation();
   const {
     i18n: i18nextInstance
   } = config;
-  const [currentLang, setCurrentLang] = useState({
+  const filteredLanguages = languages.filter(language => i18nextInstance.supportedLngs.includes(language.key));
+  const isMobile = useMediaQuery({
+    maxWidth: 767
+  });
+  const {
+    settings,
+    setSettings
+  } = useLayoutSettings();
+  const [currentLang, setCurrentLang] = useState(filteredLanguages.find(language => language.key === settings.language) || {
     key: 'en',
     label: 'English',
     flag: '🇬🇧',
@@ -18,13 +21,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
   });
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
-  const filteredLanguages = languages.filter(language => i18nextInstance.supportedLngs.includes(language.key));
   useEffect(() => {
-    dispatch({
-      type: CHANGE_LANGUAGE,
-      payload: locale
-    });
-  }, [locale, dispatch]);
+    i18n.changeLanguage(settings.language);
+  }, []);
   useEffect(() => {
     const handleClickOutside = event => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -37,59 +36,39 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
     };
   }, []);
   const handleLanguageChange = language => {
-    setCurrentLang({
-      key: language.key,
-      label: language.label,
-      flag: language.flag,
-      global: language.global
-    });
+    setCurrentLang(language);
     i18n.changeLanguage(language.key);
-    setLocale(language.key);
     setIsOpen(false);
+    setSettings(settings, {
+      language: language.key
+    });
   };
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
-  return jsxs("div", {
+  return React__default.createElement("div", {
     className: "relative",
-    ref: dropdownRef,
-    children: [jsxs("button", {
-      onClick: toggleDropdown,
-      className: "flex items-center gap-1 px-3 py-1 border border-gray-500 rounded-full h-9 hover:bg-gray-100 transition-colors duration-200",
-      children: [currentLang.global ? jsx("svg", {
-        className: "w-5 h-5",
-        fill: "currentColor",
-        viewBox: "0 0 24 24",
-        children: jsx("path", {
-          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
-        })
-      }) : jsx("span", {
-        className: "text-lg",
-        children: currentLang.flag
-      }), jsx("span", {
-        className: "text-sm font-medium",
-        children: isMobile ? currentLang.key.toUpperCase() : currentLang.label
-      })]
-    }), isOpen && jsx("div", {
-      className: "absolute right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-10 w-40 max-h-60 overflow-y-auto",
-      children: filteredLanguages.map(language => jsxs("div", {
-        className: "px-4 py-2 flex items-center gap-2 hover:bg-gray-100 cursor-pointer",
-        onClick: () => handleLanguageChange(language),
-        children: [language.global ? jsx("svg", {
-          className: "w-4 h-4",
-          fill: "currentColor",
-          viewBox: "0 0 24 24",
-          children: jsx("path", {
-            d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
-          })
-        }) : jsx("span", {
-          className: "text-base",
-          children: language.flag
-        }), jsx("span", {
-          className: "text-sm",
-          children: isMobile ? language.key : language.label
-        })]
-      }, `lang_${language.key}`))
-    })]
-  });
+    ref: dropdownRef
+  }, React__default.createElement("button", {
+    onClick: toggleDropdown,
+    className: "flex items-center gap-1 px-3 py-1 border border-border rounded-full h-9 hover:bg-muted transition-colors duration-200 bg-background text-foreground"
+  }, currentLang.global ? React__default.createElement(Globe, {
+    className: "w-5 h-5"
+  }) : React__default.createElement("span", {
+    className: "text-lg"
+  }, currentLang.flag), React__default.createElement("span", {
+    className: "text-sm font-medium"
+  }, isMobile ? currentLang.key.toUpperCase() : currentLang.label)), isOpen && React__default.createElement("div", {
+    className: "absolute right-0 mt-1 themed-dropdown w-40 max-h-60 overflow-y-auto"
+  }, filteredLanguages.map(language => React__default.createElement("div", {
+    key: `lang_${language.key}`,
+    className: "px-4 py-2 flex items-center gap-2 hover:bg-muted cursor-pointer text-foreground",
+    onClick: () => handleLanguageChange(language)
+  }, language.global ? React__default.createElement(Globe, {
+    className: "w-4 h-4"
+  }) : React__default.createElement("span", {
+    className: "text-base"
+  }, language.flag), React__default.createElement("span", {
+    className: "text-sm"
+  }, isMobile ? language.key : language.label)))));
 };export{LanguageMenu};//# sourceMappingURL=LanguageMenu.js.map

package/lib/components/LanguageMenu/LanguageMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageMenu.js","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"uSAOO,MAAM,YAAY,GAAG,MAAK;QACvB,QAAA,GAAW,aAAA,CAAA;IACjB,QAAa,EAAA;AACb,GAAA,CAAA;AACA,EAAA,MAAA,CAAA,MAAY,EAAA,SAAK,CAAA,GAAA,QAAiB,CAAA,IAAA,CAAA;AAClC,EAAA,MAAA,QAAY,iBAAiB,EAAE;AAC/B,EAAA,MAAA;AACI,IAAA;AACA,GAAA,GAAA,cAAgB,EAAA;AAChB,EAAA,MAAA;AACA,IAAA,IAAA,EAAA;AACH,GAAA,GAAC,MAAC;QACG,CAAA,WAAkB,EAAA,cAAY,CAAA,GAAA,QAAQ,CAAA;AAC5C,IAAA,GAAA,EAAA;IAEA,KAAM,EAAA,SAAA;IAEN,IAAS,EAAA;AACL,IAAA,MAAA,EAAA;AACI,GAAA,CAAA;AACA,EAAA,MAAA,CAAA,MAAA,EAAA,SAAe,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAClB,EAAA,MAAA,WAAE,GAAA,MAAA,CAAA,IAAA,CAAA;AACP,EAAA,MAAI,iBAAiB,GAAE,SAAA,CAAA,MAAA,CAAA,QAAA,IAAA,eAAA,CAAA,aAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA;WAEd,CAAA,MAAM;AACX,IAAA,QAAA,CAAA;AACI,MAAA,IAAA,EAAA,eAAe;;;AAGnB,GAAA,EAAA,CAAA,MAAE,EAAA,QAAA,CAAA,CAAA;AAEF,EAAA,SAAA,CAAA,MAAyB;AACzB,IAAA,MAAA,kBAAY,GAAA,KAAA,IAAA;AACR,MAAA,IAAA,WAAS,CAAmB,OAAA,IAAA,CAAA,mBAAc,CAAA,QAAA,CAAA,KAAA,CAAA,MAAoB,CAAA,EAAA;AAClE,QAAA,SAAE,CAAA,KAAA,CAAA;;AAGN,KAAA;AACI,IAAA,QAAA,CAAA,gBAAe,CAAA,WAAA,EAAA,kBAAA,CAAA;iBACN;cACA,CAAA,mBAAgB,CAAA,WAAA,EAAA,kBAAA,CAAA;;;AAGxB,EAAA,MAAA,oBAAE,GAAA,QAAA,IAAA;AACH,IAAA,cAAmB,CAAA;AACnB,MAAA,GAAA,EAAA,QAAU,CAAA,GAAA;WACD,EAAA,QAAM,CAAA,KAAE;AACrB,MAAE,IAAA,EAAA,QAAA,CAAA,IAAA;MAEI,MAAA,EAAA,QAAA,CAAA;AACF,KAAA,CAAA;AACJ,IAAA,IAAE,CAAA,cAAA,CAAA,QAAA,CAAA,GAAA,CAAA;IAEF,uBACS;AAuCb,IAAE,SAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LanguageMenu.js","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"iSAQO,MAAM,YAAY,GAAG,MAAK;AAC7B,EAAA,MAAA;AACA,IAAA;MACA,cAAM,EAAA;QACN;IACA,IAAA,EAAM;MACN,MAAO;AAEC,EAAA,MAAA,iBAAS,GAAA,SAAA,CAAA,MAAA,CAAA,QAAA,IAAA,eAAA,CAAA,aAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA;AACT,EAAA,MAAA,QAAO,GAAA,aAAS,CAAA;AAChB,IAAA,QAAI,EAAE;AACN,GAAA,CAAA;AACH,EAAA,MACH;IACF,QAAO;AACP,IAAA;MAEA,iBAAe,EAAA;AACX,EAAA,MAAA,CAAA,WAAK,EAAA,cAAuB,CAAC,GAAA,QAAU,CAAA,iBAAA,CAAA,IAAA,CAAA,QAAA,IAAA,QAAA,CAAA,GAAA,KAAA,QAAA,CAAA,QAAA,CAAA,IAAA;IAC3C,GAAG,EAAE,IAAE;IAEP,KAAA,EAAA,SAAe;AACX,IAAA,IAAA,EAAA,MAAM;AACF,IAAA,MAAA,EAAA;;eAEC,EAAA,SAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACL,EAAA,MAAA,WAAE,GAAA,MAAA,CAAA,IAAA,CAAA;AAEF,EAAA,SAAA,CAAA,MAAS;AACT,IAAA,IAAA,CAAA,cAAY,CAAA,QAAA,CAAA,QAAA,CAAA;AACR,EAAA,CAAA,EAAA,EAAA,CAAA;AACJ,EAAA,SAAE,CAAA,MAAA;IACN,MAAM,kBAAC,GAAA,KAAA,IAAA;AAEP,MAAA,IAAM,WAAA,CAAA,OAAA,IAAuB,CAAC,WAAU,CAAE,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA;QACtC,SAAA,CAAA,KAAe,CAAA;AACf,MAAA;;YAEA,CAAA,gBAAoB,CAAE,WAAU,EAAE,kBAAgB,CAAA;AACtD,IAAA,OAAE,MAAA;MAEF,QAAM,CAAA,mBAAsB,CAAA,WAAA,EAAA,kBAAA,CAAA;AACxB,IAAA,CAAA;AACJ,EAAA,CAAA,EAAC,EAAC,CAAA;QAEF,mCACS;AACD,IAAA,cAAA,CAAA,QAAA,CAAA;uBAIgB,CAAC,QAAQ,CAAC,GAClB,CAAA;aAIJ,CAAA,KAAA,CAAA;AAKH,IAAA,oBACG,EAAA;cAOa,EAAA,QAAS,CAAA;;AAYtC,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/BasicLayout/index.d.ts

@@ -1,19 +1,13 @@
-import React from 'react';
 import { BasicLayoutProps, GlobalHeaderProps } from '@admin-layout/client';
-interface ThemeContextType {
-    isDarkMode: boolean;
-    toggleTheme: () => void;
-}
-export declare const useTheme: () => ThemeContextType;
-export declare const useHorizontalScroll: ({ scrolled, setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
-    scrolled: any;
+import React from 'react';
+export declare function useHorizontalScroll({ setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
     setScrolled: any;
     setSearchOptionsShown: any;
     onScrollReachEnd: any;
-}) => React.MutableRefObject<undefined>;
-export declare const BasicLayout: React.FC<BasicLayoutProps & GlobalHeaderProps & {
+}): React.MutableRefObject<undefined>;
+export declare function BasicLayout(props: BasicLayoutProps & GlobalHeaderProps & {
     routeParams?: any;
     children?: React.ReactNode;
-}>;
-export {};
+    routePattern?: string;
+}): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Layout/BasicLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAEpB,MAAM,sBAAsB,CAAC;AAK9B,UAAU,gBAAgB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AAID,eAAO,MAAM,QAAQ,wBAIpB,CAAC;AACF,eAAO,MAAM,mBAAmB;;;;;uCA6B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA4I3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAIhB,iBAAiB,EAEpB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,qBAAqB,EAAE,gBAAgB,EAAE;;;;CAAA,qCA+B3F;AAwCD,wBAAgB,WAAW,CACvB,KAAK,EAAE,gBAAgB,GACnB,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,qBAkXnG"}

package/lib/components/Layout/BasicLayout/index.js

@@ -1,14 +1,9 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect,createContext,useContext}from'react';import {Sidebar}from'../Sidebar/Sidebar.js';import {GlobalHeader}from'../GlobalHeader/Header.js';import {useLocation,Outlet}from'@remix-run/react';import warning from'warning';import {omit}from'lodash-es';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {defaultSettings,useComponentSize,getMenuSeparation}from'@admin-layout/client';import isBrowser from'../../../utils/isBrowser/index.js';import {getPageTitleInfo}from'../getPageTitle.js';import {GlobalFooter}from'../GlobalFooter/Footer.js';const ThemeContext = createContext(undefined);
-const useTheme = () => {
-  const context = useContext(ThemeContext);
-  return context;
-};
-const useHorizontalScroll = ({
-  scrolled,
+import {getThemeColors,getMenuSeparation,useComponentSize}from'@admin-layout/client';import {Outlet}from'@remix-run/react';import {omit}from'lodash-es';import React__default,{useRef,useState,useMemo,useEffect,useCallback}from'react';import warning from'warning';import {config}from'../../../config/env-config.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {useScrollThreshold}from'../../../hooks/useScrollThreshold.js';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {getPageTitleInfo}from'../getPageTitle.js';import {MainHeader}from'../GlobalHeader/MainHeader.js';import'@remix-run/router';import'../../../helpers/DynamicIcon.js';import'@app/dialog/WrappedDialogsSwitch';import {GlobalHeader}from'../GlobalHeader/Header.js';import {MainSidebar}from'../Sidebar/MainSidebar.js';import {PerplexSidebar}from'../Sidebar/PerplexSidebar.js';import'@common-stack/components-pro';import {FooterSlot}from'../slot-fill/Footer.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';//helper func
+function useHorizontalScroll({
   setScrolled,
   setSearchOptionsShown,
   onScrollReachEnd
-}) => {
+}) {
   const elRef = useRef();
   useEffect(() => {
     const el = elRef.current || null;
@@ -16,7 +11,6 @@ const useHorizontalScroll = ({
       const onWheel = e => {
         if (e.deltaY == 0) return;
         e.preventDefault();
-        setSearchOptionsShown(false);
         if (window.scrollY > 50) {
           setScrolled(true);
         }
@@ -34,8 +28,8 @@ const useHorizontalScroll = ({
     }
   }, []);
   return elRef;
-};
-const defaultPageTitleRender = (pageProps, props) => {
+}
+function defaultPageTitleRender(pageProps, props) {
   const {
     pageTitleRender
   } = props;
@@ -58,59 +52,165 @@ const defaultPageTitleRender = (pageProps, props) => {
     warning(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
   }
   return pageTitleInfo;
-};
-const BasicLayout = props => {
-  const propsWithSettings = {
-    ...defaultSettings,
-    ...props
-  };
-  const [scrolled, setScrolled] = useState(false);
-  const [collapsed, setCollapsed] = useState();
+}
+function getUILayoutValueFromSettings(settingsObj, routeForBracket, device, path) {
+  const routeDeviceKey = `[${routeForBracket}][${device}]`;
+  const uiOverride = settingsObj?.uiSettings?.[routeDeviceKey];
+  if (uiOverride) {
+    const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
+    if (value !== undefined) return value;
+  }
+  return path.split('.').reduce((obj, key) => obj?.[key], settingsObj);
+}
+function BasicLayout(props) {
+  // Destructure props
   const {
     children,
+    onCollapse: propsOnCollapse,
+    defaultCollapsed,
     menuData,
-    // location,
+    fullMenuData,
+    siderWidth = 208,
+    menu,
+    menuDataRender,
+    loading,
+    location,
     routeParams,
     settings,
+    authorities,
     primaryColor,
-    onSettingChange,
-    mainHeaderProps
-  } = propsWithSettings;
+    mainHeaderProps,
+    actor,
+    routePattern
+  } = props;
+  // Refs
+  useRef(settings);
+  // Hooks
+  const {
+    isMobile
+  } = useMediaQuery();
+  // State
+  const [scrolled, setScrolled] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [siderPinned, setSiderPinned] = useState(false);
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const location = useLocation();
   const [scrollEnd, setScrollEnd] = useState(false);
   const [searchOptionsShown, setSearchOptionsShown] = useState(false);
+  const [footerFixed, setFooterFixed] = useState(false);
+  // Computed values
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  const routeForBracket = routePattern || currentRoute;
   const {
     picture
   } = mainHeaderProps;
-  const onScrollReachEnd = () => {
-    setScrollEnd(prevScrollEnd => !prevScrollEnd);
-  };
-  useHorizontalScroll({
-    scrolled,
-    setScrolled,
-    setSearchOptionsShown,
-    onScrollReachEnd
-  });
+  const {
+    LAYOUT_ROOT
+  } = config;
+  const deviceSettings = useMemo(() => ({
+    header: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'header'),
+    background: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'background'),
+    footer: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'footer')
+  }), [settings, routeForBracket, deviceType]);
+  const layoutSettings = useMemo(() => ({
+    contentWidth: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'contentWidth'),
+    navigationMode: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'navigationMode'),
+    sideMenuType: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'sideMenuType'),
+    fixedHeader: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'fixedHeader'),
+    fixedSidebar: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'fixedSidebar'),
+    splitMenus: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'splitMenus'),
+    upperMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'upperMenuDividerName'),
+    middleMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'middleMenuDividerName'),
+    lowerMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'lowerMenuDividerName'),
+    menuHeaderRender: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'menuHeaderRender')
+  }), [settings, routeForBracket, deviceType]);
+  const backgroundSettings = useMemo(() => {
+    return deviceSettings?.background || {
+      type: 'color',
+      color: 'inherit',
+      image: '',
+      video: ''
+    };
+  }, [deviceSettings]);
+  const themeColors = useMemo(() => getThemeColors(settings?.theme), [settings?.theme]);
+  const backgroundClasses = useMemo(() => {
+    let classes = 'flex flex-col h-screen bg-background font-sans relative';
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      classes += ' bg-cover bg-center bg-fixed';
+    }
+    return classes;
+  }, [backgroundSettings]);
+  const backgroundStyle = useMemo(() => {
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      return {
+        backgroundImage: `url(${backgroundSettings.image})`
+      };
+    }
+    if (backgroundSettings.type === 'color' && backgroundSettings.color !== 'inherit') {
+      return {
+        backgroundColor: backgroundSettings.color
+      };
+    }
+    return {};
+  }, [backgroundSettings]);
+  const headerUpperMenus = useMemo(() => getMenuSeparation(menuData).upperMenus, [menuData]);
+  const footerActive = useMemo(() => getOverrideValue('footer.showFooter'), [deviceSettings]);
+  const memoizedMenuData = useMemo(() => menuData, [menuData]);
+  const memoizedRouteParams = useMemo(() => routeParams, [routeParams]);
+  // Derived layout flags
+  const isSidebarLayout = layoutSettings?.navigationMode !== 'topbar';
+  layoutSettings?.navigationMode === 'topbar';
+  const isSideMenuLayout = layoutSettings?.navigationMode === 'sidebar';
+  layoutSettings?.navigationMode === 'mixed';
+  const showMenu = deviceSettings?.header?.showMenu;
+  const showHeader = deviceSettings?.header?.showHeader;
+  const menuHeaderRender = deviceSettings?.header?.menuHeaderRender;
+  const hasFixedSidebar = layoutSettings?.fixedSidebar;
+  const isPerplexLayout = settings?.sideMenuType === 'perplexLayout';
+  const isAppShell = LAYOUT_ROOT != '/';
+  const shouldApplySidebarMargin = isSidebarLayout && showMenu && hasFixedSidebar && !isMobile;
+  const shouldShowSidebar = isSidebarLayout && showMenu;
+  const sideBarMarginTop = !isAppShell && showHeader ? '5rem' : undefined;
+  const computedMarginLeft = useMemo(() => {
+    return shouldApplySidebarMargin ? !isPerplexLayout ? collapsed ? '64px' : '256px' : !siderPinned ? '92px' : '316px' : '0px';
+  }, [shouldApplySidebarMargin, isPerplexLayout, collapsed, siderPinned]);
   const defaultProps = omit({
-    ...propsWithSettings
+    ...props
   }, ['layout']);
-  defaultPageTitleRender({
+  const pageTitleInfo = defaultPageTitleRender({
     pathname: location?.pathname,
     ...defaultProps
-  }, propsWithSettings);
-  const settingRef = useRef(settings);
+  }, props);
+  const scrollThreshold = deviceSettings?.header?.scrollThreshold || 50;
+  // Effects
   useEffect(() => {
-    // Only update if the primaryColor actually needs to change
-    if (settingRef.current?.primaryColor === '#3FA541C' && primaryColor !== '#3FA541C') {
-      const newState = {
-        ...settingRef.current,
-        primaryColor
+    if (searchOptionsShown && isMobile) {
+      const scrollY = window.scrollY;
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = '100%';
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        document.body.style.overflow = '';
+        window.scrollTo(0, scrollY);
       };
-      onSettingChange(newState);
     }
-  }, [primaryColor, isBrowser, settingRef]);
+  }, [searchOptionsShown, isMobile]);
+  const sendRouteChange = useCallback(() => {
+    if (actor && location?.pathname) {
+      actor.send({
+        type: 'UISETTING_ROUTE_CHANGE',
+        pathname: location?.pathname,
+        routePattern: props.routePattern
+      });
+    }
+  }, [actor, location?.pathname, props.routePattern]);
+  useEffect(() => {
+    sendRouteChange();
+  }, [sendRouteChange]);
   const {
     ref: refHeader,
     height: heightHeader
@@ -123,73 +223,139 @@ const BasicLayout = props => {
     ref: refFooter,
     height: heightFooter
   } = useComponentSize();
-  const [footerFixed, setFooterFixed] = useState(false);
   useEffect(() => {
     if (heightHeader && heightBody && heightFooter) {
       if (heightBody < window.innerHeight - heightHeader - heightFooter) setFooterFixed(true);else setFooterFixed(false);
     }
   }, [heightHeader, heightBody, heightFooter]);
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('theme');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (savedTheme === 'dark' || !savedTheme && prefersDark) {
-      setIsDarkMode(true);
-      document.documentElement.classList.add('dark');
-    }
+  const {
+    componentVisibility
+  } = useScrollThreshold([{
+    threshold: scrollThreshold,
+    id: 'search-bar',
+    useWindowScroll: true
+  }]);
+  const onScrollReachEnd = useCallback(() => {
+    setScrollEnd(prevScrollEnd => !prevScrollEnd);
   }, []);
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode);
-    if (isDarkMode) {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    } else {
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    }
-  };
-  const toggleSideMenu = () => {
-    setIsSideMenuOpen(!isSideMenuOpen);
-  };
-  const closeSideMenu = () => {
-    setIsSideMenuOpen(false);
-  };
-  return jsx(ThemeContext.Provider, {
-    value: {
-      isDarkMode,
-      toggleTheme
-    },
-    children: jsxs("div", {
-      className: `flex h-screen bg-gray-50 dark:bg-gray-900`,
-      children: [jsx(Sidebar, {
-        isSideMenuOpen: isSideMenuOpen,
-        closeSideMenu: closeSideMenu,
-        menuData: menuData,
-        collapsed: children,
-        routeParams: routeParams,
-        settings: settings
-      }), jsxs("div", {
-        className: "flex flex-col flex-1 w-full",
-        children: [jsx(GlobalHeader, {
-          toggleSideMenu: toggleSideMenu,
-          settings: settings,
-          upperMenus: getMenuSeparation(menuData).upperMenus,
-          routeParams: routeParams,
-          collapsed: collapsed
-        }), jsx(SettingDrawer, {
-          primaryColor: primaryColor,
-          settings: settings,
-          onSettingChange: onSettingChange
-        }), jsx("main", {
-          className: "h-full overflow-y-auto",
-          children: jsx("div", {
-            className: "container px-6 mx-auto grid",
-            children: jsx(Outlet, {})
-          })
-        }), jsx(GlobalFooter, {
-          settings: settings,
-          active: settings?.showFooter
-        })]
-      })]
-    })
+  const horizontalScrollRef = useHorizontalScroll({
+    setScrolled,
+    setSearchOptionsShown,
+    onScrollReachEnd
   });
-};export{BasicLayout,useHorizontalScroll,useTheme};//# sourceMappingURL=index.js.map
+  // Helper functions
+  function getOverrideValue(path, deviceSettingsRef = deviceSettings) {
+    return path.split('.').reduce((obj, key) => obj?.[key], deviceSettingsRef);
+  }
+  const toggleSideMenu = useCallback(() => {
+    setIsSideMenuOpen(prev => !prev);
+  }, []);
+  const closeSideMenu = useCallback(() => {
+    setIsSideMenuOpen(false);
+  }, []);
+  const handleSettingChange = useCallback(newSettings => {
+    if (actor) {
+      actor.send({
+        type: 'UISETTING_UPDATE',
+        value: newSettings
+      });
+    }
+  }, [actor]);
+  return React__default.createElement("div", {
+    className: backgroundClasses,
+    ref: horizontalScrollRef,
+    style: backgroundStyle
+  }, deviceSettings?.header?.showHeader && !isSideMenuLayout && LAYOUT_ROOT != '/' && React__default.createElement(GlobalHeader, {
+    toggleSideMenu: toggleSideMenu,
+    settings: settings,
+    upperMenus: headerUpperMenus,
+    routeParams: memoizedRouteParams,
+    collapsed: collapsed,
+    location: location
+  }), LAYOUT_ROOT === '/' && deviceSettings?.header?.showHeader && React__default.createElement(MainHeader, {
+    scrolled: scrolled,
+    location: location,
+    menuData: memoizedMenuData,
+    settings: settings,
+    pageTitleInfo: pageTitleInfo,
+    searchOptionsShown: searchOptionsShown,
+    setSearchOptionsShown: setSearchOptionsShown,
+    authorities: authorities,
+    picture: picture,
+    componentVisibility: componentVisibility,
+    showMenu: showMenu,
+    toggleSideMenu: toggleSideMenu
+  }), React__default.createElement("div", {
+    className: "bg-background"
+  }, shouldShowSidebar && !isPerplexLayout && React__default.createElement("div", {
+    style: sideBarMarginTop ? {
+      marginTop: sideBarMarginTop
+    } : undefined
+  }, React__default.createElement(MainSidebar, {
+    isSideMenuOpen: isSideMenuOpen,
+    closeSideMenu: closeSideMenu,
+    menuData: memoizedMenuData,
+    collapsed: collapsed,
+    setCollapsed: setCollapsed,
+    routeParams: memoizedRouteParams,
+    settings: settings,
+    siderPinned: siderPinned,
+    setSiderPinned: setSiderPinned,
+    showHeader: showHeader,
+    menuHeaderRender: menuHeaderRender,
+    deviceSettings: deviceSettings,
+    isSideMenuLayout: isSideMenuLayout
+  })), shouldShowSidebar && isPerplexLayout && React__default.createElement("div", {
+    style: sideBarMarginTop ? {
+      marginTop: sideBarMarginTop
+    } : undefined
+  }, React__default.createElement(PerplexSidebar, {
+    isSideMenuOpen: isSideMenuOpen,
+    closeSideMenu: closeSideMenu,
+    menuData: memoizedMenuData,
+    collapsed: collapsed,
+    setCollapsed: setCollapsed,
+    routeParams: memoizedRouteParams,
+    settings: settings,
+    layoutSettings: layoutSettings,
+    menuHeaderRender: menuHeaderRender,
+    deviceSettings: deviceSettings,
+    siderPinned: siderPinned,
+    setSiderPinned: setSiderPinned,
+    actor: actor,
+    sideBarMarginTop: sideBarMarginTop,
+    showHeader: showHeader,
+    isSideMenuLayout: isSideMenuLayout,
+    authorities: authorities,
+    picture: picture
+  })), React__default.createElement("div", {
+    className: "flex flex-col flex-1 bg-background",
+    style: {
+      marginLeft: computedMarginLeft,
+      padding: LAYOUT_ROOT != '/' ? '24px' : '0px'
+    }
+  }, config.ENABLE_SETTING_DRAWER && React__default.createElement(SettingDrawer, {
+    primaryColor: primaryColor,
+    settings: settings,
+    onSettingChange: handleSettingChange,
+    actor: actor,
+    colorList: themeColors,
+    fullMenuData: fullMenuData,
+    location: location,
+    routePattern: props.routePattern
+  }), React__default.createElement("main", {
+    className: "relative"
+  }, searchOptionsShown && deviceSettings?.header?.searchBarOverlay && React__default.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 z-30 cursor-pointer",
+    onClick: e => {
+      e.stopPropagation();
+      setSearchOptionsShown(false);
+    }
+  }), React__default.createElement(Outlet, null)), getOverrideValue('footer.showFooter') && React__default.createElement("div", {
+    ref: refFooter,
+    className: footerFixed ? 'fixed bottom-0 w-full' : ''
+  }, React__default.createElement(FooterSlot, {
+    settings: settings,
+    active: footerActive
+  })))));
+}export{BasicLayout,useHorizontalScroll};//# sourceMappingURL=index.js.map