@evoke-platform/ui-components 1.0.0-dev.226 → 1.0.0-dev.227

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

@@ -27,7 +27,7 @@ const ALL_OPERATORS = [
     { name: 'notIn', label: 'not in' },
 ];
 const CustomRuleGroup = (props) => {
-    const rg = Object.assign(Object.assign({}, props), useRuleGroup(props));
+    const rg = { ...props, ...useRuleGroup(props) };
     const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
         rg.addRule,
         rg.addGroup,
@@ -40,16 +40,24 @@ const CustomRuleGroup = (props) => {
         event.stopPropagation();
         f(event, context);
     });
-    const subComponentProps = Object.assign(Object.assign({}, rg), { addRule,
+    const subComponentProps = {
+        ...rg,
+        addRule,
         addGroup,
         cloneGroup,
         toggleLockGroup,
-        removeGroup });
+        removeGroup,
+    };
     return (React.createElement("div", { ref: rg.previewRef, className: rg.outerClassName, "data-testid": TestID.ruleGroup, "data-dragmonitorid": rg.dragMonitorId, "data-dropmonitorid": rg.dropMonitorId, "data-rule-group-id": rg.id, "data-level": rg.path.length, "data-path": JSON.stringify(rg.path) },
         React.createElement("div", { className: rg.classNames.body },
-            React.createElement(RuleGroupBodyComponents, Object.assign({}, subComponentProps))),
+            React.createElement(RuleGroupBodyComponents, { ...subComponentProps })),
         React.createElement("div", { ref: rg.dropRef, className: rg.classNames.header },
-            React.createElement(RuleGroupHeaderComponents, Object.assign({}, subComponentProps, { schema: Object.assign(Object.assign({}, subComponentProps.schema), { controls: Object.assign({}, subComponentProps.schema.controls) }) })))));
+            React.createElement(RuleGroupHeaderComponents, { ...subComponentProps, schema: {
+                    ...subComponentProps.schema,
+                    controls: {
+                        ...subComponentProps.schema.controls,
+                    },
+                } }))));
 };
 const customButton = (props) => {
     const { title, handleOnClick, label } = props;
@@ -72,7 +80,6 @@ const customButton = (props) => {
         } }, buttonLabel));
 };
 const customSelector = (props) => {
-    var _a, _b, _c;
     const { options, value, handleOnChange, title, context, level } = props;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const rule = props.rule;
@@ -92,7 +99,7 @@ const customSelector = (props) => {
     switch (title) {
         case 'Operators':
             width = '20%';
-            if (((_a = props.fieldData) === null || _a === void 0 ? void 0 : _a.inputType) === 'array') {
+            if (props.fieldData?.inputType === 'array') {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
@@ -101,7 +108,7 @@ const customSelector = (props) => {
                         ? ''
                         : options.find((option) => option.name === displayedValue).name;
             }
-            else if (((_b = props.fieldData) === null || _b === void 0 ? void 0 : _b.inputType) === 'document') {
+            else if (props.fieldData?.inputType === 'document') {
                 opts = options
                     .filter((option) => ['null', 'notNull'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
@@ -113,13 +120,13 @@ const customSelector = (props) => {
             break;
         case 'Fields':
             width = '33%';
-            displayedValue = (_c = options.find((option) => option.name === displayedValue)) === null || _c === void 0 ? void 0 : _c.label;
+            displayedValue = options.find((option) => option.name === displayedValue)?.label;
             if (isFreeSoloEnabled && !displayedValue) {
                 displayedValue = value;
             }
             break;
     }
-    return (React.createElement(Autocomplete, { options: opts, value: displayedValue !== null && displayedValue !== void 0 ? displayedValue : null, getOptionLabel: (option) => {
+    return (React.createElement(Autocomplete, { options: opts, value: displayedValue ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return option;
             }
@@ -129,22 +136,22 @@ const customSelector = (props) => {
         }, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
-            handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
+            handleOnChange(newValue?.value.name);
         }, onInputChange: (event, value) => {
             if (isFreeSoloEnabled) {
                 handleOnChange(value);
             }
-        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small", name: title })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
+        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small", name: title }), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
 };
 const customCombinator = (props) => {
     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); }, 
+        getOptionLabel: (option) => startCase(option?.name ?? 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: {
+        onChange: (event, newValue) => handleOnChange(newValue?.value.name), size: 'small', renderInput: (params) => React.createElement(TextField, { ...params, size: "small", sx: { '& fieldset': { border: 'none' } } }), sx: {
             width: '80px',
             backgroundColor: '#DFE3E8',
             borderWidth: 'none',
@@ -168,10 +175,9 @@ const customDelete = (props) => {
         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
     // values are not defined, add in the user id preset value
-    if (!((_a = props.context) === null || _a === void 0 ? void 0 : _a.presetValues) && ((_b = props.context) === null || _b === void 0 ? void 0 : _b.enablePresetValues)) {
+    if (!props.context?.presetValues && props.context?.enablePresetValues) {
         props.context.presetValues = [
             {
                 label: 'User ID',
@@ -188,7 +194,10 @@ const CriteriaBuilder = (props) => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
             const updatedQuery = parseMongoDB(criteriaToParse);
-            setQuery(Object.assign(Object.assign({}, updatedQuery), { rules: processRules(updatedQuery.rules) }));
+            setQuery({
+                ...updatedQuery,
+                rules: processRules(updatedQuery.rules),
+            });
         }
         else {
             setQuery({ combinator: 'and', rules: [] });
@@ -196,16 +205,21 @@ const CriteriaBuilder = (props) => {
     }, [originalCriteria]);
     function processRules(rules) {
         return rules.map((rule) => {
-            var _a, _b;
             if ('rules' in rule) {
-                return Object.assign(Object.assign({}, rule), { rules: processRules(rule.rules) });
+                return {
+                    ...rule,
+                    rules: processRules(rule.rules),
+                };
             }
             else {
-                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' ||
+                const propertyType = properties.find((property) => property.id === rule.field)?.type;
+                return {
+                    ...rule,
+                    value: propertyType === 'array' ||
                         (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))
-                        ? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',')
-                        : rule.value });
+                        ? rule.value?.split(',')
+                        : rule.value,
+                };
             }
         });
     }
@@ -221,10 +235,15 @@ const CriteriaBuilder = (props) => {
     };
     const fields = useMemo(() => {
         return properties.map((property) => {
-            return Object.assign({ name: property.type === 'object' ? `${property.id}.id` : property.id, label: property.name, inputType: property.type }, (property.enum && {
-                valueEditorType: property.type === 'array' ? 'multiselect' : 'select',
-                values: property.enum.map((item) => ({ name: item, label: item })),
-            }));
+            return {
+                name: property.type === 'object' ? `${property.id}.id` : property.id,
+                label: property.name,
+                inputType: property.type,
+                ...(property.enum && {
+                    valueEditorType: property.type === 'array' ? 'multiselect' : 'select',
+                    values: property.enum.map((item) => ({ name: item, label: item })),
+                }),
+            };
         });
     }, [properties]);
     if (query) {

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -18,7 +9,7 @@ const mockProperties = [
     { id: 'issueDate', name: 'issue date', type: 'date', required: false },
 ];
 describe('CriteriaBuilder', () => {
-    test('allows selection of a property and clears value input when selected', () => __awaiter(void 0, void 0, void 0, function* () {
+    test('allows selection of a property and clears value input when selected', async () => {
         const user = userEvent.setup();
         render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
                 $or: [
@@ -27,15 +18,15 @@ describe('CriteriaBuilder', () => {
                     },
                 ],
             }, setCriteria: jest.fn(), freeSolo: true }));
-        const field = yield screen.findByDisplayValue(/name/);
-        const value = yield screen.findByDisplayValue(/test value/);
-        yield user.click(field);
-        const option = yield screen.findByRole('option', { name: /license number/ });
-        yield user.click(option);
+        const field = await screen.findByDisplayValue(/name/);
+        const value = await screen.findByDisplayValue(/test value/);
+        await user.click(field);
+        const option = await screen.findByRole('option', { name: /license number/ });
+        await user.click(option);
         expect(field).toHaveValue('license number');
         expect(value).toHaveValue('');
-    }));
-    test('allows free solo input when freeSolo is true, clears value input when entered', () => __awaiter(void 0, void 0, void 0, function* () {
+    });
+    test('allows free solo input when freeSolo is true, clears value input when entered', async () => {
         const user = userEvent.setup();
         render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
                 $or: [
@@ -44,10 +35,10 @@ describe('CriteriaBuilder', () => {
                     },
                 ],
             }, setCriteria: jest.fn(), freeSolo: true }));
-        const field = yield screen.findByDisplayValue(/name/);
-        const value = yield screen.findByDisplayValue(/test value/);
-        yield user.type(field, 'person.license.name');
+        const field = await screen.findByDisplayValue(/name/);
+        const value = await screen.findByDisplayValue(/test value/);
+        await user.type(field, 'person.license.name');
         expect(field).toHaveValue('person.license.name');
         expect(value).toHaveValue('');
-    }));
+    });
 });

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

@@ -17,15 +17,14 @@ 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, 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 presetValues = context.presetValues ?? [];
+    const isPresetValue = (value) => value?.startsWith('{{{') && 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 : '';
+    const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
     let readOnly = false;
     if (context.disabledCriteria) {
         readOnly =
@@ -33,9 +32,8 @@ const ValueEditor = (props) => {
     }
     // 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
-        if (inputType && ['date', 'time'].includes(inputType) && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) !== 'INPUT') {
+        if (inputType && ['date', 'time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
             return;
         }
         setOpenPresetValues(true);
@@ -54,7 +52,6 @@ const ValueEditor = (props) => {
         React.createElement(GroupHeader, null, params.group),
         React.createElement(GroupItems, null, params.children)));
     const getEditor = () => {
-        var _a, _b;
         if (isPresetValueSelected) {
             return;
         }
@@ -64,80 +61,76 @@ 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%' } }))), readOnly: readOnly })));
+                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...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%' } }))), readOnly: readOnly })));
+                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...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) => typeof option === 'object' && (option === null || option === void 0 ? void 0 : option.label) ? option.label : option, value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
+                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && 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); });
+                        const uniqueSelections = newValue.map((item) => item.value ?? Number(item));
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // 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 }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.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) => {
-                        var _a;
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
                         if (inputType === 'number') {
-                            handleOnChange((_a = e.target.value) !== null && _a !== void 0 ? _a : '');
+                            handleOnChange(e.target.value ?? '');
                         }
                         else {
                             handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
                         }
-                    } }, (inputType === 'number'
-                    ? { InputProps: { inputComponent: NumericFormat } }
-                    : { type: 'number' }), { placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%' }, readOnly: readOnly })));
+                    }, ...(inputType === 'number'
+                        ? { InputProps: { inputComponent: NumericFormat } }
+                        : { 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.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 : []),
+                ...(values?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
+                ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
             ];
-            if (isMultiple || (values === null || values === void 0 ? void 0 : values.length)) {
+            if (isMultiple || values?.length) {
                 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; });
+                            const values = newValue.map((item) => item.name || item.value?.name || item);
                             value = Array.from(new Set(values));
                         }
                         else {
-                            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 : '';
+                            value = newValue?.name ?? newValue?.value?.name ?? '';
                         }
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))), 
+                    }, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: 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 options.find((o) => option === o.name || option == o.value?.name)?.label || '';
                         }
-                        return option === null || option === void 0 ? void 0 : option.label;
+                        return option?.label;
                     }, 
                     // 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;
+                            return option?.name === value || option?.value?.name === value;
                         }
                         else {
-                            return (option === null || option === void 0 ? void 0 : option.label) === (value === null || value === void 0 ? void 0 : value.label);
+                            return option?.label === 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%' }, readOnly: readOnly }));
+                    }, groupBy: (option) => isPresetValue(option.value?.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%' }, readOnly: readOnly }));
@@ -153,9 +146,9 @@ 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 &&
+        !!presetValues?.length && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef?.current, PaperProps: { sx: { borderRadius: '8px', width: inputRef?.current?.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' } }),
+            presetValues.map((option) => (React.createElement(MenuItem, { ...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))))))))));

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

@@ -1,14 +1,3 @@
-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 { Box, Typography, lighten } from '@mui/material';
 import { GridPagination, DataGrid as MuiDataGrid, getGridBooleanOperators, getGridDateOperators, getGridNumericOperators, getGridSingleSelectOperators, getGridStringOperators, } from '@mui/x-data-grid';
 import React, { useEffect, useState } from 'react';
@@ -17,13 +6,14 @@ import LinearProgress from '../../core/LinearProgress';
 import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
 import Toolbar from './Toolbar';
 export default function (props) {
-    var _a;
-    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 { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
-        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'
+        return filterSettings?.mode === 'server' || !!filterSettings?.filterColumns
+            ? columns.map((column) => ({
+                ...column,
+                filterOperators: column.type === 'string'
                     ? getGridStringOperators().filter((o) => !['isEmpty', 'isNotEmpty', 'isAnyOf'].includes(o.value))
                     : column.type === 'date' || column.type === 'dateTime'
                         ? getGridDateOperators(column.type === 'dateTime')
@@ -33,12 +23,12 @@ export default function (props) {
                             ? 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', 'isAnyOf'].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))
+        if (!loading || !loadingOptions?.messages?.length)
             return;
         const intervalId = setInterval(() => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -47,32 +37,48 @@ export default function (props) {
         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': {
+        React.createElement(MuiDataGrid, { onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, filterMode: filterSettings?.mode ?? 'client', rows: rows, ...rest, columns: addColumnFilterOperators(columns), sx: {
+                borderRadius: '8px',
+                border: 'none',
+                '& .MuiDataGrid-columnHeaders': {
                     backgroundColor: '#F4F6F8',
                     color: '#637381',
                     borderRadius: '8px 8px 0 0',
-                }, '& .MuiDataGrid-virtualScrollerContent': {
+                },
+                '& .MuiDataGrid-virtualScrollerContent': {
                     borderRight: '1px solid #eee',
                     borderLeft: '1px solid #eee',
-                }, '& .MuiDataGrid-virtualScroller': Object.assign({}, (loading ? { overflow: 'hidden' } : {})), '& .MuiDataGrid-toolbarContainer': {
+                },
+                '& .MuiDataGrid-virtualScroller': {
+                    ...(loading ? { overflow: 'hidden' } : {}),
+                },
+                '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
                     fontColor: '#212B36',
-                }, '& .MuiDataGrid-row': {
+                },
+                '& .MuiDataGrid-row': {
                     borderBottom: '1px solid #eee',
-                }, '& .MuiDataGrid-cell': {
+                },
+                '& .MuiDataGrid-cell': {
                     border: 'none',
-                }, '& .MuiDataGrid-footerContainer': {
+                },
+                '& .MuiDataGrid-footerContainer': {
                     border: '1px solid #eee',
                     borderRadius: '0 0 8px 8px',
-                }, '& .MuiTablePagination-displayedRows': {
+                },
+                '& .MuiTablePagination-displayedRows': {
                     marginBottom: 0,
-                }, '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
+                },
+                '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
                     padding: '7px',
                     color: '#757575',
                     '&:hover': {
                         backgroundColor: '#f2f3f5',
                     },
-                }, height: 'calc(100vh - 240px)' }, rest.sx), localeText: {
+                },
+                height: 'calc(100vh - 240px)',
+                ...rest.sx,
+            }, localeText: {
                 toolbarColumns: '',
                 toolbarDensity: '',
                 toolbarFilters: '',
@@ -107,12 +113,11 @@ export default function (props) {
                 Toolbar: Toolbar,
                 Footer: () => {
                     return (React.createElement(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', sx: { border: '1px solid #eee', borderRadius: '0 0 6px 6px' } },
-                        React.createElement(Box, null, (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.mode) === 'server' && (filterSettings === null || filterSettings === void 0 ? void 0 : filterSettings.maxRows) === (rows === null || rows === void 0 ? void 0 : rows.length) && (React.createElement(Typography, { marginLeft: '8px', color: '#8f8c8c', fontSize: '14px' }, `You are viewing ${filterSettings.maxRows} records. If you can't find a record, please refine your
+                        React.createElement(Box, null, filterSettings?.mode === 'server' && filterSettings?.maxRows === rows?.length && (React.createElement(Typography, { marginLeft: '8px', color: '#8f8c8c', fontSize: '14px' }, `You are viewing ${filterSettings.maxRows} records. If you can't find a record, please refine your
                                             search.`))),
                         React.createElement(GridPagination, null)));
                 },
                 LoadingOverlay: () => {
-                    var _a, _b;
                     return (React.createElement(Box, { sx: {
                             minHeight: '100%',
                             display: 'flex',
@@ -122,17 +127,17 @@ export default function (props) {
                             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)
+                            React.createElement(Typography, { sx: { marginBottom: '8px', color: '#aaa', width: '100%', textAlign: 'center' } }, 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',
+                                    backgroundColor: loadingOptions?.color ?? '#0075A7',
                                     '& .MuiLinearProgress-bar': {
-                                        backgroundColor: lighten((_b = loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.color) !== null && _b !== void 0 ? _b : '#0075A7', 0.5),
+                                        backgroundColor: lighten(loadingOptions?.color ?? '#0075A7', 0.5),
                                     },
                                     borderRadius: '6px',
                                     width: '100%',
                                 } }))));
                 },
-            } }))));
+            } })));
 }

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

@@ -3,19 +3,17 @@ import { useGridRootProps } from '@mui/x-data-grid';
 import { isNil } from 'lodash';
 import React, { useEffect, useState } from 'react';
 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 : '');
+    const [filterValueState, setFilterValueState] = useState(item.value ?? '');
     useEffect(() => {
-        var _a;
-        const itemValue = (_a = item.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
+        const itemValue = item.value ?? [undefined, undefined];
         setFilterValueState(itemValue);
     }, [item.value]);
     const updateFilterValue = (from, to) => {
         setFilterValueState([from, to]);
         debounce(() => {
-            applyValue(Object.assign(Object.assign({}, item), { value: [from, to] }));
+            applyValue({ ...item, value: [from, to] });
         }, rootProps.filterDebounceMs)();
     };
     const handleChange = (event) => {

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

@@ -6,7 +6,6 @@ import UIThemeProvider from '../../../theme';
 import { Button, IconButton } from '../../core';
 import { Grid } from '../../layout';
 function Toolbar(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar } = props;
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
@@ -14,9 +13,9 @@ function Toolbar(props) {
             minWidth: '36px',
             height: '36px',
             backgroundColor: 'rgba(145, 158, 171, 0.12)',
-            color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : 'primary',
+            color: theme?.palette?.primary?.main ?? 'primary',
             '&:hover': {
-                backgroundColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.light) !== null && _f !== void 0 ? _f : '#99C8DC',
+                backgroundColor: theme?.palette?.primary?.light ?? '#99C8DC',
             },
             marginLeft: '3px',
             marginRight: '3px',
@@ -27,7 +26,7 @@ function Toolbar(props) {
         quickFilter: {
             '& .MuiOutlinedInput-root': {
                 '&.Mui-focused fieldset': {
-                    borderColor: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : 'primary',
+                    borderColor: theme?.palette?.primary?.main ?? 'primary',
                 },
             },
             '& fieldset': {

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

@@ -41,7 +41,17 @@ export default function ErrorComponent(props) {
                 return React.createElement(WarningRounded, { sx: { color: '#ef8228' } });
         }
     };
-    return (React.createElement(Grid, { item: true, xs: colspan !== null && colspan !== void 0 ? colspan : 12, sm: colspan !== null && colspan !== void 0 ? colspan : 12, sx: Object.assign({ background: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', boxShadow: '0px 8px 16px 0px rgba(145, 158, 171, 0.12)', borderRadius: '6px', height: 200 }, styles) },
+    return (React.createElement(Grid, { item: true, xs: colspan ?? 12, sm: colspan ?? 12, sx: {
+            background: 'white',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            boxShadow: '0px 8px 16px 0px rgba(145, 158, 171, 0.12)',
+            borderRadius: '6px',
+            height: 200,
+            ...styles,
+        } },
         React.createElement(Box, { sx: {
                 padding: '8px',
                 height: '36px',