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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,8 +7,9 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
7
7
  import 'react-querybuilder/dist/query-builder.css';
8
8
  import escape from 'string-escape-regex';
9
9
  import { TrashCan } from '../../../icons/custom';
10
- import { Autocomplete, Button, IconButton, TextField } from '../../core';
10
+ import { Autocomplete, Button, IconButton } from '../../core';
11
11
  import { Box } from '../../layout';
12
+ import { OverflowTextField } from '../OverflowTextField';
12
13
  import { difference } from '../util';
13
14
  import PropertyTree from './PropertyTree';
14
15
  import { parseMongoDB, traversePropertyPath } from './utils';
@@ -32,7 +33,6 @@ const styles = {
32
33
  buttons: {
33
34
  padding: '6px 16px',
34
35
  fontSize: '0.875rem',
35
- marginRight: '0px',
36
36
  boxShadow: 'none',
37
37
  },
38
38
  };
@@ -212,7 +212,7 @@ const customSelector = (props) => {
212
212
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
213
213
  onChange: (event, newValue) => {
214
214
  handleOnChange(newValue?.value.name);
215
- }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: placeholder, size: "small", inputProps: {
215
+ }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
216
216
  ...params.inputProps,
217
217
  'aria-label': placeholder,
218
218
  } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
@@ -439,7 +439,6 @@ const CriteriaBuilder = (props) => {
439
439
  borderStyle: 'hidden',
440
440
  background: '#fff',
441
441
  maxWidth: '70vw',
442
- margin: 'auto',
443
442
  },
444
443
  '.ruleGroup-header': {
445
444
  display: 'block',
@@ -527,8 +526,6 @@ const CriteriaBuilder = (props) => {
527
526
  alignItems: 'center',
528
527
  marginBottom: '10px',
529
528
  maxWidth: '71vw',
530
- marginLeft: 'auto',
531
- marginRight: 'auto',
532
529
  } },
533
530
  React.createElement(Box, null,
534
531
  React.createElement(Button, { sx: {
@@ -558,7 +555,7 @@ const CriteriaBuilder = (props) => {
558
555
  backgroundColor: 'transparent',
559
556
  },
560
557
  ...styles.buttons,
561
- }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
558
+ }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
562
559
  }
563
560
  return React.createElement(React.Fragment, null);
564
561
  };
@@ -1,6 +1,7 @@
1
1
  import { ChevronRight, ExpandMore } from '@mui/icons-material';
2
2
  import React, { useEffect, useState } from 'react';
3
- import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
3
+ import { Autocomplete, MenuItem, TreeView } from '../../core';
4
+ import { OverflowTextField } from '../OverflowTextField';
4
5
  import PropertyTreeItem from './PropertyTreeItem';
5
6
  import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
6
7
  const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
@@ -126,15 +127,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
126
127
  : objectPropertyNamePathMap[option.value] ?? '';
127
128
  return truncateNamePath(namePath, NAME_PATH_LIMIT);
128
129
  }, renderInput: (params) => {
129
- let isTruncated = false;
130
- const fullDisplayValue = value && objectPropertyNamePathMap[value];
131
- let displayValue = fullDisplayValue;
132
- if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
133
- isTruncated = true;
134
- displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
135
- }
136
- return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
137
- React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, size: "small", placeholder: "Select a property", variant: "outlined" })));
130
+ const fullDisplayName = value && objectPropertyNamePathMap[value];
131
+ return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
138
132
  }, isOptionEqualToValue: (option, val) => {
139
133
  if (typeof val === 'string') {
140
134
  return option.value === val;
@@ -0,0 +1,4 @@
1
+ import { TextFieldProps } from '@mui/material';
2
+ import { FC } from 'react';
3
+ declare const OverflowTextField: FC<TextFieldProps>;
4
+ export default OverflowTextField;
@@ -0,0 +1,13 @@
1
+ import { TextField, Tooltip } from '@mui/material';
2
+ import React, { useRef, useState } from 'react';
3
+ const OverflowTextField = (props) => {
4
+ const { value, ...rest } = props;
5
+ const inputRef = useRef(null);
6
+ const [isOpen, setIsOpen] = useState(false);
7
+ const textField = (React.createElement(TextField, { ...rest, value: value, InputProps: {
8
+ ...rest.InputProps,
9
+ inputRef: inputRef,
10
+ } }));
11
+ return (React.createElement(Tooltip, { open: isOpen, onOpen: () => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth && setIsOpen(true), onClose: () => setIsOpen(false), title: value }, textField));
12
+ };
13
+ export default OverflowTextField;
@@ -0,0 +1,2 @@
1
+ import OverflowTextField from './OverflowTextField';
2
+ export { OverflowTextField };
@@ -0,0 +1,2 @@
1
+ import OverflowTextField from './OverflowTextField';
2
+ export { OverflowTextField };
@@ -0,0 +1,5 @@
1
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
2
+ import React from 'react';
3
+ declare const _default: ComponentMeta<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
4
+ export default _default;
5
+ export declare const OverflowTextField: ComponentStory<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { OverflowTextField as CustomOverflowTextField } from '../components/custom/OverflowTextField';
3
+ export default {
4
+ title: 'Input/OverflowTextField',
5
+ component: CustomOverflowTextField,
6
+ argTypes: {
7
+ value: {
8
+ control: 'text',
9
+ defaultValue: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
10
+ description: 'The text to display in the field',
11
+ },
12
+ placeholder: {
13
+ control: 'text',
14
+ defaultValue: 'Enter text...',
15
+ },
16
+ size: {
17
+ control: 'text',
18
+ defaultValue: 'small',
19
+ },
20
+ },
21
+ };
22
+ const Template = (args) => React.createElement(CustomOverflowTextField, { ...args });
23
+ export const OverflowTextField = Template.bind({});
24
+ OverflowTextField.args = {
25
+ value: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
26
+ placeholder: 'Enter text here...',
27
+ size: 'small',
28
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.1.0-testing.8",
3
+ "version": "1.1.0-testing.9",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",