@evoke-platform/ui-components 1.4.0-testing.0 → 1.4.0-testing.1

package/dist/published/components/custom/Menubar/Menubar.d.ts

@@ -1,10 +1,9 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export type MenuBarProps = {
     showNotifications: boolean;
     logo: string;
     logoAltText?: string;
-    navItems?: ReactJSXElement;
+    navItems?: ReactNode;
     envName?: string;
 };
 export default function MenuBar(props: MenuBarProps): React.JSX.Element;

package/dist/published/components/custom/Menubar/Menubar.js

@@ -1,18 +1,21 @@
 import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
 import React from 'react';
-import UIThemeProvider from '../../../theme';
-const classes = {
-    title: {
-        flexGrow: 1,
-        height: 70,
-    },
-    logo: {
-        paddingRight: '16px',
-        height: '70px',
-        width: 'inherit',
-    },
-};
+import UIThemeProvider, { useResponsive } from '../../../theme';
 export default function MenuBar(props) {
+    const { isXs: isMobileView } = useResponsive();
+    const classes = {
+        title: {
+            height: 70,
+            flexGrow: 1,
+        },
+        logo: {
+            paddingRight: '16px',
+            height: '70px',
+            maxWidth: isMobileView ? '220px' : null,
+            objectFit: 'contain',
+            width: 'auto',
+        },
+    };
     return (React.createElement(UIThemeProvider, null,
         React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
             React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },

package/dist/published/index.d.ts

@@ -6,6 +6,7 @@ export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
+export * from './theme';
 export * as EVOKE_TYPES from './types';
 export * from './util';
 export type { AutocompleteRenderGroupParams, ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, TextFieldProps, Theme, } from '@mui/material';

package/dist/published/index.js

@@ -5,5 +5,6 @@ export * from './components/core';
 export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
+export * from './theme';
 export * as EVOKE_TYPES from './types';
 export * from './util';

package/dist/published/theme/hooks.d.ts

@@ -0,0 +1,31 @@
+import { Breakpoint } from '@mui/material/styles';
+/**
+ * Custom hook for responsive design breakpoints using size terminology.
+ * Breakpoints based on MUI default theme:
+ * - xs: 0px to 599px
+ * - sm: 600px to 899px
+ * - md: 900px to 1199px
+ * - lg: 1200px to 1535px
+ * - xl: 1536px and up
+ * @returns Object with boolean flags for different breakpoints
+ */
+export declare function useResponsive(): {
+    /** Extra small screens (0px to 599px) */
+    isXs: boolean;
+    /** Small screens (600px to 899px) */
+    isSm: boolean;
+    /** Medium screens (900px to 1199px) */
+    isMd: boolean;
+    /** Large screens (1200px to 1535px) */
+    isLg: boolean;
+    /** Extra large screens (1536px and up) */
+    isXl: boolean;
+    /** Returns true if viewport width is smaller than the specified breakpoint */
+    smallerThan: (breakpoint: Breakpoint) => boolean;
+    /** Returns true if viewport width is larger than the specified breakpoint */
+    largerThan: (breakpoint: Breakpoint) => boolean;
+    /** Returns true if viewport width is exactly within the specified breakpoint range */
+    exactly: (breakpoint: Breakpoint) => boolean;
+    /** Returns true if viewport width is between the specified breakpoints */
+    between: (start: Breakpoint, end: Breakpoint) => boolean;
+};

package/dist/published/theme/hooks.js

@@ -0,0 +1,35 @@
+import { useTheme } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+/**
+ * Custom hook for responsive design breakpoints using size terminology.
+ * Breakpoints based on MUI default theme:
+ * - xs: 0px to 599px
+ * - sm: 600px to 899px
+ * - md: 900px to 1199px
+ * - lg: 1200px to 1535px
+ * - xl: 1536px and up
+ * @returns Object with boolean flags for different breakpoints
+ */
+export function useResponsive() {
+    const theme = useTheme();
+    return {
+        /** Extra small screens (0px to 599px) */
+        isXs: useMediaQuery(theme.breakpoints.only('xs')),
+        /** Small screens (600px to 899px) */
+        isSm: useMediaQuery(theme.breakpoints.only('sm')),
+        /** Medium screens (900px to 1199px) */
+        isMd: useMediaQuery(theme.breakpoints.only('md')),
+        /** Large screens (1200px to 1535px) */
+        isLg: useMediaQuery(theme.breakpoints.only('lg')),
+        /** Extra large screens (1536px and up) */
+        isXl: useMediaQuery(theme.breakpoints.only('xl')),
+        /** Returns true if viewport width is smaller than the specified breakpoint */
+        smallerThan: (breakpoint) => useMediaQuery(theme.breakpoints.down(breakpoint)),
+        /** Returns true if viewport width is larger than the specified breakpoint */
+        largerThan: (breakpoint) => useMediaQuery(theme.breakpoints.up(breakpoint)),
+        /** Returns true if viewport width is exactly within the specified breakpoint range */
+        exactly: (breakpoint) => useMediaQuery(theme.breakpoints.only(breakpoint)),
+        /** Returns true if viewport width is between the specified breakpoints */
+        between: (start, end) => useMediaQuery(theme.breakpoints.between(start, end)),
+    };
+}

package/dist/published/theme/index.d.ts

@@ -1,2 +1,5 @@
+import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
+import { useResponsive } from './hooks';
+export { useMediaQuery, useResponsive, useTheme };
 export default UIThemeProvider;

package/dist/published/theme/index.js

@@ -1,2 +1,5 @@
+import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
+import { useResponsive } from './hooks';
+export { useMediaQuery, useResponsive, useTheme };
 export default UIThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.0",
+    "version": "1.4.0-testing.1",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",