@trackunit/react-compound-components 0.0.201 → 0.0.203
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/index.cjs.js +3 -3
- package/index.esm.js +3 -3
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -233,9 +233,9 @@ const ImageCollection = (props) => {
|
|
|
233
233
|
setIsDeleting(false);
|
|
234
234
|
}
|
|
235
235
|
}, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
|
|
236
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imageIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); },
|
|
236
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imageIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); },
|
|
237
237
|
// Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
|
|
238
|
-
onClick:
|
|
238
|
+
onClick: e => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet,
|
|
239
239
|
// Typing of the library is not flexible enough to add id, which is only used for the unit tests
|
|
240
240
|
// @ts-ignore
|
|
241
241
|
id, }) => (jsxRuntime.jsx("img", { alt: "full", className: tailwindMerge.twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail,
|
|
@@ -243,7 +243,7 @@ const ImageCollection = (props) => {
|
|
|
243
243
|
// @ts-ignore
|
|
244
244
|
id, }) => jsxRuntime.jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768,
|
|
245
245
|
// reduce sliding around during deletion
|
|
246
|
-
slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsxRuntime.jsx(reactComponents.Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsxRuntime.jsx(reactComponents.EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsxRuntime.jsx("input", {
|
|
246
|
+
slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsxRuntime.jsx(reactComponents.Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsxRuntime.jsx(reactComponents.EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsxRuntime.jsx("input", {
|
|
247
247
|
// Users can still select other files on mobile devices
|
|
248
248
|
accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
|
|
249
249
|
if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
|
package/index.esm.js
CHANGED
|
@@ -213,9 +213,9 @@ const ImageCollection = (props) => {
|
|
|
213
213
|
setIsDeleting(false);
|
|
214
214
|
}
|
|
215
215
|
}, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
|
|
216
|
-
return (jsxs(Fragment, { children: [imageIds.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); },
|
|
216
|
+
return (jsxs(Fragment, { children: [imageIds.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); },
|
|
217
217
|
// Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
|
|
218
|
-
onClick:
|
|
218
|
+
onClick: e => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet,
|
|
219
219
|
// Typing of the library is not flexible enough to add id, which is only used for the unit tests
|
|
220
220
|
// @ts-ignore
|
|
221
221
|
id, }) => (jsx("img", { alt: "full", className: twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail,
|
|
@@ -223,7 +223,7 @@ const ImageCollection = (props) => {
|
|
|
223
223
|
// @ts-ignore
|
|
224
224
|
id, }) => jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768,
|
|
225
225
|
// reduce sliding around during deletion
|
|
226
|
-
slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsx(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsx(EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsx("input", {
|
|
226
|
+
slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsx(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : (jsx(EmptyState, { action: ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel }))) : null, description: emptyPlaceholderText })), jsx("input", {
|
|
227
227
|
// Users can still select other files on mobile devices
|
|
228
228
|
accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
|
|
229
229
|
if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
|