@ohif/app 3.11.0-beta.21 → 3.11.0-beta.23

package/dist/{4991.bundle.f72a01fd158167a94ae8.js → 2974.bundle.74e19f0960e9cf7f82b6.js}

@@ -1,4 +1,4 @@
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[4991],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[2974],{
 
 /***/ 75183:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@@ -421,6 +421,557 @@ module.exports = function naturalSort (a, b) {
 };
 
 
+/***/ }),
+
+/***/ 67066:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var trimmedEndIndex = __webpack_require__(91158);
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+module.exports = baseTrim;
+
+
+/***/ }),
+
+/***/ 91158:
+/***/ ((module) => {
+
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+module.exports = trimmedEndIndex;
+
+
+/***/ }),
+
+/***/ 3803:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var isObject = __webpack_require__(46015),
+    now = __webpack_require__(26642),
+    toNumber = __webpack_require__(83572);
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+module.exports = debounce;
+
+
+/***/ }),
+
+/***/ 26642:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var root = __webpack_require__(37183);
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+module.exports = now;
+
+
+/***/ }),
+
+/***/ 51444:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var debounce = __webpack_require__(3803),
+    isObject = __webpack_require__(46015);
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+module.exports = throttle;
+
+
+/***/ }),
+
+/***/ 83572:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var baseTrim = __webpack_require__(67066),
+    isObject = __webpack_require__(46015),
+    isSymbol = __webpack_require__(63536);
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+module.exports = toNumber;
+
+
+/***/ }),
+
+/***/ 81980:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   u: () => (/* binding */ useResizeDetector)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(86326);
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3803);
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(51444);
+/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_2__);
+const patchResizeCallback = (resizeCallback, refreshMode, refreshRate, refreshOptions) => {
+    switch (refreshMode) {
+        case 'debounce':
+            return lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(resizeCallback, refreshRate, refreshOptions);
+        case 'throttle':
+            return lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default()(resizeCallback, refreshRate, refreshOptions);
+        default:
+            return resizeCallback;
+    }
+};function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
+    const skipResize = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(skipOnMount);
+    const [size, setSize] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
+        width: undefined,
+        height: undefined
+    });
+    // we are going to use this ref to store the last element that was passed to the hook
+    const [refElement, setRefElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null);
+    // if targetRef is passed, we need to update the refElement
+    // we have to use setTimeout because ref get assigned after the hook is called
+    // in the future releases we are going to remove targetRef and force users to use ref returned by the hook
+    if (targetRef) {
+        setTimeout(() => {
+            if (targetRef.current !== refElement) {
+                setRefElement(targetRef.current);
+            }
+        }, 0);
+    }
+    // this is a memo that will be called every time the ref is changed
+    // This proxy will properly call setState either when the ref is called as a function or when `.current` is set
+    // we call setState inside to trigger rerender
+    const refProxy = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => new Proxy(node => {
+        if (node !== refElement) {
+            setRefElement(node);
+        }
+    }, {
+        get(target, prop) {
+            if (prop === 'current') {
+                return refElement;
+            }
+            return target[prop];
+        },
+        set(target, prop, value) {
+            if (prop === 'current') {
+                setRefElement(value);
+            }
+            else {
+                target[prop] = value;
+            }
+            return true;
+        }
+    }), [refElement]);
+    const shouldSetSize = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((prevSize, nextSize) => {
+        if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
+            // skip if dimensions haven't changed
+            return false;
+        }
+        if ((prevSize.width === nextSize.width && !handleHeight) ||
+            (prevSize.height === nextSize.height && !handleWidth)) {
+            // process `handleHeight/handleWidth` props
+            return false;
+        }
+        return true;
+    }, [handleWidth, handleHeight]);
+    const resizeCallback = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((entries) => {
+        if (!handleWidth && !handleHeight)
+            return;
+        if (skipResize.current) {
+            skipResize.current = false;
+            return;
+        }
+        entries.forEach(entry => {
+            const { width, height } = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {};
+            setSize(prevSize => {
+                if (!shouldSetSize(prevSize, { width, height }))
+                    return prevSize;
+                return { width, height };
+            });
+        });
+    }, [handleWidth, handleHeight, skipResize, shouldSetSize]);
+    const resizeHandler = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+        resizeCallback,
+        refreshMode,
+        refreshRate,
+        refreshOptions
+    ]);
+    // on refElement change
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        let resizeObserver;
+        if (refElement) {
+            resizeObserver = new window.ResizeObserver(resizeHandler);
+            resizeObserver.observe(refElement, observerOptions);
+        }
+        else {
+            if (size.width || size.height) {
+                setSize({ width: undefined, height: undefined });
+            }
+        }
+        return () => {
+            var _a, _b, _c;
+            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+            (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
+        };
+    }, [resizeHandler, refElement]);
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
+    }, [size]);
+    return Object.assign({ ref: refProxy }, size);
+}//# sourceMappingURL=index.esm.js.map
+
+
 /***/ }),
 
 /***/ 45422:

package/dist/{7241.bundle.3eb11e9c932a99887004.js → 7241.bundle.64c1167e145939213ce2.js}

@@ -6587,16 +6587,6 @@ async function init({
       cornerstoneViewportService.setVolumesForViewport(viewport, volumeInputArray, presentations);
     }
   });
-
-  // resize the cornerstone viewport service when the grid size changes
-  // IMPORTANT: this should happen outside of the OHIFCornerstoneViewport
-  // since it will trigger a rerender of each viewport and each resizing
-  // the offscreen canvas which would result in a performance hit, this should
-  // done only once per grid resize here. Doing it once here, allows us to reduce
-  // the refreshRage(in ms) to 10 from 50. I tried with even 1 or 5 ms it worked fine
-  viewportGridService.subscribe(viewportGridService.EVENTS.GRID_SIZE_CHANGED, () => {
-    cornerstoneViewportService.resize(true);
-  });
   src_initContextMenu({
     cornerstoneViewportService,
     customizationService,
@@ -18929,6 +18919,8 @@ const EVENTS = {
   VIEWPORT_DATA_CHANGED: 'event::cornerstoneViewportService:viewportDataChanged',
   VIEWPORT_VOLUMES_CHANGED: 'event::cornerstoneViewportService:viewportVolumesChanged'
 };
+const MIN_STACK_VIEWPORTS_TO_ENQUEUE_RESIZE = 12;
+const MIN_VOLUME_VIEWPORTS_TO_ENQUEUE_RESIZE = 6;
 const WITH_NAVIGATION = {
   withNavigation: true,
   withOrientation: false
@@ -18947,9 +18939,6 @@ class CornerstoneViewportService extends src/* PubSubService */.Rc {
     this.viewportsDisplaySets = new Map();
     this.beforeResizePositionPresentations = new Map();
     // Some configs
-    this.enableResizeDetector = void 0;
-    this.resizeRefreshRateMs = void 0;
-    this.resizeRefreshMode = void 0;
     this.servicesManager = null;
     this.resizeQueue = [];
     this.viewportResizeTimer = null;
@@ -19001,13 +18990,8 @@ class CornerstoneViewportService extends src/* PubSubService */.Rc {
   /**
    * It triggers the resize on the rendering engine, and renders the viewports
    *
-   * @param isGridResize - if the resize is triggered by a grid resize
-   * this is used to avoid double resize of the viewports since if the
-   * grid is resized, all viewports will be resized so there is no need
-   * to resize them individually which will get triggered by their
-   * individual resize observers
    */
-  resize(isGridResize = false) {
+  resize() {
     // https://stackoverflow.com/a/26279685
     // This resize() call, among other things, rerenders the viewports. But when the entire viewer is
     // display: none'd, it makes the size of all hidden elements 0, including the viewport canvas and its containers.
@@ -19021,13 +19005,16 @@ class CornerstoneViewportService extends src/* PubSubService */.Rc {
       console.warn('Ignoring resize when viewports have size 0');
       return;
     }
+    const numStackViewportsInViewportGrid = Array.from(this.viewportsById.values()).filter(viewportInfo => viewportInfo.getViewportType() === esm.Enums.ViewportType.STACK).length;
+    const numVolumeViewportsInViewportGrid = Array.from(this.viewportsById.values()).filter(viewportInfo => viewportInfo.getViewportType() === esm.Enums.ViewportType.ORTHOGRAPHIC).length;
+    const isEasyResize = numStackViewportsInViewportGrid <= MIN_STACK_VIEWPORTS_TO_ENQUEUE_RESIZE && numVolumeViewportsInViewportGrid <= MIN_VOLUME_VIEWPORTS_TO_ENQUEUE_RESIZE;
 
     // if there is a grid resize happening, it means the viewport grid
     // has been manipulated (e.g., panels closed, added, etc.) and we need
     // to resize all viewports, so we will add a timeout here to make sure
     // we don't double resize the viewports when viewports in the grid are
     // resized individually
-    if (isGridResize) {
+    if (isEasyResize) {
       this.performResize();
       this.resetGridResizeTimeout();
       this.resizeQueue = [];

package/dist/{7622.bundle.d0ff9b68945e250ef0ab.js → 7622.bundle.be6a55fa9d660c2e3fa5.js}

@@ -3731,20 +3731,20 @@ function ViewerHeader({
   const AboutModal = customizationService.getCustomization('ohif.aboutModal');
   const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal');
   const menuOptions = [{
-    title: t('Header:About'),
+    title: AboutModal?.menuTitle ?? t('Header:About'),
     icon: 'info',
     onClick: () => show({
       content: AboutModal,
-      title: t('AboutModal:About OHIF Viewer'),
-      containerClassName: 'max-w-md'
+      title: AboutModal?.title ?? t('AboutModal:About OHIF Viewer'),
+      containerClassName: AboutModal?.containerClassName ?? 'max-w-md'
     })
   }, {
-    title: t('Header:Preferences'),
+    title: UserPreferencesModal.menuTitle ?? t('Header:Preferences'),
     icon: 'settings',
     onClick: () => show({
       content: UserPreferencesModal,
-      title: t('UserPreferencesModal:User preferences'),
-      containerClassName: 'flex max-w-4xl p-6 flex-col'
+      title: UserPreferencesModal.title ?? t('UserPreferencesModal:User preferences'),
+      containerClassName: UserPreferencesModal?.containerClassName ?? 'flex max-w-4xl p-6 flex-col'
     })
   }];
   if (appConfig.oidc) {
@@ -10131,8 +10131,8 @@ function AboutModalDefault() {
     name
   } = (0,browser_detect_es5/* default */.A)();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
-  const versionNumber = "3.11.0-beta.21";
-  const commitHash = "4be84953359bba2b846c62ec8f323a8f290b2eb6";
+  const versionNumber = "3.11.0-beta.23";
+  const commitHash = "383f45823c58149baf162a2de7bad2240ba0b030";
   const [main, beta] = versionNumber.split('-');
   return /*#__PURE__*/react.createElement(ui_next_src/* AboutModal */.VTU, {
     className: "w-[400px]"