@evoke-platform/ui-components 1.8.1-dev.0 → 1.8.1-dev.2

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

@@ -6,7 +6,7 @@ import ErrorComponent from '../ErrorComponent';
 import BuilderGridToolbar from './BuilderGridToolbar';
 import { EmptyContent } from './EmptyContent';
 const BuilderGrid = (props) => {
-    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, hideSearchbar, noRowsOverlay, filterComponent, error, ...rest } = props;
+    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, hideSearchbar, noRowsOverlay, filterComponent, error, onRowClick, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const toolbar = useMemo(() => () => (React.createElement(BuilderGridToolbar, { loading: loading, actions: actions, title: title, subtitle: subtitle, hideSearchbar: hideSearchbar, filter: filterComponent })), [loading, actions]);
     return (React.createElement(UIThemeProvider, null, loading || rows.length || hideEmptyContent ? (React.createElement(Box, { sx: {
@@ -42,7 +42,7 @@ const BuilderGrid = (props) => {
                 noRowsOverlay: () => {
                     return noRowsOverlay ? noRowsOverlay : null;
                 },
-            }, rowHeight: 60, columnHeaderHeight: 62, ...rest, sx: {
+            }, rowHeight: 60, columnHeaderHeight: 62, onRowClick: onRowClick, ...rest, sx: {
                 border: 'none',
                 '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
@@ -52,6 +52,9 @@ const BuilderGrid = (props) => {
                 '& .MuiDataGrid-row': {
                     borderBottom: '1px solid #eee',
                 },
+                '& .MuiDataGrid-row:hover': {
+                    cursor: onRowClick ? 'pointer' : 'default',
+                },
                 '& .MuiDataGrid-cell': {
                     border: 'none',
                     padding: '0 24px',

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.js

@@ -2,17 +2,11 @@ import { Typography } from '@mui/material';
 import { GridToolbarContainer, GridToolbarQuickFilter, } from '@mui/x-data-grid';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
-import { Grid } from '../../layout';
+import { Box, Grid } from '../../layout';
 import { ToolbarActions } from './ToolbarActions';
 function BuilderGridToolbar(props) {
     const { theme, actions, title, subtitle, filter, hideSearchbar } = props;
     const styles = {
-        container: {
-            display: 'flex',
-            margin: '0 0 15px 0',
-            justifyContent: 'space-between',
-            width: '100%',
-        },
         iconButton: {
             minWidth: '36px',
             height: '36px',
@@ -43,18 +37,20 @@ function BuilderGridToolbar(props) {
     };
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
-            React.createElement(Grid, { xs: 12, sx: styles.container },
-                React.createElement(Grid, { display: 'block' },
-                    title && (React.createElement(Typography, { sx: {
-                            fontSize: '18px',
-                            fontWeight: 700,
-                            marginBottom: '6px',
-                        } }, title)),
-                    React.createElement(Grid, { sx: { display: 'flex' } },
-                        !hideSearchbar && (React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
-                        filter && (React.createElement(Grid, { item: true, sx: { display: 'flex', marginLeft: '16px' } }, filter))),
-                    subtitle && (React.createElement(Typography, { sx: { fontSize: '14px', marginTop: !hideSearchbar ? '8px' : '0px' } }, subtitle))),
-                React.createElement(Grid, null,
-                    React.createElement(ToolbarActions, { actions: actions }))))));
+            React.createElement(Grid, { container: true },
+                React.createElement(Grid, { item: true, xs: 12, display: 'flex', alignItems: 'center', gap: 2 },
+                    React.createElement(Box, { display: 'flex', alignItems: 'center', gap: 2 },
+                        title && (React.createElement(Typography, { variant: "h5", sx: {
+                                fontSize: '18px',
+                                fontWeight: 700,
+                                marginBottom: '6px',
+                            }, title: title }, title)),
+                        !hideSearchbar && (React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter }))),
+                    React.createElement(ToolbarActions, { actions: actions })),
+                subtitle && (React.createElement(Grid, { item: true, xs: 12, my: 1 },
+                    React.createElement(Typography, { variant: "subtitle2", sx: {
+                            color: theme?.palette?.text?.secondary ?? '#637381',
+                        }, title: subtitle }, subtitle))),
+                filter && (React.createElement(Grid, { item: true, xs: 12 }, filter))))));
 }
 export default BuilderGridToolbar;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -19,6 +19,7 @@ export const ObjectPropertyInput = (props) => {
     const [layout, setLayout] = useState();
     const [layoutLoaded, setLayoutLoaded] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
+    const hasValue = instance?.[property.id]?.id || selectedInstance?.id;
     useEffect(() => {
         setLayoutLoaded(false);
         if (relatedObject) {
@@ -198,8 +199,7 @@ export const ObjectPropertyInput = (props) => {
                         } }, children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
-                        ...(!loadingOptions &&
-                            (instance?.[property.id]?.id || selectedInstance?.id)
+                        ...(!loadingOptions && hasValue
                             ? {
                                 visibility: 'visible',
                             }
@@ -213,7 +213,15 @@ export const ObjectPropertyInput = (props) => {
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
                             layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
-                }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
+                }, onOpen: (e) => {
+                    // Don't open the options if there is a value that links to another page
+                    if (!(navigationSlug &&
+                        navigateTo &&
+                        ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
+                        hasValue)) {
+                        setOpenOptions(true);
+                    }
+                }, onClose: () => setOpenOptions(false), value: hasValue
                     ? {
                         value: instance?.[property.id]?.id ??
                             selectedInstance?.id ??
@@ -241,7 +249,7 @@ export const ObjectPropertyInput = (props) => {
                         setDropdownInput(undefined);
                         return;
                     }
-                    if (instance?.[property.id]?.id || selectedInstance?.id) {
+                    if (hasValue) {
                         e.preventDefault();
                     }
                 }, loading: loadingOptions, onChange: (event, value) => {
@@ -263,24 +271,18 @@ export const ObjectPropertyInput = (props) => {
                     if (dropdownInput) {
                         getDropdownOptions();
                     }
-                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions &&
-                        !!(instance?.[property.id]?.id ||
-                            selectedInstance?.id), onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
+                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions && !!hasValue, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
                         if (navigationSlug &&
+                            navigateTo &&
                             ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
-                            (instance?.[property.id]?.id ||
-                                selectedInstance?.id)) {
-                            if (navigateTo) {
-                                setOpenOptions(false);
-                                navigateTo(navigationSlug.replace(':instanceId', instance?.[property.id]?.id ??
-                                    selectedInstance?.id ??
-                                    ''));
-                            }
+                            hasValue) {
+                            setOpenOptions(false);
+                            navigateTo(navigationSlug.replace(':instanceId', instance?.[property.id]?.id ??
+                                selectedInstance?.id ??
+                                ''));
                         }
                     }, sx: {
-                        ...(!loadingOptions &&
-                            (instance?.[property.id]?.id ||
-                                selectedInstance?.id)
+                        ...(!loadingOptions && hasValue
                             ? {
                                 '.MuiOutlinedInput-root': {
                                     background: 'white',

package/dist/published/stories/BuilderGrid.stories.d.ts

@@ -0,0 +1,7 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { BuilderGridProps } from '../components/custom/BuilderGrid/BuilderGrid';
+declare const _default: ComponentMeta<(<T extends import("@mui/x-data-grid").GridValidRowModel>(props: BuilderGridProps<T>) => React.JSX.Element)>;
+export default _default;
+export declare const Empty: ComponentStory<(<T extends import("@mui/x-data-grid").GridValidRowModel>(props: BuilderGridProps<T>) => React.JSX.Element)>;
+export declare const Rows: ComponentStory<(<T extends import("@mui/x-data-grid").GridValidRowModel>(props: BuilderGridProps<T>) => React.JSX.Element)>;

package/dist/published/stories/BuilderGrid.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BuilderGrid } from '../components/custom';
+export default {
+    title: 'Custom/BuilderGrid',
+    component: BuilderGrid,
+};
+const BuilderGridTemplate = (args) => {
+    return React.createElement(BuilderGrid, { ...args });
+};
+const columns = [
+    { field: 'id', headerName: 'ID', type: 'string' },
+    { field: 'name', headerName: 'Name', type: 'string' },
+];
+export const Empty = BuilderGridTemplate.bind({});
+Empty.args = {
+    title: 'Tests',
+    columns,
+    rows: [],
+    item: 'test',
+    loading: false,
+};
+export const Rows = BuilderGridTemplate.bind({});
+Rows.args = {
+    title: 'Tests',
+    subtitle: 'This is a long subtitle to test truncation in the toolbar component',
+    columns,
+    rows: [
+        { id: '1', name: 'Test' },
+        { id: '2', name: 'Test 2' },
+    ],
+    item: 'test',
+    loading: false,
+    actions: [
+        {
+            label: 'Add Test',
+            onClick: () => console.log('Add Test clicked'),
+        },
+    ],
+};

package/package.json

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