@applica-software-guru/react-admin 1.3.168 → 1.3.171

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.jsx"],"names":[],"mappings":"AAcA;;;4CAgEC;;;;;;;sBArEqB,aAAa;sBACb,aAAa;sBAJb,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.jsx"],"names":[],"mappings":"AAcA;;;4CAiEC;;;;;;;sBAtEqB,aAAa;sBACb,aAAa;sBAJb,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.168",
+  "version": "1.3.171",
   "private": false,
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "./style.css": "./dist/style.css"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
+    "@ant-design/icons": "^5.3.1",
     "@emotion/react": "^11.4",
     "@emotion/styled": "^11.3.0",
     "@mui/base": "5.0.0-beta.19",

package/src/components/Layout/Header/ResponsiveSection.tsx

@@ -19,6 +19,7 @@ const ResponsiveSection = (props: IResponsiveSectionProps) => {
     <>
       {/*@ts-ignore*/}
       <HeaderToggleButton
+        value="drawer"
         aria-label="open more menu"
         aria-controls={open ? 'menu-list-grow' : undefined}
         aria-haspopup="true"

package/src/components/Layout/Layout.tsx

@@ -10,6 +10,7 @@ import { Navigation } from './Navigation';
 import { Outlet } from 'react-router-dom';
 import { useBreadcrumbs } from '../../hooks';
 import { withLayoutProvider } from './Provider';
+import { ThemeToggler } from './ThemeToggler';
 
 type ILayoutProps = React.PropsWithChildren<{
   name: string;
@@ -26,6 +27,7 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
     <LayoutWrapper>
       <Header>
         <HeaderSpacer />
+        <ThemeToggler />
         <LoadingIndicator />
         <HeaderNotification />
         <ResponsiveSection>

package/src/components/Layout/ThemeToggler.tsx

@@ -0,0 +1,20 @@
+import { SunOutlined, MoonOutlined } from '@ant-design/icons';
+import { useThemeConfig } from '../../hooks';
+import { HeaderToggleButton } from './Header';
+
+const ThemeToggler = () => {
+  const { mode, setMode } = useThemeConfig();
+
+  return (
+    <HeaderToggleButton
+      value="theme-mode"
+      aria-label="toggle mode"
+      onChange={() => setMode(mode === 'dark' ? 'light' : 'dark')}
+      selected={false}
+    >
+      {mode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
+    </HeaderToggleButton>
+  );
+};
+
+export { ThemeToggler };

package/src/components/Layout/index.ts

@@ -8,4 +8,5 @@ export * from './Navigation';
 export * from './NavMenu';
 export * from './Provider';
 export * from './Wrapper';
-export * from './Error'
+export * from './Error';
+export * from './ThemeToggler';

package/src/themes/index.jsx

@@ -13,7 +13,8 @@ import { useMemo } from 'react';
 import { useThemeConfig } from '../hooks';
 
 const ThemeCustomization = ({ themeOverrides, children }) => {
-  const { themeDirection, mode, presetColor, fontFamily } = useThemeConfig();
+  const _themeConfig = useThemeConfig(1);
+  const { themeDirection, mode, presetColor, fontFamily } = _themeConfig;
 
   const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);