@trackunit/react-compound-components 0.0.277 → 0.0.278

package/index.cjs.js

@@ -9,8 +9,8 @@ var reactModal = require('@trackunit/react-modal');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var ImageGallery = require('react-image-gallery');
 var tailwindMerge = require('tailwind-merge');
-var reactFormComponents = require('@trackunit/react-form-components');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
+var reactFormComponents = require('@trackunit/react-form-components');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -179,7 +179,7 @@ const cvaGallery = cssClassVarianceUtilities.cvaMerge([
     // This centers thumbnails and makes the clickable area independent of image size
     "[&_.image-gallery-thumbnail]:h-[100px]",
 ]);
-const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm";
+const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm text-wrap";
 /**
  * Show and manage images
  *
@@ -202,7 +202,7 @@ const ImageCollection = (props) => {
         thumbnail: createThumbnailUrl(image.id),
         srcSet: createSrcSet(image.id),
         name: image.name,
-        timestamp: dateAndTimeUtils.formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" })
+        timestamp: dateAndTimeUtils.formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" }),
     })), [imagesData]);
     React.useEffect(() => {
         var _a;
@@ -248,7 +248,7 @@ const ImageCollection = (props) => {
                         // @ts-ignore
                         name, 
                         // @ts-ignore
-                        timestamp, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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 }), jsxRuntime.jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: (e) => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), renderThumbInner: ({ thumbnail, 
+                        timestamp, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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 }), jsxRuntime.jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: e => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), 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: isLg, 

package/index.esm.js

@@ -8,8 +8,8 @@ import { Modal } from '@trackunit/react-modal';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import ImageGallery from 'react-image-gallery';
 import { twMerge } from 'tailwind-merge';
-import { DropZone } from '@trackunit/react-form-components';
 import { formatDateUtil } from '@trackunit/date-and-time-utils';
+import { DropZone } from '@trackunit/react-form-components';
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this course of action?",
@@ -159,7 +159,7 @@ const cvaGallery = cvaMerge([
     // This centers thumbnails and makes the clickable area independent of image size
     "[&_.image-gallery-thumbnail]:h-[100px]",
 ]);
-const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm";
+const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm text-wrap";
 /**
  * Show and manage images
  *
@@ -182,7 +182,7 @@ const ImageCollection = (props) => {
         thumbnail: createThumbnailUrl(image.id),
         srcSet: createSrcSet(image.id),
         name: image.name,
-        timestamp: formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" })
+        timestamp: formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" }),
     })), [imagesData]);
     useEffect(() => {
         var _a;
@@ -228,7 +228,7 @@ const ImageCollection = (props) => {
                         // @ts-ignore
                         name, 
                         // @ts-ignore
-                        timestamp, }) => (jsxs(Fragment, { children: [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 }), jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: (e) => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), renderThumbInner: ({ thumbnail, 
+                        timestamp, }) => (jsxs(Fragment, { children: [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 }), jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: e => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), 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: isLg, 

package/package.json

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