@trii/components 2.0.28 → 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 +45 -32
- 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 +46 -33
- 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
package/dist/cjs/index.js
CHANGED
|
@@ -15033,27 +15033,37 @@ const Tags = ({ tags, t, onEditTags }) => {
|
|
|
15033
15033
|
};
|
|
15034
15034
|
const open = Boolean(anchorEl);
|
|
15035
15035
|
return (jsxRuntimeExports.jsxs(material.Box, { sx: {
|
|
15036
|
-
width: '100%',
|
|
15037
15036
|
mt: 1,
|
|
15038
|
-
|
|
15039
|
-
'
|
|
15040
|
-
|
|
15041
|
-
|
|
15042
|
-
|
|
15043
|
-
|
|
15044
|
-
|
|
15045
|
-
|
|
15046
|
-
|
|
15047
|
-
|
|
15048
|
-
|
|
15049
|
-
|
|
15050
|
-
|
|
15051
|
-
|
|
15052
|
-
|
|
15053
|
-
|
|
15054
|
-
|
|
15055
|
-
|
|
15056
|
-
|
|
15037
|
+
display: 'flex',
|
|
15038
|
+
justifyContent: 'center',
|
|
15039
|
+
}, children: [jsxRuntimeExports.jsxs(material.Box, { sx: {
|
|
15040
|
+
maxWidth: 320,
|
|
15041
|
+
pr: 4,
|
|
15042
|
+
position: 'relative',
|
|
15043
|
+
'&:hover .tags-action, &:focus-within .tags-action': {
|
|
15044
|
+
opacity: 1,
|
|
15045
|
+
},
|
|
15046
|
+
}, children: [jsxRuntimeExports.jsxs(material.Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", justifyContent: "center", children: [visibleTags.map((tag) => (jsxRuntimeExports.jsx(material.Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
|
|
15047
|
+
borderRadius: 999,
|
|
15048
|
+
maxWidth: 140,
|
|
15049
|
+
'& .MuiChip-label': {
|
|
15050
|
+
overflow: 'hidden',
|
|
15051
|
+
textOverflow: 'ellipsis',
|
|
15052
|
+
},
|
|
15053
|
+
} }, tag.id))), hiddenCount > 0 ? (jsxRuntimeExports.jsx(material.Chip, { label: `+${hiddenCount}`, size: "small", variant: "outlined", onClick: handleOpen, sx: { borderRadius: 999 } })) : null] }), jsxRuntimeExports.jsx(material.IconButton, { className: "tags-action", size: "small", "aria-label": safeTags.length ? t('tags.edit') : t('tags.add'), onClick: onEditTags, sx: {
|
|
15054
|
+
position: 'absolute',
|
|
15055
|
+
right: 0,
|
|
15056
|
+
top: '50%',
|
|
15057
|
+
transform: 'translateY(-50%)',
|
|
15058
|
+
color: 'text.secondary',
|
|
15059
|
+
bgcolor: 'background.paper',
|
|
15060
|
+
opacity: 0,
|
|
15061
|
+
transition: 'opacity 0.2s ease-in-out',
|
|
15062
|
+
'&:hover': {
|
|
15063
|
+
bgcolor: 'action.hover',
|
|
15064
|
+
color: 'text.primary',
|
|
15065
|
+
},
|
|
15066
|
+
}, children: safeTags.length ? (jsxRuntimeExports.jsx(default_1$5, { fontSize: "small" })) : (jsxRuntimeExports.jsx(default_1$4, { fontSize: "small" })) })] }), jsxRuntimeExports.jsx(material.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(material.Box, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(material.Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(material.Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
|
|
15057
15067
|
borderRadius: 999,
|
|
15058
15068
|
maxWidth: 160,
|
|
15059
15069
|
'& .MuiChip-label': {
|
|
@@ -15133,14 +15143,15 @@ const HeaderContainer = material.styled(material.Box)({
|
|
|
15133
15143
|
display: 'flex',
|
|
15134
15144
|
flexDirection: 'column',
|
|
15135
15145
|
alignItems: 'center',
|
|
15136
|
-
|
|
15146
|
+
gap: '4px',
|
|
15147
|
+
marginBottom: '20px',
|
|
15137
15148
|
position: 'relative',
|
|
15138
15149
|
});
|
|
15139
15150
|
const ContactName = material.styled(material.Typography)({
|
|
15140
15151
|
whiteSpace: 'nowrap',
|
|
15141
15152
|
overflow: 'hidden',
|
|
15142
15153
|
textOverflow: 'ellipsis',
|
|
15143
|
-
maxWidth:
|
|
15154
|
+
maxWidth: 360,
|
|
15144
15155
|
textAlign: 'center',
|
|
15145
15156
|
});
|
|
15146
15157
|
const Header = ({ imgUrl, displayName, onError, tags, t, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
|
|
@@ -15221,13 +15232,13 @@ async function fetchLabels({ baseUrl, spaceId, signal }) {
|
|
|
15221
15232
|
}
|
|
15222
15233
|
async function fetchContact({ baseUrl, spaceId, contactId, signal }) {
|
|
15223
15234
|
const urls = getApiUrls(baseUrl, spaceId);
|
|
15224
|
-
const url = joinUrl(urls.CONTACTS,
|
|
15235
|
+
const url = joinUrl(urls.CONTACTS, `/contacts/${encodeURIComponent(contactId)}`);
|
|
15225
15236
|
return requestJson({ url, signal });
|
|
15226
15237
|
}
|
|
15227
15238
|
async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }) {
|
|
15228
15239
|
const path = entityType === 'business'
|
|
15229
15240
|
? `/business/${encodeURIComponent(entityId)}`
|
|
15230
|
-
:
|
|
15241
|
+
: `/contacts/${encodeURIComponent(entityId)}`;
|
|
15231
15242
|
const urls = getApiUrls(baseUrl, spaceId);
|
|
15232
15243
|
const url = joinUrl(urls.CONTACTS, path);
|
|
15233
15244
|
return requestJson({ url, method: 'PUT', body, signal });
|
|
@@ -15235,7 +15246,7 @@ async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, sign
|
|
|
15235
15246
|
async function deleteEntityPhoto({ baseUrl, spaceId, entityType, entityId, signal }) {
|
|
15236
15247
|
const path = entityType === 'business'
|
|
15237
15248
|
? `/business/${encodeURIComponent(entityId)}/photo`
|
|
15238
|
-
:
|
|
15249
|
+
: `/contacts/${encodeURIComponent(entityId)}/photo`;
|
|
15239
15250
|
const urls = getApiUrls(baseUrl, spaceId);
|
|
15240
15251
|
const url = joinUrl(urls.CONTACTS, path);
|
|
15241
15252
|
return requestJson({ url, method: 'DELETE', signal });
|
|
@@ -17491,7 +17502,7 @@ const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, t }) =
|
|
|
17491
17502
|
if (nearBottom)
|
|
17492
17503
|
setLimit((l) => l + PAGE_SIZE);
|
|
17493
17504
|
};
|
|
17494
|
-
return (jsxRuntimeExports.jsxs(material.Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(material.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(material.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(material.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(material.Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small",
|
|
17505
|
+
return (jsxRuntimeExports.jsxs(material.Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(material.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(material.IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(material.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(material.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(material.Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", renderInput: (params) => jsxRuntimeExports.jsx(material.TextField, { ...params, size: "small" }), ListboxProps: {
|
|
17495
17506
|
onScroll: onListboxScroll,
|
|
17496
17507
|
sx: { maxHeight: 280, overflowY: 'auto' },
|
|
17497
17508
|
}, noOptionsText: t('global.noOptions'), sx: { width: '100%' } })] }));
|
|
@@ -17729,12 +17740,14 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
|
|
|
17729
17740
|
top: '50%',
|
|
17730
17741
|
left: '50%',
|
|
17731
17742
|
transform: 'translate(-50%, -50%)',
|
|
17732
|
-
width: 'min(
|
|
17743
|
+
width: 'min(640px, calc(100vw - 32px))',
|
|
17744
|
+
height: 'min(560px, calc(100vh - 64px))',
|
|
17733
17745
|
bgcolor: 'background.paper',
|
|
17734
|
-
borderRadius:
|
|
17746
|
+
borderRadius: 3,
|
|
17735
17747
|
boxShadow: 24,
|
|
17736
17748
|
outline: 0,
|
|
17737
|
-
p:
|
|
17749
|
+
p: 3,
|
|
17750
|
+
overflow: 'hidden',
|
|
17738
17751
|
};
|
|
17739
17752
|
const mergedSx = Array.isArray(sx)
|
|
17740
17753
|
? [baseSx, ...sx]
|
|
@@ -17745,10 +17758,10 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }
|
|
|
17745
17758
|
display: 'flex',
|
|
17746
17759
|
justifyContent: 'center',
|
|
17747
17760
|
alignItems: 'center',
|
|
17748
|
-
minHeight:
|
|
17749
|
-
}, children: jsxRuntimeExports.jsx(material.CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(material.Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(material.Box, { sx: { position: 'relative',
|
|
17761
|
+
minHeight: 220,
|
|
17762
|
+
}, children: jsxRuntimeExports.jsx(material.CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(material.Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(material.Box, { sx: { position: 'relative', height: '100%' }, children: [jsxRuntimeExports.jsx(material.Fade, { in: view === 'main', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(material.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: () => {
|
|
17750
17763
|
setView('tags');
|
|
17751
|
-
}, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsx(material.Box, { sx: { minHeight: 120 } })] }) }), jsxRuntimeExports.jsx(material.
|
|
17764
|
+
}, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsx(material.Box, { sx: { minHeight: 120 } })] }) }), jsxRuntimeExports.jsx(material.Fade, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(material.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 }) }) }));
|
|
17752
17765
|
};
|
|
17753
17766
|
|
|
17754
17767
|
exports.ContactInfoPopup = ContactInfoPopup;
|