@evoke-platform/ui-components 1.0.0-dev.109 → 1.0.0-dev.111

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

@@ -5,6 +5,7 @@ import 'react-querybuilder/dist/query-builder.css';
 import { RemoveCircleOutline } from '../../../icons';
 import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
 import { Box } from '../../layout';
+import { NumericFormat } from '../FormField/InputFieldComponent';
 const ALL_OPERATORS = [
     { name: '=', label: '=' },
     { name: '!=', label: '!=' },
@@ -132,7 +133,9 @@ const dynamicContentInputEditor = (props) => {
     const DynamicContentInput = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput.component;
     let valueEditor;
     if (DynamicContentInput) {
-        valueEditor = (React.createElement(DynamicContentInput, { values: ['null', 'notNull'].includes(operator) ? '' : value, setValues: handleOnChange, disabled: ['null', 'notNull'].includes(operator), size: 'small', previousSteps: (_c = (_b = props.context) === null || _b === void 0 ? void 0 : _b.dynamicContentInput.previousSteps) !== null && _c !== void 0 ? _c : [], isSingleValue: true, width: '33%', useStringInterpolation: true }));
+        valueEditor = (React.createElement(DynamicContentInput, { values: ['null', 'notNull'].includes(operator) ? '' : value, setValues: (e) => {
+                handleOnChange(e !== null && e !== void 0 ? e : '');
+            }, disabled: ['null', 'notNull'].includes(operator), size: 'small', previousSteps: (_c = (_b = props.context) === null || _b === void 0 ? void 0 : _b.dynamicContentInput.previousSteps) !== null && _c !== void 0 ? _c : [], isSingleValue: true, width: '33%', useStringInterpolation: true }));
     }
     return determineValueEditor(valueEditor, props);
 };
@@ -147,6 +150,17 @@ const determineValueEditor = (baseValueEditor, props) => {
                         handleOnChange(value);
                     }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", style: { width: '33%' } }))) })));
             break;
+        case 'integer':
+            valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+                    handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
+                }, type: "number", placeholder: "Value", size: "small", sx: { width: '33%' } }));
+            break;
+        case 'number':
+            valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+                    var _a;
+                    handleOnChange((_a = e.target.value) !== null && _a !== void 0 ? _a : '');
+                }, InputProps: { inputComponent: NumericFormat }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
+            break;
         case 'array':
             valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
                     const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
@@ -245,7 +259,7 @@ const CriteriaBuilder = (props) => {
             React.createElement(QueryBuilderMaterial, null,
                 React.createElement(QueryBuilder, { query: !criteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
-                    }, showCombinatorsBetweenRules: true, listsAsArrays: true, controlElements: {
+                    }, showCombinatorsBetweenRules: true, listsAsArrays: true, addRuleToNewGroups: true, controlElements: {
                         combinatorSelector: customCombinator,
                         fieldSelector: customSelector,
                         operatorSelector: customSelector,

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/FormField/InputFieldComponent/InputFieldComponent.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { FunctionComponent } from 'react';
 import { FormFieldProps } from '../FormField';
+export declare const NumericFormat: FunctionComponent<any>;
 declare const InputFieldComponent: (props: FormFieldProps) => JSX.Element;
 export default InputFieldComponent;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -14,7 +14,7 @@ import NumberFormat from 'react-number-format';
 import { Autocomplete, TextField } from '../../../core';
 import InputMask from 'react-input-mask';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NumericFormat = (props) => {
+export const NumericFormat = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { inputRef, onChange, defaultValue } = props, other = __rest(props, ["inputRef", "onChange", "defaultValue"]);
     return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: inputRef, onValueChange: (values) => {

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.109",
+    "version": "1.0.0-dev.111",
     "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"
     }
-}
+}