@evoke-platform/ui-components 1.0.0-dev.213 → 1.0.0-dev.215

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

@@ -6,6 +6,10 @@ export declare type BulkAction = {
     onClick: () => void;
     selectionCount?: number;
 };
+declare type LoadingOptions = {
+    color: string;
+    messages?: string[];
+};
 export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     onRefresh?: () => void;
     theme?: Theme;
@@ -14,7 +18,10 @@ export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProp
     filterSettings?: {
         mode: 'client' | 'server';
         maxRows?: number;
+        filterColumns?: boolean;
     };
     hideSearchbar?: boolean;
+    loadingOptions?: LoadingOptions;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;
+export {};

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

@@ -10,27 +10,43 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { DataGrid as MuiDataGrid, getGridStringOperators, getGridDateOperators, getGridSingleSelectOperators, getGridBooleanOperators, GridPagination, getGridNumericOperators, } from '@mui/x-data-grid';
-import React, { useState } from 'react';
+import { lighten } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
 import { Box, Typography } from '@mui/material';
+import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
+import LinearProgress from '../../core/LinearProgress';
 export default function (props) {
     var _a;
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows", "hideSearchbar"]);
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction", "filterSettings", "columns", "rows", "hideSearchbar", "loadingOptions"]);
     const [anchorEl, setAnchorEl] = useState();
+    const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
-        return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server'
+        return (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server' || !!(filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.filterColumns)
             ? columns.map((column) => (Object.assign(Object.assign({}, column), { filterOperators: column.type === 'string'
-                    ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAny'].includes(o.value))
+                    ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
                     : column.type === 'date' || column.type === 'dateTime'
-                        ? getGridDateOperators(column.type === 'dateTime').filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                        ? getGridDateOperators(column.type === 'dateTime')
+                            .filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
+                            .concat(dateTimeBetweenOperator)
                         : column.type === 'number'
-                            ? getGridNumericOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value))
+                            ? getGridNumericOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
                             : column.type === 'singleSelect'
                                 ? getGridSingleSelectOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
-                                : getGridBooleanOperators().filter((o) => !['isEmpty', 'isNotEmpty'].includes(o.value)) })))
+                                : getGridBooleanOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value)) })))
             : columns;
     };
+    useEffect(() => {
+        var _a;
+        if (!loading || !((_a = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.messages) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const intervalId = setInterval(() => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            setLoadingMessageIndex((prevIndex) => (prevIndex + 1) % loadingOptions.messages.length);
+        }, 1500);
+        return () => clearInterval(intervalId);
+    }, [loading, loadingMessageIndex, loadingOptions]);
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, filterMode: (_a = filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) !== null && _a !== void 0 ? _a : 'client', rows: rows }, rest, { columns: addColumnFilterOperators(columns), sx: Object.assign({ borderRadius: '8px', border: 'none', '& .MuiDataGrid-columnHeaders': {
                     backgroundColor: '#F4F6F8',
@@ -39,7 +55,7 @@ export default function (props) {
                 }, '& .MuiDataGrid-virtualScrollerContent': {
                     borderRight: '1px solid #eee',
                     borderLeft: '1px solid #eee',
-                }, '& .MuiDataGrid-toolbarContainer': {
+                }, '& .MuiDataGrid-virtualScroller': Object.assign({}, (loading ? { overflow: 'hidden' } : {})), '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
                     fontColor: '#212B36',
                 }, '& .MuiDataGrid-row': {
@@ -81,6 +97,10 @@ export default function (props) {
                             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
                             padding: '8px',
                             stop: -120,
+                            '& .MuiDataGrid-filterFormValueInput': {
+                                minWidth: '190px',
+                                width: 'auto',
+                            },
                         },
                     },
                 },
@@ -92,5 +112,28 @@ export default function (props) {
                                             search.`))),
                         React.createElement(GridPagination, null)));
                 },
+                LoadingOverlay: () => {
+                    var _a, _b;
+                    return (React.createElement(Box, { sx: {
+                            minHeight: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            backgroundColor: '#fff',
+                            overflow: 'hidden',
+                        } },
+                        React.createElement(Box, { width: '225px' },
+                            React.createElement(Typography, { sx: { marginBottom: '8px', color: '#aaa', width: '100%', textAlign: 'center' } }, (loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.messages)
+                                ? loadingOptions.messages[loadingMessageIndex]
+                                : 'Loading'),
+                            React.createElement(LinearProgress, { sx: {
+                                    backgroundColor: (_a = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.color) !== null && _a !== void 0 ? _a : '#0075A7',
+                                    '& .MuiLinearProgress-bar': {
+                                        backgroundColor: lighten((_b = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.color) !== null && _b !== void 0 ? _b : '#0075A7', 0.5),
+                                    },
+                                    borderRadius: '6px',
+                                    width: '100%',
+                                } }))));
+                },
             } }))));
 }

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

@@ -0,0 +1,2 @@
+import { GridFilterOperator } from '@mui/x-data-grid';
+export declare const dateTimeBetweenOperator: GridFilterOperator[];

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

@@ -0,0 +1,65 @@
+import { Box, debounce, TextField } from '@mui/material';
+import { useGridRootProps } from '@mui/x-data-grid';
+import React, { useEffect, useState } from 'react';
+import { isNil } from 'lodash';
+function DateTimeRangeFilter(props) {
+    var _a;
+    const rootProps = useGridRootProps();
+    const { item, applyValue, focusElementRef = null } = props;
+    const [filterValueState, setFilterValueState] = useState((_a = item.value) !== null && _a !== void 0 ? _a : '');
+    useEffect(() => {
+        var _a;
+        const itemValue = (_a = item.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
+        setFilterValueState(itemValue);
+    }, [item.value]);
+    const updateFilterValue = (from, to) => {
+        setFilterValueState([from, to]);
+        debounce(() => {
+            applyValue(Object.assign(Object.assign({}, item), { value: [from, to] }));
+        }, rootProps.filterDebounceMs)();
+    };
+    const handleChange = (event) => {
+        const updatedValue = event.target.value;
+        if (event.target.name === 'from') {
+            updateFilterValue(updatedValue, filterValueState[1]);
+        }
+        else if (event.target.name === 'to') {
+            updateFilterValue(filterValueState[0], updatedValue);
+        }
+    };
+    return (React.createElement(Box, { sx: {
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'end',
+            height: 48,
+            pl: '20px',
+        } },
+        React.createElement(TextField, { name: "from", label: "From", variant: "standard", value: filterValueState[0], onChange: handleChange, type: "datetime-local", inputRef: focusElementRef, InputLabelProps: { shrink: true }, sx: { mr: 2, width: '175px' } }),
+        React.createElement(TextField, { name: "to", label: "To", variant: "standard", value: filterValueState[1], onChange: handleChange, InputLabelProps: { shrink: true }, type: "datetime-local", sx: { width: '175px' } })));
+}
+export const dateTimeBetweenOperator = [
+    {
+        label: 'between',
+        value: 'between',
+        getApplyFilterFn: () => null,
+        getApplyFilterFnV7: (filterItem) => {
+            const to = filterItem.value[0];
+            const from = filterItem.value[1];
+            return (value) => {
+                if (isNil(value))
+                    return false;
+                if (to && from) {
+                    return to <= value && value <= from;
+                }
+                else if (to) {
+                    return value <= to;
+                }
+                else if (from) {
+                    return value >= from;
+                }
+                return false;
+            };
+        },
+        InputComponent: DateTimeRangeFilter,
+    },
+];

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

@@ -52,7 +52,13 @@ function Toolbar(props) {
                 !bulkAction ? (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' }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
+                            React.createElement(GridToolbarExport, { sx: {
+                                    color: '#212B36',
+                                    height: '95%',
+                                    '&:hover': { backgroundColor: '#f2f3f5' },
+                                    paddingLeft: '10px',
+                                    paddingRight: '10px',
+                                }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
                         React.createElement(Grid, { item: true },
                             React.createElement(GridToolbarFilterButton, { componentsProps: {
                                     button: {

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.js

@@ -52,7 +52,7 @@ test('returns selected date', () => __awaiter(void 0, void 0, void 0, function*
     const feb29 = yield within(calendar).findByRole('gridcell', { name: '29' });
     yield user.click(feb29);
     expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
-}));
+}), 10000);
 test('returns manually entered date', () => __awaiter(void 0, void 0, void 0, function* () {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.js

@@ -56,7 +56,7 @@ test('returns selected date time', () => __awaiter(void 0, void 0, void 0, funct
     // https://stackoverflow.com/questions/74812963/how-do-i-pick-the-time-in-an-mui-datetimepicker-using-testing-library-react-and.
     // All it can do is check the date picker part works.
     expect(onChangeMock).toBeCalledWith('testDateTime', LocalDateTime.of(2024, Month.FEBRUARY, 29, 0, 0, 0), dateTimeProperty);
-}));
+}), 10000);
 test('returns manually entered date time', () => __awaiter(void 0, void 0, void 0, function* () {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });

package/dist/published/index.d.ts

@@ -5,4 +5,7 @@ export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, FormField, Menu
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';
 export * as EVOKE_TYPES from './types';
-export type { FormControlProps, FormHelperTextProps, GridSize } from '@mui/material';
+export type { ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, Theme, } from '@mui/material';
+export type { TouchRippleProps, TouchRippleActions } from '@mui/material/ButtonBase/TouchRipple';
+export type { CommonProps } from '@mui/material/OverridableComponent';
+export type { SxProps } from '@mui/system';

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material/styles/createTheme").Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
     ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("@mui/material/styles/createTheme").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {
@@ -12,11 +12,11 @@ declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;
 export default _default;
-export declare const Palette: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const Palette: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material/styles/createTheme").Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
     ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("@mui/material/styles/createTheme").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {

package/package.json

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