@evoke-platform/ui-components 1.1.0-testing.7 → 1.1.0-testing.9

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

@@ -24,6 +24,12 @@ const DateTimePicker = (props) => {
         handleChange(newValue, keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), ...rest })));
+        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), PaperProps: {
+                sx: {
+                    '&.MuiPickersPopper-paper': {
+                        borderRadius: '12px',
+                    },
+                },
+            }, ...rest })));
 };
 export default DateTimePicker;

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

@@ -7,8 +7,9 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
-import { Autocomplete, Button, IconButton, TextField } from '../../core';
+import { Autocomplete, Button, IconButton } from '../../core';
 import { Box } from '../../layout';
+import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
 import { parseMongoDB, traversePropertyPath } from './utils';
@@ -32,7 +33,6 @@ const styles = {
     buttons: {
         padding: '6px 16px',
         fontSize: '0.875rem',
-        marginRight: '0px',
         boxShadow: 'none',
     },
 };
@@ -198,7 +198,7 @@ const customSelector = (props) => {
     };
     return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
-                return opts.find((o) => option === o.name)?.label || '';
+                return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
         }, isOptionEqualToValue: (option, value) => {
@@ -212,10 +212,10 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: placeholder, size: "small", inputProps: {
+        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
                 ...params.inputProps,
                 'aria-label': placeholder,
-            } })), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
+            } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -439,7 +439,6 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                     maxWidth: '70vw',
-                    margin: 'auto',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -527,8 +526,6 @@ const CriteriaBuilder = (props) => {
                     alignItems: 'center',
                     marginBottom: '10px',
                     maxWidth: '71vw',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
                 } },
                 React.createElement(Box, null,
                     React.createElement(Button, { sx: {
@@ -558,7 +555,7 @@ const CriteriaBuilder = (props) => {
                             backgroundColor: 'transparent',
                         },
                         ...styles.buttons,
-                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
     }
     return React.createElement(React.Fragment, null);
 };

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

@@ -1,6 +1,7 @@
 import { ChevronRight, ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
+import { Autocomplete, MenuItem, TreeView } from '../../core';
+import { OverflowTextField } from '../OverflowTextField';
 import PropertyTreeItem from './PropertyTreeItem';
 import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
 const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
@@ -126,15 +127,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
                 : objectPropertyNamePathMap[option.value] ?? '';
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            let isTruncated = false;
-            const fullDisplayValue = value && objectPropertyNamePathMap[value];
-            let displayValue = fullDisplayValue;
-            if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
-                isTruncated = true;
-                displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
-            }
-            return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
-                React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, size: "small", placeholder: "Select a property", variant: "outlined" })));
+            const fullDisplayName = value && objectPropertyNamePathMap[value];
+            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
         }, isOptionEqualToValue: (option, val) => {
             if (typeof val === 'string') {
                 return option.value === val;

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

@@ -1,9 +1,9 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
 import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
-import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
+import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
-import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
+import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
     position: 'sticky',
@@ -43,6 +43,16 @@ const ValueEditor = (props) => {
     const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
     const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
     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 styles = {
+        input: {
+            width: '33%',
+            background: readOnly ? '#f4f6f8' : '#fff',
+        },
+    };
     useEffect(() => {
         if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
             handleOnChange('');
@@ -51,10 +61,6 @@ const ValueEditor = (props) => {
             handleOnChange([]);
         }
     }, [operator]);
-    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) => {
         // if property is date and date picker is open, don't open preset values
@@ -93,11 +99,11 @@ 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, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), 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: styles.input })), 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, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), 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: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'date-time') {
             const dateTimeValue = parseISOStringToLocalDateTime(value);
@@ -118,7 +124,7 @@ const ValueEditor = (props) => {
                         handleOnChange(new Date(localDateTime.toString()).toISOString());
                     }, onClose: onClose, PopperProps: {
                         anchorEl,
-                    }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
+                    }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
                         React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
@@ -133,7 +139,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, 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: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -145,7 +151,7 @@ const ValueEditor = (props) => {
                         }
                     }, ...(inputType === 'number'
                         ? { InputProps: { inputComponent: NumericFormat } }
-                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
             }
         }
         else {
@@ -187,7 +193,7 @@ const ValueEditor = (props) => {
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), 
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getOptionLabel: (option) => {
                         if (typeof option === 'string') {
@@ -204,10 +210,10 @@ const ValueEditor = (props) => {
                         else {
                             return option?.label === value?.label;
                         }
-                    }, groupBy: (option) => isPresetValue(option.value?.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: styles.input, 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%', background: '#fff' }, readOnly: readOnly }));
+                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: styles.input, readOnly: readOnly }));
             }
         }
     };

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

@@ -0,0 +1,4 @@
+import { TextFieldProps } from '@mui/material';
+import { FC } from 'react';
+declare const OverflowTextField: FC<TextFieldProps>;
+export default OverflowTextField;

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

@@ -0,0 +1,13 @@
+import { TextField, Tooltip } from '@mui/material';
+import React, { useRef, useState } from 'react';
+const OverflowTextField = (props) => {
+    const { value, ...rest } = props;
+    const inputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const textField = (React.createElement(TextField, { ...rest, value: value, InputProps: {
+            ...rest.InputProps,
+            inputRef: inputRef,
+        } }));
+    return (React.createElement(Tooltip, { open: isOpen, onOpen: () => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth && setIsOpen(true), onClose: () => setIsOpen(false), title: value }, textField));
+};
+export default OverflowTextField;

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

@@ -0,0 +1,2 @@
+import OverflowTextField from './OverflowTextField';
+export { OverflowTextField };

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

@@ -0,0 +1,2 @@
+import OverflowTextField from './OverflowTextField';
+export { OverflowTextField };

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

@@ -0,0 +1,5 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+declare const _default: ComponentMeta<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
+export default _default;
+export declare const OverflowTextField: ComponentStory<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;

package/dist/published/stories/OverflowTextField.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OverflowTextField as CustomOverflowTextField } from '../components/custom/OverflowTextField';
+export default {
+    title: 'Input/OverflowTextField',
+    component: CustomOverflowTextField,
+    argTypes: {
+        value: {
+            control: 'text',
+            defaultValue: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
+            description: 'The text to display in the field',
+        },
+        placeholder: {
+            control: 'text',
+            defaultValue: 'Enter text...',
+        },
+        size: {
+            control: 'text',
+            defaultValue: 'small',
+        },
+    },
+};
+const Template = (args) => React.createElement(CustomOverflowTextField, { ...args });
+export const OverflowTextField = Template.bind({});
+OverflowTextField.args = {
+    value: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
+    placeholder: 'Enter text here...',
+    size: 'small',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.7",
+    "version": "1.1.0-testing.9",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",