react-iiif-vault 0.9.9 → 0.9.10

package/dist/cjs/index.js

@@ -719,14 +719,23 @@ const PortalContext = React__default["default"].createContext(null);
 const OverlayPortalContext = React__default["default"].createContext(null);
 function CanvasPortal({ children, overlay }) {
   const htmlElement = React$1.useContext(overlay ? OverlayPortalContext : PortalContext);
-  const root = React$1.useMemo(() => htmlElement ? createRoot(htmlElement) : null, [htmlElement]);
+  const rootRef = React$1.useRef(null);
   const preset = useViewerPreset();
   React$1.useLayoutEffect(() => {
-    return () => root == null ? void 0 : root.unmount();
-  }, [root]);
+    if (!rootRef.current) {
+      rootRef.current = htmlElement ? createRoot(htmlElement) : null;
+    }
+  }, []);
+  React$1.useLayoutEffect(() => {
+    return () => {
+      var _a;
+      (_a = rootRef.current) == null ? void 0 : _a.unmount();
+      rootRef.current = null;
+    };
+  }, []);
   React$1.useLayoutEffect(() => {
-    if (root) {
-      root.render(/* @__PURE__ */ React__default["default"].createElement(ViewerPresetContext.Provider, {
+    if (rootRef.current) {
+      rootRef.current.render(/* @__PURE__ */ React__default["default"].createElement(ViewerPresetContext.Provider, {
         value: preset
       }, children));
     }
@@ -765,7 +774,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const AtlasAuto = atlas.AtlasAuto;
 function Viewer(_a) {
   var _b = _a, {
     children,
@@ -789,9 +797,11 @@ function Viewer(_a) {
   }, []);
   return /* @__PURE__ */ React__default["default"].createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
     fallbackRender: () => /* @__PURE__ */ React__default["default"].createElement(ErrorFallback, __spreadValues$8({}, props))
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$8({
-    style: { position: "relative" }
-  }, outerContainerProps), /* @__PURE__ */ React__default["default"].createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+  }, /* @__PURE__ */ React__default["default"].createElement(atlas.AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+    containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
+    htmlChildren: /* @__PURE__ */ React__default["default"].createElement("div", {
+      ref: overlayPortal
+    }),
     onCreated: (preset) => {
       setViewerPreset(preset);
       if (props.onCreated) {
@@ -807,8 +817,6 @@ function Viewer(_a) {
   }, /* @__PURE__ */ React__default["default"].createElement(ContextBridge, {
     bridge
   }, /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    ref: overlayPortal
-  })), /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: portal
   }));
 }

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 import React$1, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from 'react';
-import { AtlasAuto as AtlasAuto$1, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
+import { AtlasAuto, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
 import { globalVault, Vault } from '@iiif/vault';
 import { createAction } from 'typesafe-actions';
 import require$$0 from 'react-dom';
@@ -710,14 +710,23 @@ const PortalContext = React$1.createContext(null);
 const OverlayPortalContext = React$1.createContext(null);
 function CanvasPortal({ children, overlay }) {
   const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
-  const root = useMemo(() => htmlElement ? createRoot(htmlElement) : null, [htmlElement]);
+  const rootRef = useRef(null);
   const preset = useViewerPreset();
   useLayoutEffect(() => {
-    return () => root == null ? void 0 : root.unmount();
-  }, [root]);
+    if (!rootRef.current) {
+      rootRef.current = htmlElement ? createRoot(htmlElement) : null;
+    }
+  }, []);
+  useLayoutEffect(() => {
+    return () => {
+      var _a;
+      (_a = rootRef.current) == null ? void 0 : _a.unmount();
+      rootRef.current = null;
+    };
+  }, []);
   useLayoutEffect(() => {
-    if (root) {
-      root.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
+    if (rootRef.current) {
+      rootRef.current.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
         value: preset
       }, children));
     }
@@ -756,7 +765,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const AtlasAuto = AtlasAuto$1;
 function Viewer(_a) {
   var _b = _a, {
     children,
@@ -780,9 +788,11 @@ function Viewer(_a) {
   }, []);
   return /* @__PURE__ */ React$1.createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
     fallbackRender: () => /* @__PURE__ */ React$1.createElement(ErrorFallback, __spreadValues$8({}, props))
-  }, /* @__PURE__ */ React$1.createElement("div", __spreadValues$8({
-    style: { position: "relative" }
-  }, outerContainerProps), /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+  }, /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+    containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
+    htmlChildren: /* @__PURE__ */ React$1.createElement("div", {
+      ref: overlayPortal
+    }),
     onCreated: (preset) => {
       setViewerPreset(preset);
       if (props.onCreated) {
@@ -798,8 +808,6 @@ function Viewer(_a) {
   }, /* @__PURE__ */ React$1.createElement(ContextBridge, {
     bridge
   }, /* @__PURE__ */ React$1.createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React$1.createElement("div", {
-    ref: overlayPortal
-  })), /* @__PURE__ */ React$1.createElement("div", {
     ref: portal
   }));
 }

package/dist/index.umd.js

@@ -28593,7 +28593,7 @@
     });
 
     var Atlas = function (_a) {
-        var _renderPreset = _a.renderPreset, onCreated = _a.onCreated, _b = _a.mode, _mode = _b === void 0 ? 'explore' : _b, _c = _a.resetWorldOnChange, resetWorldOnChange = _c === void 0 ? true : _c, _d = _a.unstable_webglRenderer, unstable_webglRenderer = _d === void 0 ? false : _d, _e = _a.unstable_noReconciler, unstable_noReconciler = _e === void 0 ? false : _e, _f = _a.hideInlineStyle, hideInlineStyle = _f === void 0 ? false : _f; _a.controllerConfig; var children = _a.children, overlayStyle = _a.overlayStyle, containerStyle = _a.containerStyle, enableNavigator = _a.enableNavigator, className = _a.className, _g = _a.containerProps, containerProps = _g === void 0 ? {} : _g, homePosition = _a.homePosition, _background = _a.background, restProps = __rest(_a, ["renderPreset", "onCreated", "mode", "resetWorldOnChange", "unstable_webglRenderer", "unstable_noReconciler", "hideInlineStyle", "controllerConfig", "children", "overlayStyle", "containerStyle", "enableNavigator", "className", "containerProps", "homePosition", "background"]);
+        var htmlChildren = _a.htmlChildren, _renderPreset = _a.renderPreset, onCreated = _a.onCreated, _b = _a.mode, _mode = _b === void 0 ? 'explore' : _b, _c = _a.resetWorldOnChange, resetWorldOnChange = _c === void 0 ? true : _c, _d = _a.unstable_webglRenderer, unstable_webglRenderer = _d === void 0 ? false : _d, _e = _a.unstable_noReconciler, unstable_noReconciler = _e === void 0 ? false : _e, _f = _a.hideInlineStyle, hideInlineStyle = _f === void 0 ? false : _f; _a.controllerConfig; var children = _a.children, overlayStyle = _a.overlayStyle, containerStyle = _a.containerStyle, enableNavigator = _a.enableNavigator, className = _a.className, _g = _a.containerProps, containerProps = _g === void 0 ? {} : _g, homePosition = _a.homePosition, _background = _a.background, restProps = __rest(_a, ["htmlChildren", "renderPreset", "onCreated", "mode", "resetWorldOnChange", "unstable_webglRenderer", "unstable_noReconciler", "hideInlineStyle", "controllerConfig", "children", "overlayStyle", "containerStyle", "enableNavigator", "className", "containerProps", "homePosition", "background"]);
         var _h = __read(React$1.useState(_background), 2), background = _h[0], setBackground = _h[1];
         var _j = __read(React$1.useState(_mode), 2), mode = _j[0], setMode = _j[1];
         var _k = __read(React$1.useState(false), 2), isReady = _k[0], setIsReady = _k[1];
@@ -28812,7 +28812,8 @@
                         React__default["default"].createElement(AtlasContext.Provider, { value: preset }, children))))) : (React__default["default"].createElement(AtlasWithReconciler, { bounds: bounds, preset: preset, mode: mode, setIsReady: setIsReady, onCreated: onCreated }, children))),
             enableNavigator ? (React__default["default"].createElement(Container, { className: "atlas-navigator" },
                 React__default["default"].createElement("canvas", { className: "atlas-navigator-canvas", part: "atlas-navigator-canvas", ref: refs.navigator }))) : null,
-            hideInlineStyle ? (React__default["default"].createElement("style", null, ".atlas-width-".concat(widthClassName, " { width: ").concat(restProps.width, "px; height: ").concat(restProps.height, "px; }"))) : (React__default["default"].createElement("style", null, "\n        .atlas { position: relative; user-select: none; display: flex; background: var(--atlas-background, #000); z-index: var(--atlas-z-index, 10); touch-action: none; }\n        .atlas-width-".concat(widthClassName, " { width: ").concat(restProps.width, "px; height: ").concat(restProps.height, "px; }\n        .atlas-canvas { flex: 1 1 0px; }\n        .atlas-canvas:focus, .atlas-static-container:focus { outline: none }\n        .atlas-canvas:focus-visible, .atlas-canvas-container:focus-visible { outline: var(--atlas-focus, 2px solid darkorange) }\n        .atlas-static-container { position: relative; overflow: hidden; flex: 1 1 0px; }\n        .atlas-overlay { position: absolute; top: 0; left: 0; pointer-events: none; overflow: hidden; }\n        .atlas-static-image { position: absolute; pointer-events: none; user-select: none; transform-origin: 0px 0px; }\n        .atlas-navigator { position: absolute; top: var(--atlas-navigator-top, 10px); right: var(--atlas-navigator-bottom, 10px); left: var(--atlas-navigator-left); bottom: var(--atlas-navigator-bottom); opacity: .8 }\n        .atlas-navigator-canvas { width: 100%; }\n      ")))));
+            hideInlineStyle ? (React__default["default"].createElement("style", null, ".atlas-width-".concat(widthClassName, " { width: ").concat(restProps.width, "px; height: ").concat(restProps.height, "px; }"))) : (React__default["default"].createElement("style", null, "\n        .atlas { position: relative; user-select: none; display: flex; background: var(--atlas-background, #000); z-index: var(--atlas-z-index, 10); touch-action: none; }\n        .atlas-width-".concat(widthClassName, " { width: ").concat(restProps.width, "px; height: ").concat(restProps.height, "px; }\n        .atlas-canvas { flex: 1 1 0px; }\n        .atlas-canvas:focus, .atlas-static-container:focus { outline: none }\n        .atlas-canvas:focus-visible, .atlas-canvas-container:focus-visible { outline: var(--atlas-focus, 2px solid darkorange) }\n        .atlas-static-container { position: relative; overflow: hidden; flex: 1 1 0px; }\n        .atlas-overlay { position: absolute; top: 0; left: 0; pointer-events: none; overflow: hidden; }\n        .atlas-static-image { position: absolute; pointer-events: none; user-select: none; transform-origin: 0px 0px; }\n        .atlas-navigator { position: absolute; top: var(--atlas-navigator-top, 10px); right: var(--atlas-navigator-bottom, 10px); left: var(--atlas-navigator-left); bottom: var(--atlas-navigator-bottom); opacity: .8 }\n        .atlas-navigator-canvas { width: 100%; }\n      "))),
+            htmlChildren));
     };
 
     function toPx(str) {
@@ -28822,7 +28823,7 @@
         return str;
     }
 
-    var AtlasAuto$1 = function (_a) {
+    var AtlasAuto = function (_a) {
         var resizeHash = _a.resizeHash, aspectRatio = _a.aspectRatio, _b = _a.containerProps, containerProps = _b === void 0 ? {} : _b, props = __rest(_a, ["resizeHash", "aspectRatio", "containerProps"]);
         var _c = __read(useMeasure(), 3), ref = _c[0], _bounds = _c[1], forceRefresh = _c[2];
         var _d = props, height = _d.height, width = _d.width, restProps = __rest(_d, ["height", "width"]);
@@ -28840,7 +28841,8 @@
         }, [_bounds, aspectRatio]);
         return (React__default["default"].createElement(Container, __assign({ ref: ref, className: "atlas-container" }, containerProps),
             bounds.width ? (React__default["default"].createElement(Atlas, __assign({ width: bounds.width || 100, height: bounds.height || 100 }, restProps), props.children)) : null,
-            props.hideInlineStyle ? null : (React__default["default"].createElement("style", null, "\n          .atlas-container { \n            display: var(--atlas-container-display, block);\n            flex: var(--atlas-container-flex, none);\n            width: var(--atlas-container-width, ".concat(width ? "".concat(width, "px") : '100%', ");\n            height: var(--atlas-container-height, ").concat(toPx(height ? height : aspectRatio ? bounds.height : 512), ")  \n          }\n      ")))));
+            props.hideInlineStyle ? null : (React__default["default"].createElement("style", null, "\n          .atlas-container { \n            display: var(--atlas-container-display, block);\n            flex: var(--atlas-container-flex, none);\n            width: var(--atlas-container-width, ".concat(width ? "".concat(width, "px") : '100%', ");\n            height: var(--atlas-container-height, ").concat(toPx(height ? height : aspectRatio ? bounds.height : 512), ")  \n          }\n      "))),
+            props.htmlChildren));
     };
 
     var useAtlas = function () {
@@ -29941,14 +29943,23 @@
     const OverlayPortalContext = React__default["default"].createContext(null);
     function CanvasPortal({ children, overlay }) {
       const htmlElement = React$1.useContext(overlay ? OverlayPortalContext : PortalContext);
-      const root = React$1.useMemo(() => htmlElement ? createRoot(htmlElement) : null, [htmlElement]);
+      const rootRef = React$1.useRef(null);
       const preset = useViewerPreset();
       React$1.useLayoutEffect(() => {
-        return () => root == null ? void 0 : root.unmount();
-      }, [root]);
+        if (!rootRef.current) {
+          rootRef.current = htmlElement ? createRoot(htmlElement) : null;
+        }
+      }, []);
       React$1.useLayoutEffect(() => {
-        if (root) {
-          root.render(/* @__PURE__ */ React__default["default"].createElement(ViewerPresetContext.Provider, {
+        return () => {
+          var _a;
+          (_a = rootRef.current) == null ? void 0 : _a.unmount();
+          rootRef.current = null;
+        };
+      }, []);
+      React$1.useLayoutEffect(() => {
+        if (rootRef.current) {
+          rootRef.current.render(/* @__PURE__ */ React__default["default"].createElement(ViewerPresetContext.Provider, {
             value: preset
           }, children));
         }
@@ -29987,7 +29998,6 @@
         }
       return target;
     };
-    const AtlasAuto = AtlasAuto$1;
     function Viewer(_a) {
       var _b = _a, {
         children,
@@ -30011,9 +30021,11 @@
       }, []);
       return /* @__PURE__ */ React__default["default"].createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
         fallbackRender: () => /* @__PURE__ */ React__default["default"].createElement(ErrorFallback, __spreadValues$8({}, props))
-      }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$8({
-        style: { position: "relative" }
-      }, outerContainerProps), /* @__PURE__ */ React__default["default"].createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+      }, /* @__PURE__ */ React__default["default"].createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+        containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
+        htmlChildren: /* @__PURE__ */ React__default["default"].createElement("div", {
+          ref: overlayPortal
+        }),
         onCreated: (preset) => {
           setViewerPreset(preset);
           if (props.onCreated) {
@@ -30029,8 +30041,6 @@
       }, /* @__PURE__ */ React__default["default"].createElement(ContextBridge, {
         bridge
       }, /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React__default["default"].createElement("div", {
-        ref: overlayPortal
-      })), /* @__PURE__ */ React__default["default"].createElement("div", {
         ref: portal
       }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iiif-vault",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.mjs",
   "types": "./dist/index.d.ts",
@@ -38,7 +38,7 @@
     "@iiif/presentation-3": "^1.0.5"
   },
   "dependencies": {
-    "@atlas-viewer/atlas": "^2.0.0-alpha.10",
+    "@atlas-viewer/atlas": "^2.0.0-alpha.11",
     "@atlas-viewer/iiif-image-api": "^2.*",
     "@iiif/parser": ">=v1.0.10",
     "@iiif/presentation-2": "^1.*",