@evoke-platform/ui-components 1.0.0-dev.110 → 1.0.0-dev.112

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

@@ -0,0 +1 @@
+export * from '@mui/material/colors';

package/dist/published/colors/index.js

@@ -0,0 +1 @@
+export * from '@mui/material/colors';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DataGridProps as MuiDataGridProps, GridValidRowModel } from '@mui/x-data-grid';
+export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
+    onRefresh?: () => void;
+};
+export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;

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

@@ -0,0 +1,69 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
+import React, { useMemo, useState } from 'react';
+import Toolbar from './Toolbar';
+import UIThemeProvider from '../../../theme';
+export default function (props) {
+    const { onRefresh, loading } = props, rest = __rest(props, ["onRefresh", "loading"]);
+    const [anchorEl, setAnchorEl] = useState();
+    const toolbar = useMemo(() => () => React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading }), [onRefresh, loading]);
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MuiDataGrid, Object.assign({ loading: loading }, rest, { sx: {
+                borderRadius: '8px',
+                border: 'none',
+                '& .MuiDataGrid-columnHeaders': {
+                    backgroundColor: '#F4F6F8',
+                    color: '#637381',
+                    borderRadius: '8px 8px 0 0'
+                },
+                '& .MuiDataGrid-virtualScrollerContent': {
+                    borderRight: '1px solid #eee',
+                    borderLeft: '1px solid #eee',
+                },
+                '& .MuiDataGrid-toolbarContainer': {
+                    padding: '7px 0',
+                    fontColor: '#212B36'
+                },
+                '& .MuiDataGrid-row': {
+                    borderBottom: '1px solid #eee',
+                },
+                '& .MuiDataGrid-cell': {
+                    border: 'none'
+                },
+                '& .MuiDataGrid-footerContainer': {
+                    border: '1px solid #eee',
+                    borderRadius: '0 0 8px 8px'
+                },
+                height: 'calc(100vh - 240px)'
+            }, localeText: {
+                toolbarColumns: '',
+                toolbarDensity: '',
+                toolbarFilters: '',
+                toolbarExport: 'Download'
+            }, componentsProps: {
+                panel: {
+                    anchorEl: anchorEl,
+                    placement: 'bottom-end',
+                    sx: {
+                        '& .MuiPaper-root': {
+                            borderRadius: '8px',
+                            boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
+                            padding: '8px',
+                            stop: -120
+                        }
+                    }
+                }
+            }, components: {
+                Toolbar: toolbar,
+            } }))));
+}

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
+export declare type GridToolbarProps = MuiGridToolbarProps & {
+    onRefresh?: () => void;
+    setAnchorEl?: (anchorEl: HTMLAnchorElement | null) => void;
+    loading?: boolean;
+};
+declare function Toolbar(props: GridToolbarProps): JSX.Element;
+export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -0,0 +1,57 @@
+import { FileDownloadRounded, FilterAlt, Refresh, TableChartRounded, TableRowsRounded, } from '../../../icons';
+import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, } from '@mui/x-data-grid';
+import React from 'react';
+import { Grid } from '../../layout';
+import { IconButton } from '../../core';
+import UIThemeProvider from '../../../theme';
+const styles = {
+    container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
+    iconButton: {
+        minWidth: '36px',
+        height: '36px',
+        backgroundColor: 'rgba(145, 158, 171, 0.12)',
+    },
+    icon: {
+        marginLeft: '8px',
+    },
+    quickFilter: {
+        '& fieldset': {
+            borderRadius: '8px',
+            color: '#919EAB',
+            borderColor: 'rgba(145, 158, 171, 0.32)',
+        },
+    },
+};
+function Toolbar(props) {
+    const { onRefresh, setAnchorEl, loading } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const setAnchor = (event) => {
+        if (setAnchorEl) {
+            setAnchorEl(event.target);
+        }
+    };
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
+            React.createElement(Grid, { container: true, sx: styles.container },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
+                React.createElement(Grid, { item: true },
+                    React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
+                        React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
+                            React.createElement(GridToolbarExport, { sx: { color: '#212B36' }, startIcon: React.createElement(FileDownloadRounded, null) })),
+                        React.createElement(Grid, { item: true },
+                            React.createElement(GridToolbarFilterButton, { componentsProps: {
+                                    button: {
+                                        startIcon: React.createElement(FilterAlt, { sx: styles.icon }),
+                                        sx: styles.iconButton,
+                                    },
+                                }, onClickCapture: setAnchor })),
+                        React.createElement(Grid, { item: true },
+                            React.createElement(GridToolbarColumnsButton, { startIcon: React.createElement(TableChartRounded, { sx: styles.icon }), sx: styles.iconButton, onClickCapture: setAnchor })),
+                        React.createElement(Grid, { item: true },
+                            React.createElement(GridToolbarDensitySelector, { startIcon: React.createElement(TableRowsRounded, { sx: { marginLeft: '8px' } }), sx: styles.iconButton, onClickCapture: setAnchor })),
+                        onRefresh && (React.createElement(Grid, { item: true },
+                            React.createElement(IconButton, { onClick: onRefresh, disabled: loading, sx: { borderRadius: '4px' } },
+                                React.createElement(Refresh, null))))))))));
+}
+export default Toolbar;

package/dist/published/components/custom/DataGrid/index.d.ts

@@ -0,0 +1,3 @@
+import DataGrid from './DataGrid';
+export { DataGrid };
+export default DataGrid;

package/dist/published/components/custom/DataGrid/index.js

@@ -0,0 +1,3 @@
+import DataGrid from './DataGrid';
+export { DataGrid };
+export default DataGrid;

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

@@ -1,4 +1,5 @@
 export { CriteriaBuilder } from './CriteriaBuilder';
+export { DataGrid } from './DataGrid';
 export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

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

@@ -1,4 +1,5 @@
 export { CriteriaBuilder } from './CriteriaBuilder';
+export { DataGrid } from './DataGrid';
 export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/index.d.ts

@@ -1,6 +1,6 @@
 export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
-export { CriteriaBuilder, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';
+export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';

package/dist/published/index.js

@@ -1,6 +1,6 @@
 export { ClickAwayListener, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
-export { CriteriaBuilder, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';
+export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.110",
+    "version": "1.0.0-dev.112",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -67,14 +67,15 @@
         "@mui/icons-material": "^5.8.4",
         "@mui/lab": "^5.0.0-alpha.105",
         "@mui/material": "^5.10.11",
+        "@mui/x-data-grid": "^6.2.1",
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^5.4.1",
         "lodash-es": "^4.17.21",
         "react-dropzone": "^14.2.2",
         "react-input-mask": "^3.0.0-alpha.2",
-        "react-number-format": "^4.9.3",
-        "react-querybuilder": "^6.0.2"
+        "react-querybuilder": "^6.0.2",
+        "react-number-format": "^4.9.3"
     },
     "lint-staged": {
         "*": "prettier --write"
@@ -83,4 +84,4 @@
         "verbose": true,
         "testEnvironment": "jsdom"
     }
-}
+}