@canopy-iiif/app 1.6.20 → 1.6.22

package/ui/dist/server.mjs

@@ -557,13 +557,31 @@ async function mountImageStory(element, props = {}) {
 }
 
 // ui/src/iiif/ImageStory.jsx
+var DEFAULT_IMAGE_STORY_HEIGHT = 600;
+var NUMERIC_HEIGHT_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)$/;
+function resolveContainerHeight(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return `${DEFAULT_IMAGE_STORY_HEIGHT}px`;
+    }
+    if (NUMERIC_HEIGHT_PATTERN.test(trimmed)) {
+      return `${trimmed}px`;
+    }
+    return trimmed;
+  }
+  return `${DEFAULT_IMAGE_STORY_HEIGHT}px`;
+}
 var ImageStory = (props = {}) => {
   const {
     iiifContent,
     disablePanAndZoom,
     pointOfInterestSvgUrl,
     viewerOptions,
-    height = 600,
+    height = DEFAULT_IMAGE_STORY_HEIGHT,
     className,
     style,
     ...rest
@@ -572,6 +590,9 @@ var ImageStory = (props = {}) => {
   const resolvedClassName = useMemo(() => {
     return ["canopy-image-story", className].filter(Boolean).join(" ");
   }, [className]);
+  const resolvedHeight = useMemo(() => {
+    return resolveContainerHeight(height);
+  }, [height]);
   const serializedProps = useMemo(() => {
     return serializeImageStoryProps({
       iiifContent,
@@ -617,7 +638,7 @@ var ImageStory = (props = {}) => {
       "data-canopy-image-story": "1",
       style: {
         width: "100%",
-        height: typeof height === "number" ? `${height}px` : height,
+        height: resolvedHeight,
         ...style || {}
       },
       ...rest