@trii/components 2.0.29 → 2.0.30
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.
- package/dist/cjs/index.js +44 -31
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/EditContactModal/services/api.d.ts +0 -8
- package/dist/esm/index.js +45 -32
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/EditContactModal/services/api.d.ts +0 -8
- package/package.json +1 -1
|
@@ -33,14 +33,6 @@ type DeleteEntityPhotoArgs = {
|
|
|
33
33
|
signal?: AbortSignal;
|
|
34
34
|
};
|
|
35
35
|
export declare function deleteEntityPhoto({ baseUrl, spaceId, entityType, entityId, signal }: DeleteEntityPhotoArgs): Promise<unknown>;
|
|
36
|
-
type UpdateContactArgs = {
|
|
37
|
-
baseUrl: string;
|
|
38
|
-
spaceId: string;
|
|
39
|
-
contactId: string;
|
|
40
|
-
patch: Partial<IContact> | Partial<IBusiness>;
|
|
41
|
-
signal?: AbortSignal;
|
|
42
|
-
};
|
|
43
|
-
export declare function updateContact({ baseUrl, spaceId, contactId, patch, signal }: UpdateContactArgs): Promise<IContact | IBusiness>;
|
|
44
36
|
type FetchSettingsUserArgs = {
|
|
45
37
|
baseUrl: string;
|
|
46
38
|
spaceId: string;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { useCallback, useEffect, useState, useMemo, useRef, Children, isValidElement, cloneElement } from 'react';
|
|
3
|
-
import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress as CircularProgress$2, Tooltip, Chip, Popper, ClickAwayListener, CardContent, Stack, Popover, Autocomplete, TextField, Modal, Backdrop, Fade
|
|
3
|
+
import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress as CircularProgress$2, Tooltip, Chip, Popper, ClickAwayListener, CardContent, Stack, Popover, Autocomplete, TextField, Modal, Backdrop, Fade } from '@mui/material';
|
|
4
4
|
import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
|
|
5
5
|
|
|
6
6
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -15013,27 +15013,37 @@ const Tags = ({ tags, t, onEditTags }) => {
|
|
|
15013
15013
|
};
|
|
15014
15014
|
const open = Boolean(anchorEl);
|
|
15015
15015
|
return (jsxRuntimeExports.jsxs(Box, { sx: {
|
|
15016
|
-
width: '100%',
|
|
15017
15016
|
mt: 1,
|
|
15018
|
-
|
|
15019
|
-
'
|
|
15020
|
-
|
|
15021
|
-
|
|
15022
|
-
|
|
15023
|
-
|
|
15024
|
-
|
|
15025
|
-
|
|
15026
|
-
|
|
15027
|
-
|
|
15028
|
-
|
|
15029
|
-
|
|
15030
|
-
|
|
15031
|
-
|
|
15032
|
-
|
|
15033
|
-
|
|
15034
|
-
|
|
15035
|
-
|
|
15036
|
-
|
|
15017
|
+
display: 'flex',
|
|
15018
|
+
justifyContent: 'center',
|
|
15019
|
+
}, children: [jsxRuntimeExports.jsxs(Box, { sx: {
|
|
15020
|
+
maxWidth: 320,
|
|
15021
|
+
pr: 4,
|
|
15022
|
+
position: 'relative',
|
|
15023
|
+
'&:hover .tags-action, &:focus-within .tags-action': {
|
|
15024
|
+
opacity: 1,
|
|
15025
|
+
},
|
|
15026
|
+
}, children: [jsxRuntimeExports.jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", justifyContent: "center", children: [visibleTags.map((tag) => (jsxRuntimeExports.jsx(Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
|
|
15027
|
+
borderRadius: 999,
|
|
15028
|
+
maxWidth: 140,
|
|
15029
|
+
'& .MuiChip-label': {
|
|
15030
|
+
overflow: 'hidden',
|
|
15031
|
+
textOverflow: 'ellipsis',
|
|
15032
|
+
},
|
|
15033
|
+
} }, tag.id))), hiddenCount > 0 ? (jsxRuntimeExports.jsx(Chip, { label: `+${hiddenCount}`, size: "small", variant: "outlined", onClick: handleOpen, sx: { borderRadius: 999 } })) : null] }), jsxRuntimeExports.jsx(IconButton, { className: "tags-action", size: "small", "aria-label": safeTags.length ? t('tags.edit') : t('tags.add'), onClick: onEditTags, sx: {
|
|
15034
|
+
position: 'absolute',
|
|
15035
|
+
right: 0,
|
|
15036
|
+
top: '50%',
|
|
15037
|
+
transform: 'translateY(-50%)',
|
|
15038
|
+
color: 'text.secondary',
|
|
15039
|
+
bgcolor: 'background.paper',
|
|
15040
|
+
opacity: 0,
|
|
15041
|
+
transition: 'opacity 0.2s ease-in-out',
|
|
15042
|
+
'&:hover': {
|
|
15043
|
+
bgcolor: 'action.hover',
|
|
15044
|
+
color: 'text.primary',
|
|
15045
|
+
},
|
|
15046
|
+
}, children: safeTags.length ? (jsxRuntimeExports.jsx(default_1$5, { fontSize: "small" })) : (jsxRuntimeExports.jsx(default_1$4, { fontSize: "small" })) })] }), jsxRuntimeExports.jsx(Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(Box, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
|
|
15037
15047
|
borderRadius: 999,
|
|
15038
15048
|
maxWidth: 160,
|
|
15039
15049
|
'& .MuiChip-label': {
|
|
@@ -15113,14 +15123,15 @@ const HeaderContainer = styled$3(Box)({
|
|
|
15113
15123
|
display: 'flex',
|
|
15114
15124
|
flexDirection: 'column',
|
|
15115
15125
|
alignItems: 'center',
|
|
15116
|
-
|
|
15126
|
+
gap: '4px',
|
|
15127
|
+
marginBottom: '20px',
|
|
15117
15128
|
position: 'relative',
|
|
15118
15129
|
});
|
|
15119
15130
|
const ContactName = styled$3(Typography)({
|
|
15120
15131
|
whiteSpace: 'nowrap',
|
|
15121
15132
|
overflow: 'hidden',
|
|
15122
15133
|
textOverflow: 'ellipsis',
|
|
15123
|
-
maxWidth:
|
|
15134
|
+
maxWidth: 360,
|
|
15124
15135
|
textAlign: 'center',
|
|
15125
15136
|
});
|
|
15126
15137
|
const Header = ({ imgUrl, displayName, onError, tags, t, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
|
|
@@ -15207,7 +15218,7 @@ async function fetchContact({ baseUrl, spaceId, contactId, signal }) {
|
|
|
15207
15218
|
async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }) {
|
|
15208
15219
|
const path = entityType === 'business'
|
|
15209
15220
|
? `/business/${encodeURIComponent(entityId)}`
|
|
15210
|
-
:
|
|
15221
|
+
: `/contacts/${encodeURIComponent(entityId)}`;
|
|
15211
15222
|
const urls = getApiUrls(baseUrl, spaceId);
|
|
15212
15223
|
const url = joinUrl(urls.CONTACTS, path);
|
|
15213
15224
|
return requestJson({ url, method: 'PUT', body, signal });
|
|
@@ -15215,7 +15226,7 @@ async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, sign
|
|
|
15215
15226
|
async function deleteEntityPhoto({ baseUrl, spaceId, entityType, entityId, signal }) {
|
|
15216
15227
|
const path = entityType === 'business'
|
|
15217
15228
|
? `/business/${encodeURIComponent(entityId)}/photo`
|
|
15218
|
-
:
|
|
15229
|
+
: `/contacts/${encodeURIComponent(entityId)}/photo`;
|
|
15219
15230
|
const urls = getApiUrls(baseUrl, spaceId);
|
|
15220
15231
|
const url = joinUrl(urls.CONTACTS, path);
|
|
15221
15232
|
return requestJson({ url, method: 'DELETE', signal });
|
|
@@ -17471,7 +17482,7 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, t }) =
|
|
|
17471
17482
|
if (nearBottom)
|
|
17472
17483
|
setLimit((l) => l + PAGE_SIZE);
|
|
17473
17484
|
};
|
|
17474
|
-
return (jsxRuntimeExports.jsxs(Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, 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), renderOption: (props, option) => (jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' })), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small",
|
|
17485
|
+
return (jsxRuntimeExports.jsxs(Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, 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), renderOption: (props, option) => (jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' })), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(TextField, { ...params, size: "small" }), ListboxProps: {
|
|
17475
17486
|
onScroll: onListboxScroll,
|
|
17476
17487
|
sx: { maxHeight: 280, overflowY: 'auto' },
|
|
17477
17488
|
}, noOptionsText: t('global.noOptions'), sx: { width: '100%' } })] }));
|
|
@@ -17709,12 +17720,14 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
|
|
|
17709
17720
|
top: '50%',
|
|
17710
17721
|
left: '50%',
|
|
17711
17722
|
transform: 'translate(-50%, -50%)',
|
|
17712
|
-
width: 'min(
|
|
17723
|
+
width: 'min(640px, calc(100vw - 32px))',
|
|
17724
|
+
height: 'min(560px, calc(100vh - 64px))',
|
|
17713
17725
|
bgcolor: 'background.paper',
|
|
17714
|
-
borderRadius:
|
|
17726
|
+
borderRadius: 3,
|
|
17715
17727
|
boxShadow: 24,
|
|
17716
17728
|
outline: 0,
|
|
17717
|
-
p:
|
|
17729
|
+
p: 3,
|
|
17730
|
+
overflow: 'hidden',
|
|
17718
17731
|
};
|
|
17719
17732
|
const mergedSx = Array.isArray(sx)
|
|
17720
17733
|
? [baseSx, ...sx]
|
|
@@ -17725,10 +17738,10 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
|
|
|
17725
17738
|
display: 'flex',
|
|
17726
17739
|
justifyContent: 'center',
|
|
17727
17740
|
alignItems: 'center',
|
|
17728
|
-
minHeight:
|
|
17729
|
-
}, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(Box, { sx: { position: 'relative',
|
|
17741
|
+
minHeight: 220,
|
|
17742
|
+
}, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(Box, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(Fade, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(Box, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Header, { imgUrl: image.imageUrl, displayName: selectors.displayName, tags: selectors.tags, t: t, onEditTags: () => {
|
|
17730
17743
|
setView('tags');
|
|
17731
|
-
}, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsx(Box, { sx: { minHeight: 120 } })] }) }), jsxRuntimeExports.jsx(
|
|
17744
|
+
}, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsx(Box, { sx: { minHeight: 120 } })] }) }), jsxRuntimeExports.jsx(Fade, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, t: t }) }) })] }) })) : null }) }) }));
|
|
17732
17745
|
};
|
|
17733
17746
|
|
|
17734
17747
|
export { ContactInfoPopup, EditContactModal };
|