dbf-mirador 4.2.3 → 4.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbf-mirador",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.",
   "type": "module",
   "main": "./dist/mirador.min.js",

package/src/lib/MiradorViewer.jsx

@@ -13,6 +13,7 @@ class MiradorViewer {
   constructor(config, viewerConfig = {}) {
     this.plugins = filterValidPlugins(viewerConfig.plugins || []);
     this.config = config;
+    this.dndManager = viewerConfig.dndManager;
     this.store = viewerConfig.store || createPluggableStore(this.config, this.plugins);
 
     if (config.id) this.renderInto(document.getElementById(config.id));
@@ -26,7 +27,7 @@ class MiradorViewer {
     this.container = container;
     this.root = createRoot(this.container);
 
-    this.root.render(this.render());
+    this.root.render(this.render({ dndManager: this.dndManager }));
   }
 
   /**

package/src/lib/rtlLanguages.js

@@ -0,0 +1,13 @@
+/** ISO 639-1 codes for languages conventionally written right-to-left. */
+const RTL_LANGUAGES = ['ar', 'fa', 'he', 'ur'];
+
+/**
+ * Whether a locale code (e.g. 'ar', 'ar-SA') is a right-to-left language, for deriving a
+ * sensible default MUI theme `direction` from the active UI language.
+ * @param {string} language
+ * @returns {boolean}
+ */
+export function isRtlLanguage(language) {
+  if (!language) return false;
+  return RTL_LANGUAGES.includes(language.split('-')[0].toLowerCase());
+}

package/src/state/selectors/config.js

@@ -2,6 +2,7 @@ import { createSelector } from 'reselect';
 import deepmerge from 'deepmerge';
 import { miradorSlice, EMPTY_ARRAY, EMPTY_OBJECT } from './utils';
 import { getWorkspace } from './getters';
+import { isRtlLanguage } from '../../lib/rtlLanguages';
 
 /**
  * Returns the config from the redux state.
@@ -62,13 +63,16 @@ export const getShowZoomControlsConfig = createSelector([getWorkspace, getConfig
 );
 
 /**
- * Returns the theme from the config.
+ * Returns the theme from the config. When no `direction` is explicitly configured (on the base
+ * theme or the selected named theme), one is derived from the active UI language - e.g. Arabic
+ * (`ar`) implies `rtl` - rather than always defaulting to `ltr` regardless of language.
  * @param {object} state
  * @returns {object} {palette: {...}, typography: {...}, overrides: {...}, ...}
  */
-export const getTheme = createSelector([getConfig], ({ theme, themes, selectedTheme }) =>
-  deepmerge(theme, themes[selectedTheme] || {}),
-);
+export const getTheme = createSelector([getConfig], ({ theme, themes, selectedTheme, language }) => {
+  const merged = deepmerge(theme, themes[selectedTheme] || {});
+  return merged.direction || !isRtlLanguage(language) ? merged : { ...merged, direction: 'rtl' };
+});
 
 /**
  * Returns the theme ids from the config.
@@ -81,11 +85,15 @@ export const getThemeIds = createSelector([getConfig], ({ themes }) => Object.ke
 export const getContainerId = createSelector([getConfig], ({ id }) => id);
 
 /**
- * Returns the theme direction from the config.
+ * Returns the theme direction from the config, falling back to a language-derived default (see
+ * getTheme) when no direction is explicitly configured.
  * @param {object} state
  * @returns {string}
  */
-export const getThemeDirection = createSelector([getConfig], ({ theme }) => theme.direction || 'ltr');
+export const getThemeDirection = createSelector(
+  [getConfig],
+  ({ theme, language }) => theme.direction || (isRtlLanguage(language) ? 'rtl' : 'ltr'),
+);
 /**
  * Returns the requests configurations from the config.
  * @param {object} state