@appquality/unguess-design-system 3.1.106-attachments → 3.1.108-attachments
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/build/index.js +15 -18
- package/build/stories/buttons/button/index.stories.d.ts +1 -0
- package/build/stories/buttons/utils.d.ts +39 -39
- package/build/stories/chat/_types.d.ts +5 -3
- package/build/stories/chat/context/chatContext.d.ts +4 -4
- package/build/stories/chat/hooks/useMedia.d.ts +5 -2
- package/build/stories/chat/index.stories.d.ts +3 -3
- package/build/stories/chat/parts/MediaLightbox.d.ts +2 -2
- package/build/stories/chat/parts/ThumbnailContainer/Thumbnail.d.ts +1 -1
- package/build/stories/chat/parts/ThumbnailContainer/index.d.ts +1 -1
- package/build/stories/chat/parts/comment.d.ts +2 -2
- package/build/stories/dropdowns/select/index.stories.d.ts +1 -0
- package/build/stories/editor/index.stories.d.ts +1 -0
- package/build/stories/highlight/index.stories.d.ts +1 -0
- package/build/stories/player/index.stories.d.ts +1 -0
- package/package.json +1 -1
- package/yarn-error.log +17994 -0
- package/.vscode/settings.json +0 -3
package/build/index.js
CHANGED
|
@@ -2339,7 +2339,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
|
|
|
2339
2339
|
setThumbnails,
|
|
2340
2340
|
afterUploadCallback: (failed) => {
|
|
2341
2341
|
setThumbnails(thumbnails.map((file) => {
|
|
2342
|
-
if (failed.includes(file.
|
|
2342
|
+
if (failed.includes(file.id)) {
|
|
2343
2343
|
file.isLoadingMedia = false;
|
|
2344
2344
|
//file.isError = true;
|
|
2345
2345
|
}
|
|
@@ -2359,7 +2359,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
|
|
|
2359
2359
|
setThumbnails((prev) => {
|
|
2360
2360
|
return prev.map((file) => {
|
|
2361
2361
|
file.isLoadingMedia = false;
|
|
2362
|
-
if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.
|
|
2362
|
+
if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.id)) {
|
|
2363
2363
|
file.isError = true;
|
|
2364
2364
|
}
|
|
2365
2365
|
else {
|
|
@@ -3056,8 +3056,9 @@ function useMedia() {
|
|
|
3056
3056
|
function getMedia(data) {
|
|
3057
3057
|
return getValidMedia(data).map((file) => {
|
|
3058
3058
|
return Object.assign(file, {
|
|
3059
|
+
url: URL.createObjectURL(file),
|
|
3059
3060
|
isLoadingMedia: true,
|
|
3060
|
-
|
|
3061
|
+
id: uuid.v4(),
|
|
3061
3062
|
});
|
|
3062
3063
|
});
|
|
3063
3064
|
}
|
|
@@ -3517,8 +3518,8 @@ const ThumbnailContainer = ({ openLightbox }) => {
|
|
|
3517
3518
|
return thumbnails.map((file) => ({
|
|
3518
3519
|
fileName: file.name,
|
|
3519
3520
|
fileType: file.type,
|
|
3520
|
-
previewUrl:
|
|
3521
|
-
|
|
3521
|
+
previewUrl: file.url,
|
|
3522
|
+
id: file.id,
|
|
3522
3523
|
isLoadingMedia: file.isLoadingMedia,
|
|
3523
3524
|
}));
|
|
3524
3525
|
}, [thumbnails]);
|
|
@@ -3527,10 +3528,10 @@ const ThumbnailContainer = ({ openLightbox }) => {
|
|
|
3527
3528
|
}
|
|
3528
3529
|
return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
|
|
3529
3530
|
removeThumbnail(index);
|
|
3530
|
-
onDeleteThumbnail(file.
|
|
3531
|
+
onDeleteThumbnail(file.id);
|
|
3531
3532
|
}, clickThumbnail: () => {
|
|
3532
|
-
openLightbox(
|
|
3533
|
-
} }, file.
|
|
3533
|
+
openLightbox(index);
|
|
3534
|
+
} }, file.id) })))) })) }));
|
|
3534
3535
|
};
|
|
3535
3536
|
|
|
3536
3537
|
const UgModalBody = styled__default["default"](reactModals.Body) `
|
|
@@ -4719,9 +4720,9 @@ const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumb
|
|
|
4719
4720
|
if (!isOpen) {
|
|
4720
4721
|
return null;
|
|
4721
4722
|
}
|
|
4722
|
-
return (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: onClose }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: header }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: details ? 2 : 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: item.url
|
|
4723
|
+
return (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: onClose }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: header }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: details ? 2 : 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: item.url, alt: `media ${item.name}`, style: { maxHeight: "100%", height: "auto" } })), item.type.includes("video") && item.url && (jsxRuntime.jsx(Player, { ref: (ref) => {
|
|
4723
4724
|
videoRefs.current.push(ref);
|
|
4724
|
-
}, url: item.url
|
|
4725
|
+
}, url: item.url }))] }, item.id))) })) })), details && (jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: details })))] }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] })));
|
|
4725
4726
|
};
|
|
4726
4727
|
|
|
4727
4728
|
const ChatBoxContainer = styled__default["default"].div `
|
|
@@ -4768,9 +4769,7 @@ const CommentBox = (_a) => {
|
|
|
4768
4769
|
}
|
|
4769
4770
|
});
|
|
4770
4771
|
}, [videoRefs]);
|
|
4771
|
-
const handleOpenLightbox = (
|
|
4772
|
-
if (!file)
|
|
4773
|
-
throw Error("Error with the image");
|
|
4772
|
+
const handleOpenLightbox = (index) => {
|
|
4774
4773
|
setSelectedImageIndex(index);
|
|
4775
4774
|
setIsOpen(true);
|
|
4776
4775
|
};
|
|
@@ -4848,9 +4847,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
|
|
|
4848
4847
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
4849
4848
|
const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
|
|
4850
4849
|
const ext = editorExtensions({ mentionableUsers });
|
|
4851
|
-
const handleClickThumbnail = (
|
|
4852
|
-
if (!file)
|
|
4853
|
-
throw Error("Error with the image");
|
|
4850
|
+
const handleClickThumbnail = (index) => {
|
|
4854
4851
|
setSelectedImageIndex(index);
|
|
4855
4852
|
setIsOpen(true);
|
|
4856
4853
|
};
|
|
@@ -4875,8 +4872,8 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
|
|
|
4875
4872
|
ed.setOptions({
|
|
4876
4873
|
editable: false,
|
|
4877
4874
|
});
|
|
4878
|
-
return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.url
|
|
4879
|
-
handleClickThumbnail(
|
|
4875
|
+
return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.url, type: file.type, showX: false, isLoadingMedia: false, clickThumbnail: () => {
|
|
4876
|
+
handleClickThumbnail(index);
|
|
4880
4877
|
} }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
|
|
4881
4878
|
avatar: author.avatar,
|
|
4882
4879
|
name: author.name,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ButtonArgs } from "./_types";
|
|
2
3
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
|
|
3
4
|
export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
|
|
@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
|
|
|
8
8
|
readonly disabled: true;
|
|
9
9
|
}];
|
|
10
10
|
export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
11
|
-
alignItems?: "start" | "
|
|
12
|
-
alignItemsXs?: "start" | "
|
|
13
|
-
alignItemsSm?: "start" | "
|
|
14
|
-
alignItemsMd?: "start" | "
|
|
15
|
-
alignItemsLg?: "start" | "
|
|
16
|
-
alignItemsXl?: "start" | "
|
|
17
|
-
justifyContent?: "start" | "
|
|
18
|
-
justifyContentXs?: "start" | "
|
|
19
|
-
justifyContentSm?: "start" | "
|
|
20
|
-
justifyContentMd?: "start" | "
|
|
21
|
-
justifyContentLg?: "start" | "
|
|
22
|
-
justifyContentXl?: "start" | "
|
|
11
|
+
alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
12
|
+
alignItemsXs?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
13
|
+
alignItemsSm?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
14
|
+
alignItemsMd?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
15
|
+
alignItemsLg?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
16
|
+
alignItemsXl?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
|
|
17
|
+
justifyContent?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
18
|
+
justifyContentXs?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
19
|
+
justifyContentSm?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
20
|
+
justifyContentMd?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
21
|
+
justifyContentLg?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
22
|
+
justifyContentXl?: "start" | "end" | "center" | "between" | "around" | undefined;
|
|
23
23
|
wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
24
24
|
wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
25
25
|
wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
@@ -33,7 +33,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
33
33
|
accessKey?: string | undefined;
|
|
34
34
|
autoFocus?: boolean | undefined;
|
|
35
35
|
className?: string | undefined;
|
|
36
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
36
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
37
37
|
contextMenu?: string | undefined;
|
|
38
38
|
dir?: string | undefined;
|
|
39
39
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
73
73
|
results?: number | undefined;
|
|
74
74
|
security?: string | undefined;
|
|
75
75
|
unselectable?: "on" | "off" | undefined;
|
|
76
|
-
inputMode?: "
|
|
76
|
+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
77
77
|
is?: string | undefined;
|
|
78
78
|
"aria-activedescendant"?: string | undefined;
|
|
79
79
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
84
84
|
"aria-colindex"?: number | undefined;
|
|
85
85
|
"aria-colspan"?: number | undefined;
|
|
86
86
|
"aria-controls"?: string | undefined;
|
|
87
|
-
"aria-current"?: boolean | "
|
|
87
|
+
"aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
|
|
88
88
|
"aria-describedby"?: string | undefined;
|
|
89
89
|
"aria-details"?: string | undefined;
|
|
90
90
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
93
93
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
94
94
|
"aria-flowto"?: string | undefined;
|
|
95
95
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
96
|
-
"aria-haspopup"?: boolean | "
|
|
96
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
97
97
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
98
98
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
99
99
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -110,7 +110,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
|
|
|
110
110
|
"aria-posinset"?: number | undefined;
|
|
111
111
|
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
112
112
|
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
113
|
-
"aria-relevant"?: "text" | "
|
|
113
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
114
114
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
115
115
|
"aria-roledescription"?: string | undefined;
|
|
116
116
|
"aria-rowcount"?: number | undefined;
|
|
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
299
299
|
md?: string | number | boolean | undefined;
|
|
300
300
|
lg?: string | number | boolean | undefined;
|
|
301
301
|
xl?: string | number | boolean | undefined;
|
|
302
|
-
alignSelf?: "start" | "
|
|
303
|
-
alignSelfXs?: "start" | "
|
|
304
|
-
alignSelfSm?: "start" | "
|
|
305
|
-
alignSelfMd?: "start" | "
|
|
306
|
-
alignSelfLg?: "start" | "
|
|
307
|
-
alignSelfXl?: "start" | "
|
|
308
|
-
textAlign?: "start" | "
|
|
309
|
-
textAlignXs?: "start" | "
|
|
310
|
-
textAlignSm?: "start" | "
|
|
311
|
-
textAlignMd?: "start" | "
|
|
312
|
-
textAlignLg?: "start" | "
|
|
313
|
-
textAlignXl?: "start" | "
|
|
302
|
+
alignSelf?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
303
|
+
alignSelfXs?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
304
|
+
alignSelfSm?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
305
|
+
alignSelfMd?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
306
|
+
alignSelfLg?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
307
|
+
alignSelfXl?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
|
|
308
|
+
textAlign?: "start" | "end" | "center" | "justify" | undefined;
|
|
309
|
+
textAlignXs?: "start" | "end" | "center" | "justify" | undefined;
|
|
310
|
+
textAlignSm?: "start" | "end" | "center" | "justify" | undefined;
|
|
311
|
+
textAlignMd?: "start" | "end" | "center" | "justify" | undefined;
|
|
312
|
+
textAlignLg?: "start" | "end" | "center" | "justify" | undefined;
|
|
313
|
+
textAlignXl?: "start" | "end" | "center" | "justify" | undefined;
|
|
314
314
|
offset?: string | number | undefined;
|
|
315
315
|
offsetXs?: string | number | undefined;
|
|
316
316
|
offsetSm?: string | number | undefined;
|
|
@@ -330,7 +330,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
330
330
|
accessKey?: string | undefined;
|
|
331
331
|
autoFocus?: boolean | undefined;
|
|
332
332
|
className?: string | undefined;
|
|
333
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
333
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
334
334
|
contextMenu?: string | undefined;
|
|
335
335
|
dir?: string | undefined;
|
|
336
336
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
370
370
|
results?: number | undefined;
|
|
371
371
|
security?: string | undefined;
|
|
372
372
|
unselectable?: "on" | "off" | undefined;
|
|
373
|
-
inputMode?: "
|
|
373
|
+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
374
374
|
is?: string | undefined;
|
|
375
375
|
"aria-activedescendant"?: string | undefined;
|
|
376
376
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
381
381
|
"aria-colindex"?: number | undefined;
|
|
382
382
|
"aria-colspan"?: number | undefined;
|
|
383
383
|
"aria-controls"?: string | undefined;
|
|
384
|
-
"aria-current"?: boolean | "
|
|
384
|
+
"aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
|
|
385
385
|
"aria-describedby"?: string | undefined;
|
|
386
386
|
"aria-details"?: string | undefined;
|
|
387
387
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
390
390
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
391
391
|
"aria-flowto"?: string | undefined;
|
|
392
392
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
393
|
-
"aria-haspopup"?: boolean | "
|
|
393
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
394
394
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
395
395
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
396
396
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -407,7 +407,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
|
|
|
407
407
|
"aria-posinset"?: number | undefined;
|
|
408
408
|
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
409
409
|
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
410
|
-
"aria-relevant"?: "text" | "
|
|
410
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
411
411
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
412
412
|
"aria-roledescription"?: string | undefined;
|
|
413
413
|
"aria-rowcount"?: number | undefined;
|
|
@@ -600,7 +600,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
600
600
|
accessKey?: string | undefined;
|
|
601
601
|
autoFocus?: boolean | undefined;
|
|
602
602
|
className?: string | undefined;
|
|
603
|
-
contentEditable?: (boolean | "true" | "false") |
|
|
603
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
604
604
|
contextMenu?: string | undefined;
|
|
605
605
|
dir?: string | undefined;
|
|
606
606
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
640
640
|
results?: number | undefined;
|
|
641
641
|
security?: string | undefined;
|
|
642
642
|
unselectable?: "on" | "off" | undefined;
|
|
643
|
-
inputMode?: "
|
|
643
|
+
inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
644
644
|
is?: string | undefined;
|
|
645
645
|
"aria-activedescendant"?: string | undefined;
|
|
646
646
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
651
651
|
"aria-colindex"?: number | undefined;
|
|
652
652
|
"aria-colspan"?: number | undefined;
|
|
653
653
|
"aria-controls"?: string | undefined;
|
|
654
|
-
"aria-current"?: boolean | "
|
|
654
|
+
"aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
|
|
655
655
|
"aria-describedby"?: string | undefined;
|
|
656
656
|
"aria-details"?: string | undefined;
|
|
657
657
|
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
660
660
|
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
661
661
|
"aria-flowto"?: string | undefined;
|
|
662
662
|
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
663
|
-
"aria-haspopup"?: boolean | "
|
|
663
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
664
664
|
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
665
665
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
666
666
|
"aria-keyshortcuts"?: string | undefined;
|
|
@@ -677,7 +677,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
|
|
|
677
677
|
"aria-posinset"?: number | undefined;
|
|
678
678
|
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
679
679
|
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
680
|
-
"aria-relevant"?: "text" | "
|
|
680
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
681
681
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
682
682
|
"aria-roledescription"?: string | undefined;
|
|
683
683
|
"aria-rowcount"?: number | undefined;
|
|
@@ -37,10 +37,12 @@ export interface EditorHeaderArgs {
|
|
|
37
37
|
title?: string;
|
|
38
38
|
validation?: validationStatus;
|
|
39
39
|
}
|
|
40
|
-
export interface
|
|
41
|
-
|
|
40
|
+
export interface CommentMedia {
|
|
41
|
+
id: string;
|
|
42
|
+
type: string;
|
|
43
|
+
name?: string;
|
|
44
|
+
isLoadingMedia?: boolean;
|
|
42
45
|
isError?: boolean;
|
|
43
|
-
internal_id: string;
|
|
44
46
|
url?: string;
|
|
45
47
|
}
|
|
46
48
|
export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Editor } from "@tiptap/react";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { CommentMedia, SuggestedUser } from "../_types";
|
|
4
4
|
export type ChatContextType = {
|
|
5
5
|
triggerSave: () => void;
|
|
6
6
|
editor?: Editor;
|
|
7
7
|
setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
|
|
8
8
|
addThumbnails: (props: {
|
|
9
|
-
files:
|
|
9
|
+
files: (File & CommentMedia)[];
|
|
10
10
|
}) => void;
|
|
11
11
|
removeThumbnail: (index: number) => void;
|
|
12
|
-
thumbnails:
|
|
12
|
+
thumbnails: CommentMedia[];
|
|
13
13
|
mentionableUsers: (props: {
|
|
14
14
|
query: string;
|
|
15
15
|
}) => SuggestedUser[];
|
|
@@ -29,7 +29,7 @@ export interface Data {
|
|
|
29
29
|
}
|
|
30
30
|
export declare const ChatContextProvider: ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }: {
|
|
31
31
|
onSave?: ((editor: Editor, mentions: SuggestedUser[]) => void) | undefined;
|
|
32
|
-
onFileUpload?: ((files:
|
|
32
|
+
onFileUpload?: ((files: File[]) => Promise<Data>) | undefined;
|
|
33
33
|
onDeleteThumbnail: (id: string) => void;
|
|
34
34
|
children: React.ReactNode;
|
|
35
35
|
setMentionableUsers: (props: {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { FileItem } from "../_types";
|
|
2
1
|
export declare const acceptedMediaTypes: RegExp;
|
|
3
2
|
export declare function useMedia(): {
|
|
4
|
-
getMedia: (data: FileList) =>
|
|
3
|
+
getMedia: (data: FileList) => (File & {
|
|
4
|
+
url: string;
|
|
5
|
+
isLoadingMedia: boolean;
|
|
6
|
+
id: string;
|
|
7
|
+
})[];
|
|
5
8
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PlaceholderOptions } from "@tiptap/extension-placeholder";
|
|
2
2
|
import { Editor as TipTapEditor } from "@tiptap/react";
|
|
3
|
-
import { ChatEditorArgs,
|
|
3
|
+
import { ChatEditorArgs, CommentMedia, SuggestedUser } from "./_types";
|
|
4
4
|
import { Data } from "./context/chatContext";
|
|
5
5
|
interface EditorStoryArgs extends ChatEditorArgs {
|
|
6
6
|
children?: any;
|
|
@@ -12,12 +12,12 @@ interface EditorStoryArgs extends ChatEditorArgs {
|
|
|
12
12
|
};
|
|
13
13
|
message: string;
|
|
14
14
|
date: string;
|
|
15
|
-
media?:
|
|
15
|
+
media?: CommentMedia[];
|
|
16
16
|
}[];
|
|
17
17
|
editorText?: string;
|
|
18
18
|
background?: string;
|
|
19
19
|
onSave: (editor: TipTapEditor, mentions: SuggestedUser[]) => void;
|
|
20
|
-
onFileUpload?: (files:
|
|
20
|
+
onFileUpload?: (files: File[]) => Promise<Data>;
|
|
21
21
|
placeholderOptions?: Partial<PlaceholderOptions>;
|
|
22
22
|
}
|
|
23
23
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { CommentMedia } from "../_types";
|
|
3
3
|
interface MediaLightBoxProps {
|
|
4
4
|
isOpen: boolean;
|
|
5
5
|
header: React.ReactNode;
|
|
6
6
|
onClose: () => void;
|
|
7
7
|
slideChange: (index: number) => void;
|
|
8
8
|
selectedImageIndex: number;
|
|
9
|
-
thumbnails:
|
|
9
|
+
thumbnails: CommentMedia[];
|
|
10
10
|
videoRefs: React.MutableRefObject<Array<HTMLVideoElement | null>>;
|
|
11
11
|
details?: React.ReactNode;
|
|
12
12
|
}
|
|
@@ -7,7 +7,7 @@ export interface FileElement {
|
|
|
7
7
|
isLoadingMedia: boolean;
|
|
8
8
|
}
|
|
9
9
|
interface Props {
|
|
10
|
-
openLightbox: (
|
|
10
|
+
openLightbox: (index: number) => void;
|
|
11
11
|
}
|
|
12
12
|
declare const ThumbnailContainer: ({ openLightbox }: Props) => import("react/jsx-runtime").JSX.Element | null;
|
|
13
13
|
export default ThumbnailContainer;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { PropsWithChildren } from "react";
|
|
2
|
-
import { Author,
|
|
2
|
+
import { Author, CommentMedia } from "../_types";
|
|
3
3
|
export declare const Comment: ({ author, message, children, date, media, header, }: PropsWithChildren<{
|
|
4
4
|
author: Author;
|
|
5
5
|
message: string;
|
|
6
6
|
date: string;
|
|
7
|
-
media?:
|
|
7
|
+
media?: CommentMedia[] | undefined;
|
|
8
8
|
header: {
|
|
9
9
|
title: string;
|
|
10
10
|
message?: string | undefined;
|