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

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',
     },
 };
@@ -212,7 +212,7 @@ 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: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
@@ -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/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.8",
+    "version": "1.1.0-testing.9",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",