@evoke-platform/ui-components 1.5.0-testing.0 → 1.5.0-testing.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/published/components/core/List/ListItemIcon/ListItemIcon.d.ts +4 -0
  2. package/dist/published/components/core/List/ListItemIcon/ListItemIcon.js +6 -0
  3. package/dist/published/components/core/List/ListItemIcon/index.d.ts +3 -0
  4. package/dist/published/components/core/List/ListItemIcon/index.js +3 -0
  5. package/dist/published/components/core/List/index.d.ts +2 -1
  6. package/dist/published/components/core/List/index.js +2 -1
  7. package/dist/published/components/core/index.d.ts +1 -1
  8. package/dist/published/components/core/index.js +1 -1
  9. package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts +1 -1
  10. package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js +6 -9
  11. package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js +3 -3
  12. package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/DocumentViewerCell.d.ts +13 -0
  13. package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/DocumentViewerCell.js +115 -0
  14. package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js +25 -26
  15. package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.js +1 -1
  16. package/dist/published/components/custom/Form/utils.js +1 -1
  17. package/dist/published/components/custom/Menubar/Menubar.d.ts +14 -1
  18. package/dist/published/components/custom/Menubar/Menubar.js +9 -2
  19. package/dist/published/components/custom/Menubar/Menubar.test.js +5 -0
  20. package/dist/published/components/layout/Box/Box.d.ts +3 -3
  21. package/dist/published/components/layout/Box/Box.js +4 -4
  22. package/dist/published/icons/custom/NoNavigation.d.ts +3 -0
  23. package/dist/published/icons/custom/NoNavigation.js +10 -0
  24. package/dist/published/icons/custom/SideNavigation.d.ts +3 -0
  25. package/dist/published/icons/custom/SideNavigation.js +11 -0
  26. package/dist/published/icons/custom/TopNavigation.d.ts +3 -0
  27. package/dist/published/icons/custom/TopNavigation.js +11 -0
  28. package/dist/published/icons/custom/index.d.ts +3 -0
  29. package/dist/published/icons/custom/index.js +3 -0
  30. package/dist/published/stories/Box.stories.d.ts +3 -12
  31. package/dist/published/stories/MenuBar.stories.js +13 -18
  32. package/dist/published/stories/Palette.stories.d.ts +2 -12
  33. package/package.json +2 -2
@@ -0,0 +1,4 @@
1
+ import { ListItemIconProps } from '@mui/material';
2
+ import React from 'react';
3
+ declare const ListItemIcon: (props: ListItemIconProps) => React.JSX.Element;
4
+ export default ListItemIcon;
@@ -0,0 +1,6 @@
1
+ import { ListItemIcon as MUIListItemIcon } from '@mui/material';
2
+ import React from 'react';
3
+ const ListItemIcon = (props) => {
4
+ return React.createElement(MUIListItemIcon, { ...props });
5
+ };
6
+ export default ListItemIcon;
@@ -0,0 +1,3 @@
1
+ import ListItemIcon from './ListItemIcon';
2
+ export default ListItemIcon;
3
+ export { ListItemIcon };
@@ -0,0 +1,3 @@
1
+ import ListItemIcon from './ListItemIcon';
2
+ export default ListItemIcon;
3
+ export { ListItemIcon };
@@ -1,4 +1,5 @@
1
1
  import List from './List';
2
2
  import ListItem from './ListItem';
3
+ import ListItemIcon from './ListItemIcon';
3
4
  export default List;
4
- export { List, ListItem };
5
+ export { List, ListItem, ListItemIcon };
@@ -1,4 +1,5 @@
1
1
  import List from './List';
2
2
  import ListItem from './ListItem';
3
+ import ListItemIcon from './ListItemIcon';
3
4
  export default List;
4
- export { List, ListItem };
5
+ export { List, ListItem, ListItemIcon };
@@ -24,7 +24,7 @@ export { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } f
24
24
  export { IconButton } from './IconButton';
25
25
  export { LinearProgress } from './LinearProgress';
26
26
  export { Link } from './Link';
27
- export { List, ListItem } from './List';
27
+ export { List, ListItem, ListItemIcon } from './List';
28
28
  export { LoadingButton } from './LoadingButton';
29
29
  export * from './LocalizationProvider';
30
30
  export { Menu, MenuItem } from './Menu';
@@ -24,7 +24,7 @@ export { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } f
24
24
  export { IconButton } from './IconButton';
25
25
  export { LinearProgress } from './LinearProgress';
26
26
  export { Link } from './Link';
27
- export { List, ListItem } from './List';
27
+ export { List, ListItem, ListItemIcon } from './List';
28
28
  export { LoadingButton } from './LoadingButton';
29
29
  export * from './LocalizationProvider';
30
30
  export { Menu, MenuItem } from './Menu';
@@ -35,7 +35,7 @@ export declare class FormFieldComponent extends ReactComponent {
35
35
  */
36
36
  manageFormErrors(): void;
37
37
  beforeSubmit(): void;
38
- handleComponentChange: (components: any, value: any) => void;
38
+ handleAddressChange: (components: any, value: any) => void;
39
39
  handleChange: (key: string, value: any) => void;
40
40
  attachReact(element: Element): void;
41
41
  }
@@ -61,13 +61,13 @@ export class FormFieldComponent extends ReactComponent {
61
61
  selectOptions,
62
62
  inputMaskPlaceholderChar: component.inputMaskPlaceholderChar || '_',
63
63
  }, options, data);
64
- this.handleComponentChange = (components, value) => {
64
+ this.handleAddressChange = (components, value) => {
65
65
  if (isArray(components)) {
66
66
  if (components.filter((component) => Object.hasOwnProperty.call(component, 'components'))) {
67
67
  components
68
68
  .filter((component) => Object.hasOwnProperty.call(component, 'components'))
69
69
  .forEach((comp) => {
70
- this.handleComponentChange(comp.components, value);
70
+ this.handleAddressChange(comp.components, value);
71
71
  });
72
72
  }
73
73
  components
@@ -93,12 +93,7 @@ export class FormFieldComponent extends ReactComponent {
93
93
  else {
94
94
  selectedValue = value.line1;
95
95
  label = value.line1;
96
- this.handleComponentChange(this.root.components, value);
97
- this.root.components
98
- .filter((component) => Object.prototype.hasOwnProperty.call(component, 'components'))
99
- .forEach((section) => {
100
- this.handleComponentChange(section.components, value);
101
- });
96
+ this.handleAddressChange(this.root.components, value);
102
97
  }
103
98
  }
104
99
  else if (this.component.property.type === 'choices' || this.component.property.type === 'array') {
@@ -152,7 +147,9 @@ export class FormFieldComponent extends ReactComponent {
152
147
  this.on('changed-' + this.component.key, (value) => {
153
148
  this.setValue(value ?? '');
154
149
  this.updateValue(value, { modified: true });
155
- this.attach(this.element);
150
+ if (this.element) {
151
+ this.attach(this.element);
152
+ }
156
153
  });
157
154
  }
158
155
  if (this.component.type === 'Date') {
@@ -41,7 +41,7 @@ export const RelatedObjectInstance = (props) => {
41
41
  handleClose();
42
42
  setErrors([]);
43
43
  };
44
- const createNewInstance = async (submission) => {
44
+ const createNewInstance = async (submission, setSubmitting) => {
45
45
  if (!relatedObject) {
46
46
  // Handle the case where relatedObject is undefined
47
47
  return { isSuccessful: false };
@@ -74,12 +74,12 @@ export const RelatedObjectInstance = (props) => {
74
74
  setSnackbarError({
75
75
  showAlert: true,
76
76
  message: err.response?.data?.error?.details?.[0]?.message ??
77
- err.data?.error?.message ??
77
+ err.response?.data?.error?.message ??
78
78
  `An error occurred. The new instance was not created.`,
79
79
  isError: true,
80
80
  });
81
81
  error = err.response?.data?.error;
82
- onClose();
82
+ setSubmitting && setSubmitting(false);
83
83
  }
84
84
  return { isSuccessful, error };
85
85
  };
@@ -0,0 +1,13 @@
1
+ import { ApiServices, ObjectInstance } from '@evoke-platform/context';
2
+ import React from 'react';
3
+ export type DocumentViewerCellProps = {
4
+ instance: ObjectInstance;
5
+ propertyId: string;
6
+ apiServices: ApiServices;
7
+ setSnackbarError: (error: {
8
+ showAlert: boolean;
9
+ message?: string;
10
+ isError?: boolean;
11
+ }) => void;
12
+ };
13
+ export declare const DocumentViewerCell: (props: DocumentViewerCellProps) => React.JSX.Element;
@@ -0,0 +1,115 @@
1
+ import React, { useState } from 'react';
2
+ import { AutorenewRounded, FileWithExtension, LaunchRounded } from '../../../../../icons';
3
+ import { Button, Menu, MenuItem, Typography } from '../../../../core';
4
+ import { Grid } from '../../../../layout';
5
+ import { getPrefixedUrl } from '../../utils';
6
+ export const DocumentViewerCell = (props) => {
7
+ const { instance, propertyId, apiServices, setSnackbarError } = props;
8
+ const [anchorEl, setAnchorEl] = useState(null);
9
+ const [isLoading, setIsLoading] = useState(false);
10
+ const downloadDocument = async (doc, instance) => {
11
+ setIsLoading(true);
12
+ try {
13
+ const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
14
+ const contentType = documentResponse.type;
15
+ const blob = new Blob([documentResponse], { type: contentType });
16
+ const url = URL.createObjectURL(blob);
17
+ // Let the browser handle whether to open the document to view in a new tab or download it.
18
+ window.open(url, '_blank');
19
+ setIsLoading(false);
20
+ URL.revokeObjectURL(url);
21
+ }
22
+ catch (error) {
23
+ const status = error.status;
24
+ let message = 'An error occurred while downloading the document.';
25
+ if (status === 403) {
26
+ message = 'You do not have permission to download this document.';
27
+ }
28
+ else if (status === 404) {
29
+ message = 'Document not found.';
30
+ }
31
+ setIsLoading(false);
32
+ setSnackbarError({
33
+ showAlert: true,
34
+ message,
35
+ isError: true,
36
+ });
37
+ }
38
+ };
39
+ return (React.createElement(React.Fragment, null, instance[propertyId]?.length ? (React.createElement(React.Fragment, null,
40
+ React.createElement(Button, { sx: {
41
+ display: 'flex',
42
+ alignItems: 'center',
43
+ justifyContent: 'flex-start',
44
+ padding: '6px 10px',
45
+ }, color: 'inherit', onClick: async (event) => {
46
+ event.stopPropagation();
47
+ const documents = instance[propertyId];
48
+ if (documents.length === 1) {
49
+ await downloadDocument(documents[0], instance);
50
+ }
51
+ else {
52
+ setAnchorEl(event.currentTarget);
53
+ }
54
+ }, variant: "text", "aria-haspopup": "menu", "aria-controls": `document-menu-${instance.id}-${propertyId}`, "aria-expanded": anchorEl ? 'true' : 'false' },
55
+ isLoading ? (React.createElement(AutorenewRounded, { sx: {
56
+ color: '#637381',
57
+ width: '20px',
58
+ height: '20px',
59
+ } })) : (React.createElement(LaunchRounded, { sx: {
60
+ color: '#637381',
61
+ width: '20px',
62
+ height: '20px',
63
+ } })),
64
+ React.createElement(Typography, { sx: {
65
+ marginLeft: '8px',
66
+ fontWeight: 400,
67
+ fontSize: '14px',
68
+ } }, isLoading ? 'Preparing document...' : 'View Document')),
69
+ React.createElement("section", { role: "region", "aria-label": "Document Menu" },
70
+ React.createElement(Menu, { id: `document-menu-${instance.id}-${propertyId}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
71
+ setAnchorEl(null);
72
+ }, sx: {
73
+ '& .MuiPaper-root': {
74
+ borderRadius: '12px',
75
+ boxShadow: 'rgba(145, 158, 171, 0.2)',
76
+ },
77
+ }, variant: 'menu', slotProps: {
78
+ paper: {
79
+ tabIndex: 0,
80
+ style: {
81
+ maxHeight: 200,
82
+ maxWidth: 300,
83
+ minWidth: 300,
84
+ },
85
+ },
86
+ } }, instance[propertyId].map((document) => (React.createElement(MenuItem, { key: document.id, onClick: async (e) => {
87
+ setAnchorEl(null);
88
+ await downloadDocument(document, instance);
89
+ }, "aria-label": document.name },
90
+ React.createElement(Grid, { item: true, sx: {
91
+ display: 'flex',
92
+ justifyContent: 'center',
93
+ padding: '7px',
94
+ } },
95
+ React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: document.name?.split('.')?.pop() ?? '', sx: {
96
+ height: '1rem',
97
+ width: '1rem',
98
+ } })),
99
+ React.createElement(Grid, { item: true, xs: 12, sx: {
100
+ width: '100%',
101
+ overflow: 'hidden',
102
+ textOverflow: 'ellipsis',
103
+ } },
104
+ React.createElement(Typography, { noWrap: true, sx: {
105
+ fontSize: '14px',
106
+ fontWeight: 700,
107
+ color: '#212B36',
108
+ lineHeight: '15px',
109
+ width: '100%',
110
+ } }, document.name))))))))) : (React.createElement(Typography, { sx: {
111
+ fontStyle: 'italic',
112
+ marginLeft: '12px',
113
+ fontSize: '14px',
114
+ } }, "No documents"))));
115
+ };
@@ -9,6 +9,7 @@ import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, Ta
9
9
  import { Box } from '../../../../layout';
10
10
  import { getPrefixedUrl, normalizeDateTime } from '../../utils';
11
11
  import { ActionDialog } from './ActionDialog';
12
+ import { DocumentViewerCell } from './DocumentViewerCell';
12
13
  const styles = {
13
14
  addButton: {
14
15
  backgroundColor: 'rgba(0, 117, 167, 0.08)',
@@ -250,13 +251,13 @@ const RepeatableField = (props) => {
250
251
  isSuccessful = true;
251
252
  }
252
253
  catch (err) {
254
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
255
+ error = err.response?.data?.error;
253
256
  setSnackbarError({
254
257
  showAlert: true,
255
- message: `An error occurred while creating an instance`,
258
+ message: error?.message ?? `An error occurred while creating an instance`,
256
259
  isError: true,
257
260
  });
258
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
259
- error = err.response?.data?.error;
260
261
  setSubmitting && setSubmitting(false);
261
262
  }
262
263
  }
@@ -284,13 +285,15 @@ const RepeatableField = (props) => {
284
285
  isSuccessful = true;
285
286
  }
286
287
  catch (err) {
288
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
289
+ error = err.response?.data?.error;
287
290
  setSnackbarError({
288
291
  showAlert: true,
289
- message: `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
292
+ message: error?.message ??
293
+ `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
290
294
  isError: true,
291
295
  });
292
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
293
- error = err.response?.data?.error;
296
+ setSubmitting && setSubmitting(false);
294
297
  }
295
298
  }
296
299
  return { isSuccessful, error };
@@ -334,9 +337,9 @@ const RepeatableField = (props) => {
334
337
  };
335
338
  const getValue = (relatedInstance, propertyId, propertyType) => {
336
339
  const value = get(relatedInstance, propertyId);
337
- // If the property is not date-like or document then just return the
340
+ // If the property is not date-like then just return the
338
341
  // value found at the given path.
339
- if (!['date', 'date-time', 'time', 'document'].includes(propertyType)) {
342
+ if (!['date', 'date-time', 'time'].includes(propertyType)) {
340
343
  return value;
341
344
  }
342
345
  // If the date-like value is empty then there is no need to format.
@@ -356,9 +359,6 @@ const RepeatableField = (props) => {
356
359
  if (propertyType === 'time') {
357
360
  return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
358
361
  }
359
- if (property.type === 'document') {
360
- return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
361
- }
362
362
  };
363
363
  const columns = retrieveViewLayout();
364
364
  return loading ? (React.createElement(React.Fragment, null,
@@ -376,23 +376,22 @@ const RepeatableField = (props) => {
376
376
  React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
377
377
  React.createElement(TableRow, null,
378
378
  columns?.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
379
- React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
379
+ canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
380
380
  React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
381
381
  columns?.map((prop) => {
382
- return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
383
- React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
384
- ? {
385
- '&:hover': {
386
- textDecoration: 'underline',
387
- cursor: 'pointer',
388
- },
389
- }
390
- : {}, onClick: canUpdateProperty && prop.id === 'name'
391
- ? () => editRow(relatedInstance.id)
392
- : undefined },
393
- getValue(relatedInstance, prop.id, prop.type),
394
- prop.type === 'user' &&
395
- users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
382
+ return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, apiServices: apiServices, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
383
+ ? {
384
+ '&:hover': {
385
+ textDecoration: 'underline',
386
+ cursor: 'pointer',
387
+ },
388
+ }
389
+ : {}, onClick: canUpdateProperty && prop.id === 'name'
390
+ ? () => editRow(relatedInstance.id)
391
+ : undefined },
392
+ getValue(relatedInstance, prop.id, prop.type),
393
+ prop.type === 'user' &&
394
+ users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
396
395
  }),
397
396
  canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
398
397
  React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
@@ -59,7 +59,7 @@ export class RepeatableFieldComponent extends ReactComponent {
59
59
  }
60
60
  }
61
61
  this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
62
- this.attachReact(this.element);
62
+ this.attach(this.element);
63
63
  });
64
64
  }
65
65
  }
@@ -127,7 +127,7 @@ export function convertFormToComponents(entries, parameters, object) {
127
127
  conditional: convertVisibilityToConditional(entry.visibility),
128
128
  };
129
129
  }
130
- else {
130
+ else if (entry.type === 'input') {
131
131
  const displayOptions = entry.display;
132
132
  const parameter = parameters.find((parameter) => parameter.id === entry.parameterId);
133
133
  if (!parameter) {
@@ -1,9 +1,22 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  export type MenuBarProps = {
3
- showNotifications: boolean;
3
+ /** The URL of the logo image to display. */
4
4
  logo: string;
5
+ /** Alternative text for the logo image. */
5
6
  logoAltText?: string;
7
+ /** Navigation items to display on the right side of the menu bar. */
6
8
  navItems?: ReactNode;
9
+ /** The name of the environment to display instead of the logo. */
7
10
  envName?: string;
11
+ /** Navigation item to display before the logo. */
12
+ navBeforeLogo?: ReactNode;
13
+ /** Indicates whether to show notifications. Currently not supported. */
14
+ showNotifications?: boolean;
8
15
  };
16
+ /**
17
+ * Renders a customizable menu bar with navigation items, logo, etc.
18
+ *
19
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
20
+ * @returns {JSX.Element} A menu bar component.
21
+ */
9
22
  export default function MenuBar(props: MenuBarProps): React.JSX.Element;
@@ -1,6 +1,12 @@
1
1
  import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
2
2
  import React from 'react';
3
3
  import UIThemeProvider, { useResponsive } from '../../../theme';
4
+ /**
5
+ * Renders a customizable menu bar with navigation items, logo, etc.
6
+ *
7
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
8
+ * @returns {JSX.Element} A menu bar component.
9
+ */
4
10
  export default function MenuBar(props) {
5
11
  const { isXs: isMobileView } = useResponsive();
6
12
  const classes = {
@@ -9,7 +15,7 @@ export default function MenuBar(props) {
9
15
  flexGrow: 1,
10
16
  },
11
17
  logo: {
12
- paddingRight: '16px',
18
+ padding: '0 16px',
13
19
  height: '70px',
14
20
  maxWidth: isMobileView ? '220px' : null,
15
21
  objectFit: 'contain',
@@ -18,7 +24,8 @@ export default function MenuBar(props) {
18
24
  };
19
25
  return (React.createElement(UIThemeProvider, null,
20
26
  React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
21
- React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },
27
+ React.createElement(Toolbar, { disableGutters: true, sx: { justifyContent: 'space-between', overflow: 'hidden', paddingRight: '14px' } },
28
+ props.navBeforeLogo && (React.createElement(Box, { sx: { height: '70px', borderRight: '1px solid #919EAB3D' } }, props.navBeforeLogo)),
22
29
  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 },
23
30
  React.createElement(Typography, { variant: "h5" },
24
31
  props?.envName,
@@ -11,3 +11,8 @@ it('render Menubar component without crashing', () => {
11
11
  render(React.createElement(Menubar, { showNotifications: true, navItems: navItems, logo: "" }));
12
12
  expect(screen.getAllByRole('link')).toHaveLength(3);
13
13
  });
14
+ it('renders navBeforeLogo correctly', () => {
15
+ const navBeforeLogo = React.createElement(Link, { href: "#" }, "Before");
16
+ render(React.createElement(Menubar, { showNotifications: true, navItems: null, navBeforeLogo: navBeforeLogo, logo: "" }));
17
+ expect(screen.getAllByRole('link')).toHaveLength(1);
18
+ });
@@ -1,8 +1,8 @@
1
- import { BoxProps } from '@mui/material';
1
+ import { BoxProps as MUIBoxProps } from '@mui/material';
2
2
  import React, { ElementType } from 'react';
3
- type CustomBoxProps = BoxProps & {
3
+ export type BoxProps = MUIBoxProps & {
4
4
  sx?: object;
5
5
  component?: ElementType;
6
6
  };
7
- declare const Box: (props: CustomBoxProps) => React.JSX.Element;
7
+ declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>;
8
8
  export default Box;
@@ -1,8 +1,8 @@
1
1
  import { Box as MUIBox } from '@mui/material';
2
- import React from 'react';
2
+ import React, { forwardRef } from 'react';
3
3
  import UIThemeProvider from '../../../theme';
4
- const Box = (props) => {
4
+ const Box = forwardRef((props, ref) => {
5
5
  return (React.createElement(UIThemeProvider, null,
6
- React.createElement(MUIBox, { ...props })));
7
- };
6
+ React.createElement(MUIBox, { ref: ref, ...props })));
7
+ });
8
8
  export default Box;
@@ -0,0 +1,3 @@
1
+ import { SvgIconProps } from '@mui/material';
2
+ import React from 'react';
3
+ export declare const NoNavigation: (props: SvgIconProps) => React.JSX.Element;
@@ -0,0 +1,10 @@
1
+ import { SvgIcon } from '@mui/material';
2
+ import React from 'react';
3
+ export const NoNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
4
+ verticalAlign: 'top',
5
+ maxWidth: props.width ?? '24',
6
+ maxHeight: props.height ?? '24',
7
+ ...(props.sx ?? {}),
8
+ } },
9
+ React.createElement("g", { id: "icon/no_navigation" },
10
+ React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }))));
@@ -0,0 +1,3 @@
1
+ import { SvgIconProps } from '@mui/material';
2
+ import React from 'react';
3
+ export declare const SideNavigation: (props: SvgIconProps) => React.JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { SvgIcon } from '@mui/material';
2
+ import React from 'react';
3
+ export const SideNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
4
+ verticalAlign: 'top',
5
+ maxWidth: props.width ?? '24',
6
+ maxHeight: props.height ?? '24',
7
+ ...(props.sx ?? {}),
8
+ } },
9
+ React.createElement("g", { id: "icon/side_navigation" },
10
+ React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }),
11
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H11V4H4ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H8.5C8.77614 7 9 6.77614 9 6.5C9 6.22386 8.77614 6 8.5 6H4.5ZM4 8.5C4 8.22386 4.22386 8 4.5 8H7.5C7.77614 8 8 8.22386 8 8.5C8 8.77614 7.77614 9 7.5 9H4.5C4.22386 9 4 8.77614 4 8.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H8.5C8.77614 11 9 10.7761 9 10.5C9 10.2239 8.77614 10 8.5 10H4.5ZM4 14.5C4 14.2239 4.22386 14 4.5 14H8.5C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15H4.5C4.22386 15 4 14.7761 4 14.5ZM4.5 12C4.22386 12 4 12.2239 4 12.5C4 12.7761 4.22386 13 4.5 13H7.5C7.77614 13 8 12.7761 8 12.5C8 12.2239 7.77614 12 7.5 12H4.5Z", fill: props?.htmlColor ?? '#212B36' }))));
@@ -0,0 +1,3 @@
1
+ import { SvgIconProps } from '@mui/material';
2
+ import React from 'react';
3
+ export declare const TopNavigation: (props: SvgIconProps) => React.JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { SvgIcon } from '@mui/material';
2
+ import React from 'react';
3
+ export const TopNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
4
+ verticalAlign: 'top',
5
+ maxWidth: props.width ?? '24',
6
+ maxHeight: props.height ?? '24',
7
+ ...(props.sx ?? {}),
8
+ } },
9
+ React.createElement("g", { id: "icon/top_navigation" },
10
+ React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', "stroke-width": "1.5", "stroke-linejoin": "round", fill: "transparent" }),
11
+ React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 5.66667C22 4.74619 21.2538 4 20.3333 4H3.66667C2.74619 4 2 4.74619 2 5.66667V9L22 9V5.66667ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H7.5C7.77614 7 8 6.77614 8 6.5C8 6.22386 7.77614 6 7.5 6H4.5ZM9 6.5C9 6.22386 9.22386 6 9.5 6H11.5C11.7761 6 12 6.22386 12 6.5C12 6.77614 11.7761 7 11.5 7H9.5C9.22386 7 9 6.77614 9 6.5ZM13.5 6C13.2239 6 13 6.22386 13 6.5C13 6.77614 13.2239 7 13.5 7H16.5C16.7761 7 17 6.77614 17 6.5C17 6.22386 16.7761 6 16.5 6H13.5Z", fill: props?.htmlColor ?? '#212B36' }))));
@@ -1,5 +1,8 @@
1
1
  export * from './FileWithExtension';
2
2
  export * from './Inherited';
3
+ export * from './NoNavigation';
3
4
  export * from './Overrides';
5
+ export * from './SideNavigation';
6
+ export * from './TopNavigation';
4
7
  export * from './TrashCan';
5
8
  export * from './UploadCloud';
@@ -1,5 +1,8 @@
1
1
  export * from './FileWithExtension';
2
2
  export * from './Inherited';
3
+ export * from './NoNavigation';
3
4
  export * from './Overrides';
5
+ export * from './SideNavigation';
6
+ export * from './TopNavigation';
4
7
  export * from './TrashCan';
5
8
  export * from './UploadCloud';
@@ -1,15 +1,6 @@
1
1
  import { ComponentMeta, ComponentStory } from '@storybook/react';
2
2
  import React from 'react';
3
- declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
4
- ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
5
- }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
6
- sx?: object | undefined;
7
- component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
8
- }) => React.JSX.Element>;
3
+ import { BoxProps } from '../components/layout/Box/Box';
4
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;
9
5
  export default _default;
10
- export declare const Box: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
11
- ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
12
- }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
13
- sx?: object | undefined;
14
- component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
15
- }) => React.JSX.Element>;
6
+ export declare const Box: ComponentStory<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;
@@ -1,25 +1,20 @@
1
- import { Link } from '@mui/material';
2
1
  import React from 'react';
3
2
  import { MenuBar as CustomMenuBar } from '../index';
4
3
  // eslint-disable-next-line @typescript-eslint/no-var-requires
5
4
  const logo = require('../assets/SA_logo.jpeg');
6
5
  export default {
7
- title: 'Data Display/MenuBar',
6
+ title: 'Custom/MenuBar',
8
7
  component: CustomMenuBar,
9
- argTypes: {
10
- navItems: {
11
- control: 'object',
12
- defaultValue: React.createElement(Link, null, "Object"),
13
- },
14
- showNotifications: {
15
- defaultValue: true,
16
- type: 'boolean',
17
- },
18
- logo: {
19
- defaultValue: logo,
20
- },
21
- envName: { defaultValue: 'System Automation' },
22
- },
23
8
  };
24
- const Template = (props) => React.createElement(CustomMenuBar, { ...props });
25
- export const MenuBar = Template.bind({});
9
+ const MenuBarTemplate = (args) => React.createElement(CustomMenuBar, { ...args });
10
+ export const MenuBar = MenuBarTemplate.bind({});
11
+ MenuBar.args = {
12
+ logo: logo,
13
+ logoAltText: 'System Automation',
14
+ navItems: (React.createElement(React.Fragment, null,
15
+ React.createElement("a", { href: "#" }, "Object1"),
16
+ React.createElement("a", { href: "#" }, "Object2"),
17
+ React.createElement("a", { href: "#" }, "Object3"))),
18
+ envName: 'System Automation',
19
+ showNotifications: true,
20
+ };
@@ -1,15 +1,5 @@
1
1
  import { ComponentMeta, ComponentStory } from '@storybook/react';
2
2
  import React from 'react';
3
- declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
4
- ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
5
- }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
6
- sx?: object | undefined;
7
- component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
8
- }) => React.JSX.Element>;
3
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<import("../components/layout/Box/Box").BoxProps, "ref"> & React.RefAttributes<unknown>>>;
9
4
  export default _default;
10
- export declare const Palette: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
11
- ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
12
- }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
13
- sx?: object | undefined;
14
- component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
15
- }) => React.JSX.Element>;
5
+ export declare const Palette: ComponentStory<React.ForwardRefExoticComponent<Omit<import("../components/layout/Box/Box").BoxProps, "ref"> & React.RefAttributes<unknown>>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.5.0-testing.0",
3
+ "version": "1.5.0-testing.10",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",
@@ -84,7 +84,7 @@
84
84
  "webpack": "^5.74.0"
85
85
  },
86
86
  "peerDependencies": {
87
- "@evoke-platform/context": "^1.1.0-testing.5",
87
+ "@evoke-platform/context": "^1.2.0-0",
88
88
  "react": "^18.1.0",
89
89
  "react-dom": "^18.1.0"
90
90
  },