@trackunit/react-compound-components 0.0.220 → 0.0.222

package/index.cjs.js

@@ -190,7 +190,7 @@ const ImageCollection = (props) => {
     const { imageIds, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
     const [openImageId, setOpenImageId] = React.useState(imageIds[0]);
     const [isDeleting, setIsDeleting] = React.useState(false);
-    const { width } = reactComponents.useResize();
+    const { isLg } = reactComponents.useViewportSize();
     const fileInputRef = React.useRef(null);
     const imageGalleryRef = React.useRef(null);
     const uploadButton = React.useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsx(reactComponents.Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
@@ -242,7 +242,7 @@ const ImageCollection = (props) => {
                         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, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
-                        id, }) => jsxRuntime.jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768, 
+                        id, }) => jsxRuntime.jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: isLg, 
                         // reduce sliding around during deletion
                         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] })) : ((_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, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsxRuntime.jsx("input", { 
                 // Users can still select other files on mobile devices

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
 import * as React from 'react';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { Card, CardHeader, CardBody, CardFooter, Button, useResize, Icon, Spinner } from '@trackunit/react-components';
+import { Card, CardHeader, CardBody, CardFooter, Button, useViewportSize, Icon, Spinner } from '@trackunit/react-components';
 import { Modal } from '@trackunit/react-modal';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import ImageGallery from 'react-image-gallery';
@@ -170,7 +170,7 @@ const ImageCollection = (props) => {
     const { imageIds, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
     const [openImageId, setOpenImageId] = useState(imageIds[0]);
     const [isDeleting, setIsDeleting] = useState(false);
-    const { width } = useResize();
+    const { isLg } = useViewportSize();
     const fileInputRef = useRef(null);
     const imageGalleryRef = useRef(null);
     const uploadButton = useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsx("div", { className: "flex justify-end", children: jsx(Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
@@ -222,7 +222,7 @@ const ImageCollection = (props) => {
                         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, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
-                        id, }) => jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: width > 768, 
+                        id, }) => jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: isLg, 
                         // reduce sliding around during deletion
                         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] })) : ((_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, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsx("input", { 
                 // Users can still select other files on mobile devices

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "0.0.220",
+  "version": "0.0.222",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {