@evoke-platform/ui-components 1.5.0-dev.5 → 1.5.0-dev.7

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -35,7 +35,7 @@ export declare class FormFieldComponent extends ReactComponent {
      */
     manageFormErrors(): void;
     beforeSubmit(): void;
-    handleComponentChange: (components: any, value: any) => void;
+    handleAddressChange: (components: any, value: any) => void;
     handleChange: (key: string, value: any) => void;
     attachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -61,7 +61,7 @@ export class FormFieldComponent extends ReactComponent {
             selectOptions,
             inputMaskPlaceholderChar: component.inputMaskPlaceholderChar || '_',
         }, options, data);
-        this.handleComponentChange = (components, value) => {
+        this.handleAddressChange = (components, value) => {
             if (isArray(components)) {
                 if (components.filter((component) => Object.hasOwnProperty.call(component, 'components'))) {
                     components
@@ -93,12 +93,7 @@ export class FormFieldComponent extends ReactComponent {
                 else {
                     selectedValue = value.line1;
                     label = value.line1;
-                    this.handleComponentChange(this.root.components, value);
-                    this.root.components
-                        .filter((component) => Object.prototype.hasOwnProperty.call(component, 'components'))
-                        .forEach((section) => {
-                        this.handleComponentChange(section.components, value);
-                    });
+                    this.handleAddressChange(this.root.components, value);
                 }
             }
             else if (this.component.property.type === 'choices' || this.component.property.type === 'array') {
@@ -152,7 +147,9 @@ export class FormFieldComponent extends ReactComponent {
             this.on('changed-' + this.component.key, (value) => {
                 this.setValue(value ?? '');
                 this.updateValue(value, { modified: true });
-                this.attach(this.element);
+                if (this.element) {
+                    this.attach(this.element);
+                }
             });
         }
         if (this.component.type === 'Date') {

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.js

@@ -59,7 +59,7 @@ export class RepeatableFieldComponent extends ReactComponent {
                         }
                     }
                     this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
-                    this.attachReact(this.element);
+                    this.attach(this.element);
                 });
             }
         }

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

@@ -1,9 +1,22 @@
 import React, { ReactNode } from 'react';
 export type MenuBarProps = {
-    showNotifications: boolean;
+    /** The URL of the logo image to display. */
     logo: string;
+    /** Alternative text for the logo image. */
     logoAltText?: string;
+    /** Navigation items to display on the right side of the menu bar. */
     navItems?: ReactNode;
+    /** The name of the environment to display instead of the logo. */
     envName?: string;
+    /** Navigation item to display before the logo. */
+    navBeforeLogo?: ReactNode;
+    /** Indicates whether to show notifications. Currently not supported. */
+    showNotifications?: boolean;
 };
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props: MenuBarProps): React.JSX.Element;

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

@@ -1,6 +1,12 @@
 import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
 import React from 'react';
 import UIThemeProvider, { useResponsive } from '../../../theme';
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props) {
     const { isXs: isMobileView } = useResponsive();
     const classes = {
@@ -9,7 +15,7 @@ export default function MenuBar(props) {
             flexGrow: 1,
         },
         logo: {
-            paddingRight: '16px',
+            padding: '0 16px',
             height: '70px',
             maxWidth: isMobileView ? '220px' : null,
             objectFit: 'contain',
@@ -18,7 +24,8 @@ export default function MenuBar(props) {
     };
     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' } },
+            React.createElement(Toolbar, { disableGutters: true, sx: { justifyContent: 'space-between', overflow: 'hidden', paddingRight: '14px' } },
+                props.navBeforeLogo && (React.createElement(Box, { sx: { height: '70px', borderRight: '1px solid #919EAB3D' } }, props.navBeforeLogo)),
                 React.createElement(Box, { sx: classes.title }, !props.envName ? (React.createElement(CardMedia, { component: 'img', src: props.logo, alt: props.logoAltText, sx: classes.logo })) : (React.createElement(Box, { mt: 2 },
                     React.createElement(Typography, { variant: "h5" },
                         props?.envName,

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

@@ -11,3 +11,8 @@ it('render Menubar component without crashing', () => {
     render(React.createElement(Menubar, { showNotifications: true, navItems: navItems, logo: "" }));
     expect(screen.getAllByRole('link')).toHaveLength(3);
 });
+it('renders navBeforeLogo correctly', () => {
+    const navBeforeLogo = React.createElement(Link, { href: "#" }, "Before");
+    render(React.createElement(Menubar, { showNotifications: true, navItems: null, navBeforeLogo: navBeforeLogo, logo: "" }));
+    expect(screen.getAllByRole('link')).toHaveLength(1);
+});

package/dist/published/stories/MenuBar.stories.js

@@ -1,25 +1,20 @@
-import { Link } from '@mui/material';
 import React from 'react';
 import { MenuBar as CustomMenuBar } from '../index';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const logo = require('../assets/SA_logo.jpeg');
 export default {
-    title: 'Data Display/MenuBar',
+    title: 'Custom/MenuBar',
     component: CustomMenuBar,
-    argTypes: {
-        navItems: {
-            control: 'object',
-            defaultValue: React.createElement(Link, null, "Object"),
-        },
-        showNotifications: {
-            defaultValue: true,
-            type: 'boolean',
-        },
-        logo: {
-            defaultValue: logo,
-        },
-        envName: { defaultValue: 'System Automation' },
-    },
 };
-const Template = (props) => React.createElement(CustomMenuBar, { ...props });
-export const MenuBar = Template.bind({});
+const MenuBarTemplate = (args) => React.createElement(CustomMenuBar, { ...args });
+export const MenuBar = MenuBarTemplate.bind({});
+MenuBar.args = {
+    logo: logo,
+    logoAltText: 'System Automation',
+    navItems: (React.createElement(React.Fragment, null,
+        React.createElement("a", { href: "#" }, "Object1"),
+        React.createElement("a", { href: "#" }, "Object2"),
+        React.createElement("a", { href: "#" }, "Object3"))),
+    envName: 'System Automation',
+    showNotifications: true,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.0-dev.5",
+    "version": "1.5.0-dev.7",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",