@evoke-platform/ui-components 1.0.0-dev.189 → 1.0.0-dev.191

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

@@ -30,7 +30,7 @@ const Autocomplete = (props) => {
         return (React.createElement(UIThemeProvider, null,
             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' } }, "*") : null),
+                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : 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',

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

@@ -42,7 +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, } from '@mui/material';
+export { SvgIcon, 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/core/index.js

@@ -43,5 +43,5 @@ export { Step, StepLabel, Stepper, StepContent, StepButton, StepIcon, StepConnec
 export { Popover } from './Popover';
 export { Popper } from './Popper';
 //TODO: Review following components. They also need theme control:
-export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
+export { SvgIcon, 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';

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -1,14 +1,15 @@
 import { Popover } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import InputMask from 'react-input-mask';
-import { CancelOutlined } from '@mui/icons-material';
-import { Button, List, ListItem, MenuItem, TextField, Typography } from '../../../core';
+import { List, MenuItem, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const AddressFieldComponent = (props) => {
+    var _a;
     const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [selectOptions, setSelectOptions] = useState([]);
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const textFieldRef = useRef(null);
     const open = Boolean(anchorEl);
     const popoverId = open ? `${id}-popover` : undefined;
     useEffect(() => {
@@ -25,23 +26,12 @@ const AddressFieldComponent = (props) => {
                 setSelectOptions(addresses
                     .filter((address) => address.address.line1)
                     .map((address) => {
-                    let label = '', sublabel = '';
-                    if (address.address.line1)
-                        label = label.concat(address.address.line1);
-                    if (address.address.city)
-                        sublabel = sublabel.concat(`${address.address.city}`);
-                    if (address.address.county)
-                        sublabel = sublabel
-                            ? sublabel.concat(`, ${address.address.county}`)
-                            : address.address.county;
-                    if (address.address.state)
-                        sublabel = sublabel
-                            ? sublabel.concat(`, ${address.address.state}`)
-                            : address.address.state;
-                    if (address.address.zipCode)
-                        sublabel = sublabel
-                            ? sublabel.concat(` ${address.address.zipCode}`)
-                            : address.address.zipCode;
+                    const { line1, city, county, state, zipCode } = address.address;
+                    const label = line1 !== null && line1 !== void 0 ? line1 : '';
+                    let sublabel = [city, county, state].filter(Boolean).join(', ');
+                    if (zipCode) {
+                        sublabel = sublabel ? `${sublabel} ${zipCode}` : zipCode;
+                    }
                     return { label, sublabel, value: address.address };
                 }));
             });
@@ -56,10 +46,10 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, Object.assign({ id: id, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
+        !mask ? (React.createElement(TextField, Object.assign({ id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, Object.assign({ id: id, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, Object.assign({ id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -78,23 +68,23 @@ const AddressFieldComponent = (props) => {
                 horizontal: 'left',
             }, PaperProps: {
                 sx: {
-                    width: '100%',
-                    height: '400px',
-                    maxWidth: '300px',
-                    boxShadow: 'none',
+                    width: ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                        ? `${textFieldRef.current.offsetWidth}px`
+                        : '100%',
+                    height: 'fit-content',
+                    maxHeight: '400px',
+                    borderRadius: '8px',
+                    boxShadow: 'rgb(222, 218, 218) -2px 4px 5px -3px, rgb(150 150 150 / 14%) 0px 0px 10px 2px',
                     zIndex: 2000,
                 },
             } },
-            React.createElement(List, null,
-                selectOptions.map((option) => {
-                    return (React.createElement(MenuItem, { key: option.label + option.sublabel, onClick: () => handleClick(option) },
-                        React.createElement(Box, { sx: {
-                                flexGrow: 1,
-                            } },
-                            React.createElement(Typography, null, option.label),
-                            React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
-                }),
-                React.createElement(ListItem, { sx: { justifyContent: 'center' } },
-                    React.createElement(Button, { fullWidth: true, size: "small", color: "primary", variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close")))))));
+            React.createElement(List, null, selectOptions.map((option, index) => {
+                return (React.createElement(MenuItem, { key: `${option.label}-${option.sublabel}-${index}`, onClick: () => handleClick(option) },
+                    React.createElement(Box, { sx: {
+                            flexGrow: 1,
+                        } },
+                        React.createElement(Typography, null, option.label),
+                        React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
+            }))))));
 };
 export default AddressFieldComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.189",
+    "version": "1.0.0-dev.191",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",