@evoke-platform/ui-components 1.0.0-dev.184 → 1.0.0-dev.187

package/README.md

@@ -1,4 +1,5 @@
 # Evoke's Component Library
 
 ## Installation:
+
     npm i @evoke-platform/ui-components

package/dist/published/components/core/Autocomplete/Autocomplete.d.ts

@@ -2,10 +2,10 @@
 import { AutocompleteProps as MUIAutocompleteProps } from '@mui/material';
 export declare type AutocompleteOption = {
     label: string;
-    value: any;
-    [key: string]: any;
+    value: unknown;
+    [key: string]: unknown;
 };
-declare type AutocompleteProps = MUIAutocompleteProps<AutocompleteOption | any, any, any, any> & {
+export declare type AutocompleteProps = MUIAutocompleteProps<AutocompleteOption | any, any, any, any> & {
     options: AutocompleteOption[] | string[] | number[];
     sortBy?: 'ASC' | 'DESC' | 'NONE';
     label?: string;

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const Autocomplete = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const sortedOptions = props.sortBy !== 'NONE'
         ? props.options.map((option) => {
             var _a, _b;
@@ -28,15 +28,15 @@ const Autocomplete = (props) => {
     }
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_b = (_a = props.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_c = props.label) !== null && _c !== void 0 ? _c : '',
+            React.createElement(InputLabel, { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_b = props.label) !== null && _b !== void 0 ? _b : '',
                 ' ',
-                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
+                props.required ? React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' } }, "*") : null),
             props.instructionText && (React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText)),
             React.createElement(MUIAutocomplete, Object.assign({}, props, { sx: Object.assign({ '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined }, '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',
                     }, '& .MuiInputBase-input.Mui-disabled': {
                         WebkitTextFillColor: props.readOnly ? 'black' : 'auto',
-                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', marginTop: '3px', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_d = props.popupIcon) !== null && _d !== void 0 ? _d : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
+                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', marginTop: '3px', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_c = props.popupIcon) !== null && _c !== void 0 ? _c : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
     else {
@@ -45,7 +45,7 @@ const Autocomplete = (props) => {
                         border: props.readOnly ? 'none' : 'auto',
                     }, '& .MuiInputBase-input.Mui-disabled': {
                         WebkitTextFillColor: props.readOnly ? 'black' : 'auto',
-                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_e = props.popupIcon) !== null && _e !== void 0 ? _e : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
+                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_d = props.popupIcon) !== null && _d !== void 0 ? _d : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
 };

package/dist/published/components/core/Autocomplete/Autocomplete.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Autocomplete from './Autocomplete';
+import TextField from '../TextField';
+const renderInput = (params) => React.createElement(TextField, Object.assign({}, params));
+const options = [];
+test('renders with label outside outline', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
+    screen.getByRole('combobox', { name: 'Title' });
+});

package/dist/published/components/core/Autocomplete/index.d.ts

@@ -1,3 +1,4 @@
 import Autocomplete, { AutocompleteOption } from './Autocomplete';
 export default Autocomplete;
-export { Autocomplete, AutocompleteOption };
+export { Autocomplete };
+export type { AutocompleteOption };

package/dist/published/components/core/LocalizationProvider/LocalizationProvider.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { LocalizationProvider as MUILocalizationProvider, } from '@mui/x-date-pickers';
 import AdapterJoda from '@date-io/js-joda';
-import { ChronoUnit, LocalDate, LocalDateTime, DateTimeFormatter, ChronoField } from '@js-joda/core';
+import { ChronoUnit, LocalDate, LocalDateTime, DateTimeFormatter, ChronoField, } from '@js-joda/core';
 import { InvalidDate } from '../../../util/date';
 import { Locale as ImportedLocale } from '@js-joda/locale_en-us';
 const LocalizationProvider = (props) => {
@@ -61,12 +61,14 @@ class DateAdapter extends AdapterJoda {
             return adjustFactor * diff;
         };
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     date(value) {
         if (value instanceof InvalidDate) {
             return value;
         }
         return super.date(value);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     isValid(value) {
         if (value instanceof InvalidDate) {
             return false;
@@ -74,12 +76,12 @@ class DateAdapter extends AdapterJoda {
         return super.isValid(value);
     }
     parse(value, format) {
-        if (value === "") {
+        if (value === '') {
             return null;
         }
-        let formatter = DateTimeFormatter.ofPattern(format).withLocale(this.locale);
+        const formatter = DateTimeFormatter.ofPattern(format).withLocale(this.locale);
         try {
-            let parsed_assessor = formatter.parse(value);
+            const parsed_assessor = formatter.parse(value);
             if (parsed_assessor.isSupported(ChronoField.YEAR) &&
                 parsed_assessor.isSupported(ChronoField.MONTH_OF_YEAR) &&
                 parsed_assessor.isSupported(ChronoField.DAY_OF_MONTH)) {

package/dist/published/components/core/Select/Select.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { SelectProps as MUISelectProps } from '@mui/material';
-declare type SelectProps = MUISelectProps<any>;
+import { SelectProps } from '@mui/material';
 declare const Select: (props: SelectProps) => JSX.Element;
 export default Select;

package/dist/published/components/core/Snackbar/Snackbar.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SnackbarProps } from '@mui/material';
 export declare type SnackbarAlertProps = SnackbarProps & {
-    handleClose: Function;
+    handleClose: (event?: React.SyntheticEvent | Event, reason?: string) => void;
     error?: boolean;
 };
 export declare const Snackbar: (props: SnackbarAlertProps) => JSX.Element;

package/dist/published/components/core/TextField/TextField.js

@@ -4,8 +4,7 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const TextField = (props) => {
-    var _a;
-    const { variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
+    const { id, variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
     const readOnlyStyles = {
         '.MuiOutlinedInput-root': {
             paddingRight: '5px',
@@ -20,14 +19,14 @@ const TextField = (props) => {
         '& fieldset': { borderColor: 'transparent', borderRadius: '8px' },
     };
     return (React.createElement(UIThemeProvider, null, variant === 'outlined' && !!label && labelPlacement === 'outside-top' ? (React.createElement(React.Fragment, null,
-        React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_a = label === null || label === void 0 ? void 0 : label.toString()) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
+        React.createElement(InputLabel, { htmlFor: id !== null && id !== void 0 ? id : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
             ' ',
             props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
         instructionText && React.createElement(Typography, { variant: 'caption' }, instructionText),
-        React.createElement(MUITextField, Object.assign({}, props, { label: null, inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly }, sx: readOnly
+        React.createElement(MUITextField, Object.assign({}, props, { label: null, inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-outside' }, sx: readOnly
                 ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, Object.assign({ "data-testid": "label-inside", inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly } }, props, { sx: readOnly
+        React.createElement(MUITextField, Object.assign({ inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' } }, props, { sx: readOnly
                 ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));
 };

package/dist/published/components/core/TextField/TextField.test.js

@@ -3,18 +3,18 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import TextField from './index';
 test('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
-    render(React.createElement(TextField, { labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
-    const label = screen.getByTestId('label-outside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
+    const textField = screen.getByRole('textbox', { name: 'Title' });
+    expect(textField).toHaveAttribute('data-testid', 'label-outside');
 });
 test('render TextField and check for data-testid === label-inside when labelPlacement === outside-top && variant !== outlined using data-testid', () => {
-    render(React.createElement(TextField, { labelPlacement: "outside-top", label: "Title2" }));
-    const label = screen.getByTestId('label-inside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", label: "Title2" }));
+    const textField = screen.getByRole('textbox', { name: 'Title2' });
+    expect(textField).toHaveAttribute('data-testid', 'label-inside');
 });
 test('render TextField and check for data-testid === label-inside when labelPlacement === undefined', () => {
-    render(React.createElement(TextField, { label: "Title3" }));
-    const label = screen.getByTestId('label-inside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", label: "Title3" }));
+    const textField = screen.getByRole('textbox', { name: 'Title3' });
+    expect(textField).toHaveAttribute('data-testid', 'label-inside');
 });
 // TODO Add a test case to check if the label is not present outside the TextField when the labelPlacement is undefined or not equal to outside-top

package/dist/published/components/core/Typography/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Typography as MUITypography } from '@mui/material';
 import UIThemeProvider from '../../../theme';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Typography = (props) => {
     return (React.createElement(UIThemeProvider, null,
         React.createElement(MUITypography, Object.assign({}, props))));

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

@@ -1,7 +1,7 @@
 export { Accordion, AccordionDetails, AccordionActions, AccordionSummary } from './Accordion';
 export { AppBar } from './AppBar';
 export { Alert } from './Alert';
-export { Autocomplete, AutocompleteOption } from './Autocomplete';
+export { Autocomplete } from './Autocomplete';
 export { Avatar } from './Avatar';
 export { Backdrop } from './Backdrop';
 export { Badge } from './Badge';
@@ -42,5 +42,7 @@ export { Select } from './Select';
 export { Step, StepLabel, Stepper, StepContent, StepButton, StepIcon, StepConnector } from './Stepper';
 export { Popover } from './Popover';
 export { Popper } from './Popper';
-export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, GridSize, } from '@mui/material';
+export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
+export type { GridSize } from '@mui/material';
+export type { AutocompleteOption } from './Autocomplete/Autocomplete';

package/dist/published/components/custom/BuilderGrid/EmptyContent.d.ts

@@ -4,7 +4,7 @@ export declare type EmptyContentSelectOptions = {
     instructionText: string;
     options: AutocompleteOption[];
     placeholder: string;
-    onChange: (value?: string) => void;
+    onChange: (value?: unknown) => void;
     selectedOption?: string;
 };
 declare type EmptyStateComponentProps = {

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { Autocomplete, Button, TextField, Typography } from '../../core';
 import { Box } from '../../layout';
 import { EmptyContentIllustration } from './EmptyContentIllustration';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const plural = require('pluralize');
 const styles = {
     heading: {

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

@@ -4,9 +4,9 @@ import { Operator, ObjectProperty, PresetValue } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export declare type CriteriaInputProps = {
     properties: ObjectProperty[];
-    setCriteria: Function;
-    criteria?: Record<string, any>;
-    originalCriteria?: Record<string, any>;
+    setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
+    criteria?: Record<string, unknown>;
+    originalCriteria?: Record<string, unknown>;
     enablePresetValues?: boolean;
     presetValues?: PresetValue[];
     dynamicContentInput?: {
@@ -15,6 +15,10 @@ export declare type CriteriaInputProps = {
         trigger?: Record<string, unknown>;
     };
     operators?: Operator[];
+    disabledCriteria?: {
+        criteria: Record<string, any>;
+        level: number;
+    };
     disabled?: boolean;
     hideBorder?: boolean;
     presetGroupLabel?: string;

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

@@ -3,7 +3,7 @@ import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, formatQuery, parseMongoDB, useRuleGroup, TestID, RuleGroupBodyComponents, RuleGroupHeaderComponents, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
-import { isEmpty, startCase } from 'lodash-es';
+import { isEmpty, startCase } from 'lodash';
 import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
@@ -34,6 +34,7 @@ const CustomRuleGroup = (props) => {
         rg.cloneGroup,
         rg.toggleLockGroup,
         rg.removeGroup,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ].map((f) => (event, context) => {
         event.preventDefault();
         event.stopPropagation();
@@ -72,10 +73,21 @@ const customButton = (props) => {
 };
 const customSelector = (props) => {
     var _a, _b;
-    const { options, value, handleOnChange, title } = props;
+    const { options, value, handleOnChange, title, context, level } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rule = props.rule;
     let width = '90px';
     let val = value;
     let opts = options;
+    let readOnly = false;
+    if (context.disabledCriteria) {
+        readOnly =
+            Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
+        const keys = Object.keys(context.disabledCriteria.criteria);
+        if (title === 'Fields') {
+            opts = opts.filter((o) => readOnly || !keys.includes(o.name));
+        }
+    }
     switch (title) {
         case 'Operators':
             width = '20%';
@@ -99,13 +111,21 @@ const customSelector = (props) => {
             return option.label;
         }, isOptionEqualToValue: (option, value) => {
             return option === value;
-        }, onChange: (event, newValue) => {
+        }, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange: (event, newValue) => {
             handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
-        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true }));
+        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
 };
 const customCombinator = (props) => {
-    const { options, value, handleOnChange } = props;
-    return (React.createElement(Autocomplete, { options: options, value: startCase(value), getOptionLabel: (option) => { var _a; return startCase((_a = option === null || option === void 0 ? void 0 : option.name) !== null && _a !== void 0 ? _a : option); }, isOptionEqualToValue: (option, value) => option === value, onChange: (event, newValue) => handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small", sx: { "& fieldset": { border: 'none' } } })), sx: {
+    const { options, value, handleOnChange, context, level } = props;
+    return (React.createElement(Autocomplete, { options: options, value: startCase(value), 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getOptionLabel: (option) => { var _a; return startCase((_a = option === null || option === void 0 ? void 0 : option.name) !== null && _a !== void 0 ? _a : option); }, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isOptionEqualToValue: (option, value) => option === value, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange: (event, newValue) => handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small", sx: { '& fieldset': { border: 'none' } } })), sx: {
             width: '80px',
             backgroundColor: '#DFE3E8',
             borderWidth: 'none',
@@ -114,33 +134,45 @@ const customCombinator = (props) => {
                 fontWeight: 550,
                 fontSize: '14px',
             },
-        }, disableClearable: true }));
+        }, readOnly: context.disabledCriteria && context.disabledCriteria.level - 1 === level, disableClearable: true }));
 };
 const customDelete = (props) => {
-    const { handleOnClick } = props;
-    return (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
-        React.createElement(RemoveCircleOutlineRounded, null)));
+    const { handleOnClick, context, level } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rule = props.ruleOrGroup;
+    let hideDelete = false;
+    if (context.disabledCriteria) {
+        hideDelete =
+            Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
+    }
+    return !hideDelete ? (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        React.createElement(RemoveCircleOutlineRounded, null))) : (React.createElement(React.Fragment, null));
 };
 export const valueEditor = (props) => {
     var _a, _b;
-    // For backward compatibility, if enable preset values is true, but preset 
+    // For backward compatibility, if enable preset values is true, but preset
     // values are not defined, add in the user id preset value
+    console.log(props);
     if (!((_a = props.context) === null || _a === void 0 ? void 0 : _a.presetValues) && ((_b = props.context) === null || _b === void 0 ? void 0 : _b.enablePresetValues)) {
-        props.context.presetValues = [{
+        props.context.presetValues = [
+            {
                 label: 'User ID',
                 value: { name: '{{{user.id}}}', label: 'UserId', sublabel: 'Currently logged in user' },
-            }];
+            },
+        ];
     }
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, presetGroupLabel, } = props;
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
             const updatedQuery = parseMongoDB(criteriaToParse);
-            setQuery(Object.assign(Object.assign({}, updatedQuery), { rules: updatedQuery.rules.map((rule) => {
+            setQuery(Object.assign(Object.assign({}, updatedQuery), { 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                rules: updatedQuery.rules.map((rule) => {
                     var _a, _b;
                     const propertyType = (_a = properties.find((property) => property.id === rule.field)) === null || _a === void 0 ? void 0 : _a.type;
                     return Object.assign(Object.assign({}, rule), { value: propertyType === 'array' ||
@@ -212,8 +244,14 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: valueEditor
-                    }, context: { dynamicContentInput, presetValues, enablePresetValues, presetGroupLabel }, controlClassnames: {
+                        valueEditor: valueEditor,
+                    }, context: {
+                        dynamicContentInput,
+                        presetValues,
+                        enablePresetValues,
+                        presetGroupLabel,
+                        disabledCriteria,
+                    }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators

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

@@ -18,14 +18,20 @@ const GroupHeader = styled('div')(({ theme }) => ({
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
     var _a, _b, _c, _d;
-    const { handleOnChange, value, values, operator, inputType, context } = props;
-    let inputRef = useRef(null);
+    const { handleOnChange, value, values, operator, inputType, context, level, rule } = props;
+    const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
     const disabled = ['null', 'notNull'].includes(operator);
     const presetValues = (_a = context.presetValues) !== null && _a !== void 0 ? _a : [];
     const isPresetValue = (value) => (value === null || value === void 0 ? void 0 : value.startsWith('{{{')) && (value === null || value === void 0 ? void 0 : value.endsWith('}}}'));
     const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
     const presetDisplayValue = (_c = (_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.find((option) => option.value.name === value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '';
+    let readOnly = false;
+    if (context.disabledCriteria) {
+        readOnly =
+            Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onClick = (e) => {
         var _a;
         // if property is date and date picker is open, don't open preset values
@@ -58,20 +64,25 @@ const ValueEditor = (props) => {
         if (inputType === 'date') {
             // date editor
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }))) })));
+                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }))), readOnly: readOnly })));
         }
         else if (inputType === 'time') {
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } })) })));
+                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);
             const options = presetValues;
             if (isMultiple) {
-                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => (option.label ? option.label : option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
+                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && (option === null || option === void 0 ? void 0 : option.label) ? option.label : option, value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    onChange: (event, newValue) => {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const uniqueSelections = newValue.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : Number(item); });
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                    }, isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sx: { width: '33%' } }));
+                    }, 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sx: { width: '33%' }, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, Object.assign({ inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -84,20 +95,23 @@ const ValueEditor = (props) => {
                         }
                     } }, (inputType === 'number'
                     ? { InputProps: { inputComponent: NumericFormat } }
-                    : { type: 'number' }), { placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' } })));
+                    : { type: 'number' }), { placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' }, readOnly: readOnly })));
             }
         }
         else {
             const isMultiple = inputType === 'array' || ['in', 'notIn'].includes(operator);
             const options = [
-                ...((_a = values === null || values === void 0 ? void 0 : values.sort((a, b) => a.label.localeCompare(b.name))) !== null && _a !== void 0 ? _a : []),
-                ...((_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.sort((a, b) => a.label.localeCompare(b.label))) !== null && _b !== void 0 ? _b : [])
+                ...((_a = values === null || values === void 0 ? void 0 : values.sort((a, b) => a.label.localeCompare(b.label))) !== null && _a !== void 0 ? _a : []),
+                ...((_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.sort((a, b) => a.label.localeCompare(b.label))) !== null && _b !== void 0 ? _b : []),
             ];
             if (isMultiple || (values === null || values === void 0 ? void 0 : values.length)) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, onChange: (event, newValue) => {
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    onChange: (event, newValue) => {
                         var _a, _b, _c;
                         let value;
                         if (isMultiple) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const values = newValue.map((item) => { var _a; return item.name || ((_a = item.value) === null || _a === void 0 ? void 0 : _a.name) || item; });
                             value = Array.from(new Set(values));
                         }
@@ -105,13 +119,17 @@ const ValueEditor = (props) => {
                             value = (_c = (_a = newValue === null || newValue === void 0 ? void 0 : newValue.name) !== null && _a !== void 0 ? _a : (_b = newValue === null || newValue === void 0 ? void 0 : newValue.value) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '';
                         }
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))), getOptionLabel: (option) => {
+                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))), 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    getOptionLabel: (option) => {
                         var _a;
                         if (typeof option === 'string') {
                             return ((_a = options.find((o) => { var _a; return option === o.name || option == ((_a = o.value) === null || _a === void 0 ? void 0 : _a.name); })) === null || _a === void 0 ? void 0 : _a.label) || '';
                         }
                         return option === null || option === void 0 ? void 0 : option.label;
-                    }, isOptionEqualToValue: (option, value) => {
+                    }, 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    isOptionEqualToValue: (option, value) => {
                         var _a;
                         if (typeof value === 'string') {
                             return (option === null || option === void 0 ? void 0 : option.name) === value || ((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.name) === value;
@@ -119,10 +137,10 @@ const ValueEditor = (props) => {
                         else {
                             return (option === null || option === void 0 ? void 0 : option.label) === (value === null || value === void 0 ? void 0 : value.label);
                         }
-                    }, groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sortBy: 'NONE', sx: { width: '33%' } }));
+                    }, groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sortBy: "NONE", sx: { width: '33%' }, readOnly: readOnly }));
             }
             else {
-                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }));
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' }, readOnly: readOnly }));
             }
         }
     };
@@ -135,9 +153,11 @@ const ValueEditor = (props) => {
                 padding: '0 5px',
                 justifyContent: 'space-between',
             }, deleteIcon: React.createElement(ClearRounded, { fontSize: "small" }), onDelete: clearValue })) : (getEditor()),
-        !!(presetValues === null || presetValues === void 0 ? void 0 : presetValues.length) && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, PaperProps: { sx: { borderRadius: '8px', width: (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth } }, onClose: onClose }, presetValues === null || presetValues === void 0 ? void 0 : presetValues.map((option) => (React.createElement(MenuItem, Object.assign({}, props, { onClick: () => setPresetValue(option.value.name), sx: { padding: '8px', minHeight: '25px' } }),
-            React.createElement(Box, { padding: 0, margin: 0 },
-                React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
-                option.value.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.value.sublabel))))))))));
+        !!(presetValues === null || presetValues === void 0 ? void 0 : presetValues.length) && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, PaperProps: { sx: { borderRadius: '8px', width: (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetWidth } }, onClose: onClose }, presetValues &&
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            presetValues.map((option) => (React.createElement(MenuItem, Object.assign({}, props, { onClick: () => setPresetValue(option.value.name), sx: { padding: '8px', minHeight: '25px' } }),
+                React.createElement(Box, { padding: 0, margin: 0 },
+                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
+                    option.value.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.value.sublabel))))))))));
 };
 export default ValueEditor;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
+import { Theme } from '@mui/material';
 import { BulkAction } from './DataGrid';
 export declare type GridToolbarProps = MuiGridToolbarProps & {
     onRefresh?: () => void;
     setAnchorEl?: (anchorEl: HTMLAnchorElement | null) => void;
     loading?: boolean;
-    theme?: any;
+    theme?: Theme;
     title?: string;
     bulkAction?: BulkAction;
 };

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';