@geowiki/design-system 0.16.10-dev.4 → 0.16.10-dev.6

package/dist/index.js

@@ -7547,7 +7547,7 @@ var VideoPlayer = (props) => {
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var CarouselGalleryItem = ({ text, url, id }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id, children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id: "img_" + id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         ImageElement,
         {
@@ -7560,7 +7560,7 @@ var CarouselGalleryItem = ({ text, url, id }) => {
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
     (url.includes(".mp4") || url.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "transition-all duration-300 group-hover:brightness-50", id, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "transition-all duration-300 group-hover:brightness-50", id: "vid_" + id, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         VideoPlayer,
         {
           url,
@@ -7589,6 +7589,7 @@ var GalleryCarouselOpen = ({
 }) => {
   const [defaultPhoto, setDefaultPhoto] = (0, import_react25.useState)(currentPhoto);
   const [text, setDefaultText] = (0, import_react25.useState)("");
+  const [id, setDefaultId] = (0, import_react25.useState)("");
   const [rotation, setRotation] = (0, import_react25.useState)(0);
   (0, import_react25.useEffect)(() => {
     setDefaultPhoto(currentPhoto);
@@ -7612,7 +7613,7 @@ var GalleryCarouselOpen = ({
     }
   };
   const generateBase64ofImage = () => {
-    const img = document.getElementById(defaultPhoto.id);
+    const img = document.getElementById(id);
     let base64;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -7632,6 +7633,7 @@ var GalleryCarouselOpen = ({
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
       setDefaultText(foundPhoto.text);
+      setDefaultId(foundPhoto.id);
     }
   }, [defaultPhoto, list]);
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react24.Transition.Root, { show: open, as: import_react23.Fragment, "data-component": "ResourceView", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_react24.Dialog, { as: "div", className: "relative z-10", onClose: setOpen, children: [
@@ -7682,7 +7684,7 @@ var GalleryCarouselOpen = ({
             !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "img",
               {
-                id: defaultPhoto.id,
+                id,
                 src: defaultPhoto.imageUrl,
                 crossOrigin: "anonymous",
                 alt: "Description",
@@ -7693,7 +7695,7 @@ var GalleryCarouselOpen = ({
             (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "video",
               {
-                id: defaultPhoto.id,
+                id,
                 src: defaultPhoto.imageUrl,
                 controls: true,
                 preload: "metadata",
@@ -7726,7 +7728,7 @@ var GalleryCarouselOpen = ({
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage(), defaultPhoto.id),
+              onClick: () => saveRotationChanges(generateBase64ofImage(), id),
               children: "Save rotation changes"
             }
           )

package/dist/index.mjs

@@ -7180,7 +7180,7 @@ var VideoPlayer = (props) => {
 import { Fragment as Fragment9, jsx as jsx132, jsxs as jsxs57 } from "react/jsx-runtime";
 var CarouselGalleryItem = ({ text, url, id }) => {
   return /* @__PURE__ */ jsxs57(Fragment9, { children: [
-    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id, children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id: "img_" + id, children: [
       /* @__PURE__ */ jsx132(
         ImageElement,
         {
@@ -7193,7 +7193,7 @@ var CarouselGalleryItem = ({ text, url, id }) => {
       /* @__PURE__ */ jsx132("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx132("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
     (url.includes(".mp4") || url.includes(".mov")) && /* @__PURE__ */ jsxs57("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
-      /* @__PURE__ */ jsx132("div", { className: "transition-all duration-300 group-hover:brightness-50", id, children: /* @__PURE__ */ jsx132(
+      /* @__PURE__ */ jsx132("div", { className: "transition-all duration-300 group-hover:brightness-50", id: "vid_" + id, children: /* @__PURE__ */ jsx132(
         VideoPlayer,
         {
           url,
@@ -7222,6 +7222,7 @@ var GalleryCarouselOpen = ({
 }) => {
   const [defaultPhoto, setDefaultPhoto] = useState14(currentPhoto);
   const [text, setDefaultText] = useState14("");
+  const [id, setDefaultId] = useState14("");
   const [rotation, setRotation] = useState14(0);
   useEffect8(() => {
     setDefaultPhoto(currentPhoto);
@@ -7245,7 +7246,7 @@ var GalleryCarouselOpen = ({
     }
   };
   const generateBase64ofImage = () => {
-    const img = document.getElementById(defaultPhoto.id);
+    const img = document.getElementById(id);
     let base64;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -7265,6 +7266,7 @@ var GalleryCarouselOpen = ({
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
       setDefaultText(foundPhoto.text);
+      setDefaultId(foundPhoto.id);
     }
   }, [defaultPhoto, list]);
   return /* @__PURE__ */ jsx133(Transition3.Root, { show: open, as: Fragment10, "data-component": "ResourceView", children: /* @__PURE__ */ jsxs58(Dialog5, { as: "div", className: "relative z-10", onClose: setOpen, children: [
@@ -7315,7 +7317,7 @@ var GalleryCarouselOpen = ({
             !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
               "img",
               {
-                id: defaultPhoto.id,
+                id,
                 src: defaultPhoto.imageUrl,
                 crossOrigin: "anonymous",
                 alt: "Description",
@@ -7326,7 +7328,7 @@ var GalleryCarouselOpen = ({
             (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ jsx133(
               "video",
               {
-                id: defaultPhoto.id,
+                id,
                 src: defaultPhoto.imageUrl,
                 controls: true,
                 preload: "metadata",
@@ -7359,7 +7361,7 @@ var GalleryCarouselOpen = ({
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage(), defaultPhoto.id),
+              onClick: () => saveRotationChanges(generateBase64ofImage(), id),
               children: "Save rotation changes"
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/design-system",
-  "version": "0.16.10-dev.4",
+  "version": "0.16.10-dev.6",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "@geowiki/core": "0.16.10-dev.4"
+    "@geowiki/core": "0.16.10-dev.6"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",