@trii/components 2.0.48 → 2.0.50

package/dist/cjs/types/components/EditContactModal/components/TagsEditor/TagsEditor.d.ts

@@ -8,6 +8,7 @@ type TagsEditorProps = {
     isSaving: boolean;
     onCreateNew: (name: string) => void;
     isCreatingNew: boolean;
+    popperContainer?: HTMLElement | null;
 };
-declare const TagsEditor: ({ value, options, onChange, onBack, onSave, isSaving, onCreateNew, isCreatingNew, }: TagsEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TagsEditor: ({ value, options, onChange, onBack, onSave, isSaving, onCreateNew, isCreatingNew, popperContainer, }: TagsEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TagsEditor;

package/dist/esm/index.js

@@ -15272,25 +15272,29 @@ const MembersSection = ({ contactData, title, navigate }) => {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
 
-var add$1 = "Add";
-var close$1 = "Close";
 var labels$1 = "Labels";
 var phone$1 = "Phone";
-var phones$1 = "Phones";
-var number$1 = "Number";
 var business$1 = "Business";
 var businessMembers$1 = "Business Members";
 var properties$1 = "Properties";
-var note$1 = "Note";
 var view$1 = "View";
-var email$1 = "Email";
 var tags$1 = "Tags";
 var global$2 = {
+	add: "Add",
+	note: "Note",
+	number: "Number",
+	email: "Email",
+	phones: "Phones",
+	close: "Close",
 	back: "Back",
+	createNew: "Create new",
+	"delete": "Delete",
+	cancel: "Cancel",
 	save: "Save",
 	noOptions: "No options",
 	noValue: "No value",
-	birthdate: "Birthdate"
+	birthdate: "Birthdate",
+	country: "Country"
 };
 var avatar$1 = {
 	upload: "Upload photo",
@@ -15325,18 +15329,12 @@ var conversations$1 = {
 	}
 };
 var en = {
-	add: add$1,
-	close: close$1,
 	labels: labels$1,
 	phone: phone$1,
-	phones: phones$1,
-	number: number$1,
 	business: business$1,
 	businessMembers: businessMembers$1,
 	properties: properties$1,
-	note: note$1,
 	view: view$1,
-	email: email$1,
 	tags: tags$1,
 	global: global$2,
 	avatar: avatar$1,
@@ -15344,25 +15342,29 @@ var en = {
 	conversations: conversations$1
 };
 
-var add = "Agregar";
-var close = "Cerrar";
 var labels = "Etiquetas";
 var phone = "Teléfono";
-var phones = "Teléfonos";
-var number = "Número";
 var business = "Empresa";
 var businessMembers = "Miembros de la empresa";
 var properties = "Propiedades";
-var note = "Nota";
 var view = "Ver";
-var email = "Correo Electrónico";
 var tags = "Etiquetas";
 var global$1 = {
+	add: "Agregar",
+	note: "Nota",
+	number: "Número",
+	email: "Correo Electrónico",
+	close: "Cerrar",
+	phones: "Teléfonos",
+	"delete": "Eliminar",
+	cancel: "Cancelar",
+	createNew: "Crear nuevo",
 	back: "Atrás",
 	save: "Guardar",
 	noOptions: "Sin opciones",
 	noValue: "Sin valor",
-	birthdate: "Fecha de nacimiento"
+	birthdate: "Fecha de nacimiento",
+	country: "País"
 };
 var avatar = {
 	upload: "Subir foto",
@@ -15397,18 +15399,12 @@ var conversations = {
 	}
 };
 var es = {
-	add: add,
-	close: close,
 	labels: labels,
 	phone: phone,
-	phones: phones,
-	number: number,
 	business: business,
 	businessMembers: businessMembers,
 	properties: properties,
-	note: note,
 	view: view,
-	email: email,
 	tags: tags,
 	global: global$1,
 	avatar: avatar,
@@ -24831,10 +24827,11 @@ Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
 const PAGE_SIZE = 20;
-const AutocompletePopper = styled$3(MuiPopper)(({ theme }) => ({
-    zIndex: theme.zIndex.modal + 1,
-}));
-const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCreateNew, isCreatingNew, }) => {
+const AutocompletePopper = (props) => {
+    const { popperContainer, ...rest } = props;
+    return (jsxRuntimeExports.jsx(MuiPopper, { ...rest, container: popperContainer ?? rest.container, style: { ...(rest.style ?? {}), zIndex: 20000 } }));
+};
+const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCreateNew, isCreatingNew, popperContainer, }) => {
     const t = useTranslationContext();
     const [searchValue, setSearchValue] = useState('');
     const [limit, setLimit] = useState(PAGE_SIZE);
@@ -24859,7 +24856,7 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, onCrea
                 alignItems: 'center',
             }, children: [t('global.noOptions'), jsxRuntimeExports.jsx(LoadingButton$1, { onClick: () => onCreateNew(trimmedSearchValue), loading: isCreatingNew, disabled: isDisabled, variant: "contained", size: "small", sx: { marginTop: 1.3 }, children: t('global.createNew') })] }));
     };
-    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$b, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$a, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, disablePortal: false, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: AutocompletePopper, renderOption: (props, option) => jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' }), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip$2, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(TextField$1, { ...params, size: "small" }), ListboxProps: {
+    return (jsxRuntimeExports.jsxs(Box$2, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack$2, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton$2, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$b, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography$2, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box$2, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1$a, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, disablePortal: false, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), PopperComponent: (props) => (jsxRuntimeExports.jsx(AutocompletePopper, { ...props, popperContainer: popperContainer })), renderOption: (props, option) => jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' }), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip$2, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(TextField$1, { ...params, size: "small" }), ListboxProps: {
                     onScroll: onListboxScroll,
                     sx: { maxHeight: 280, overflowY: 'auto' },
                 }, noOptionsText: jsxRuntimeExports.jsx(CustomNoOptionsMessage, {}), sx: { width: '100%' } })] }));
@@ -54941,15 +54938,26 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
             return;
         const check = () => {
             const next = el.scrollWidth > el.clientWidth;
-            setIsTitleTruncated(next);
+            setIsTitleTruncated((prev) => (prev === next ? prev : next));
         };
         check();
         if (typeof ResizeObserver !== 'undefined') {
+            let rafId = 0;
             const ro = new ResizeObserver(() => {
-                check();
+                if (typeof window === 'undefined') {
+                    check();
+                    return;
+                }
+                if (rafId)
+                    window.cancelAnimationFrame(rafId);
+                rafId = window.requestAnimationFrame(() => {
+                    check();
+                });
             });
             ro.observe(el);
             return () => {
+                if (typeof window !== 'undefined' && rafId)
+                    window.cancelAnimationFrame(rafId);
                 ro.disconnect();
             };
         }
@@ -54959,7 +54967,7 @@ const EntityCustomFieldLabel = ({ property, entity, entityType, entityId, custom
         return () => {
             window.removeEventListener('resize', check);
         };
-    }, [customContactFields, property.nameKey, isEditing]);
+    }, [customContactFields, property.nameKey]);
     const handleInputChange = (name, value) => {
         const updatedValue = property.type === Contacts.ContactField_type.DATERANGE
             ? Array.isArray(value) && value[0] && value[1]
@@ -56668,7 +56676,6 @@ const StyledBox = styled$5(Box$2)(({ theme }) => ({
 const StyledTypography = styled$5(Typography$2)(({}) => ({
     letterSpacing: -0.5,
     fontSize: 14,
-    fontWeight: 600,
 }));
 const HeaderBox = styled$5(Box$2)(({}) => ({
     display: 'flex',
@@ -57665,6 +57672,7 @@ const useModalCloseHandler = ({ onClose }) => {
 
 const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
     const { t: i18nT, i18n } = useTranslation();
+    const modalContentRef = useRef(null);
     useEffect(() => {
         if (language) {
             i18n.changeLanguage(language);
@@ -57723,16 +57731,16 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, lang
         boxShadow: 24,
         outline: 0,
         p: 3,
-        overflow: 'hidden',
+        overflow: 'visible',
     };
     const mergedSx = Array.isArray(sx) ? [baseSx, ...sx] : sx ? [baseSx, sx] : baseSx;
-    return (jsxRuntimeExports.jsx(EditContactApiProvider, { value: api, children: jsxRuntimeExports.jsx(TranslationProvider, { t: t, children: jsxRuntimeExports.jsx(NavigateProvider, { navigate: navigate, children: jsxRuntimeExports.jsx(Modal$2, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: Backdrop$2 }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(Fade$2, { in: open, timeout: 200, children: jsxRuntimeExports.jsxs(Box$2, { sx: mergedSx, children: [jsxRuntimeExports.jsx(IconButton$2, { "aria-label": "close", onClick: handleClose, sx: {
+    return (jsxRuntimeExports.jsx(EditContactApiProvider, { value: api, children: jsxRuntimeExports.jsx(TranslationProvider, { t: t, children: jsxRuntimeExports.jsx(NavigateProvider, { navigate: navigate, children: jsxRuntimeExports.jsx(Modal$2, { open: open, onClose: handleClose, closeAfterTransition: true, slots: { backdrop: Backdrop$2 }, slotProps: { backdrop: { timeout: 200 } }, children: jsxRuntimeExports.jsx(Fade$2, { in: open, timeout: 200, children: jsxRuntimeExports.jsxs(Box$2, { sx: mergedSx, ref: modalContentRef, children: [jsxRuntimeExports.jsx(IconButton$2, { "aria-label": "close", onClick: handleClose, sx: {
                                         position: 'absolute',
-                                        right: 8,
-                                        top: 8,
+                                        right: 5,
+                                        top: 5,
                                         color: (theme) => theme.palette.grey[500],
                                         zIndex: 1,
-                                    }, children: jsxRuntimeExports.jsx(default_1$g, {}) }), state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(Box$2, { sx: {
+                                    }, size: "small", children: jsxRuntimeExports.jsx(default_1$g, { sx: { fontSize: 20 } }) }), state.isLoading && !state.contactData ? (jsxRuntimeExports.jsx(Box$2, { sx: {
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
@@ -57745,7 +57753,7 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, lang
                                                                         : 'contact', entityData: state.contactData, customContactFields: selectors.contactFields, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated, currentUser: selectors.userTrii }), jsxRuntimeExports.jsx(AddressInformation, { entityType: selectors.contactType === 'contact' ||
                                                                         selectors.contactType === 'business'
                                                                         ? selectors.contactType
-                                                                        : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: labelsOptions, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, onCreateNew: handleCreateLabel, isCreatingNew: isCreatingLabel }) }) })] }) })) : null] }) }) }) }) }) }));
+                                                                        : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(Fade$2, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box$2, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: labelsOptions, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, onCreateNew: handleCreateLabel, isCreatingNew: isCreatingLabel, popperContainer: modalContentRef.current }) }) })] }) })) : null] }) }) }) }) }) }));
 };
 
 export { ContactInfoPopup, EditContactModal };