@ministryofjustice/frontend 5.2.1 → 7.0.0

package/moj/all.bundle.mjs

@@ -23,6 +23,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function isScope($scope) {
+  return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -54,7 +57,7 @@ class ConfigError extends GOVUKFrontendError {
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
+    if (isObject(messageOrOptions)) {
       const {
         component,
         identifier,
@@ -63,7 +66,9 @@ class ElementError extends GOVUKFrontendError {
       } = messageOrOptions;
       message = identifier;
       message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-      message = formatErrorMessage(component, message);
+      if (component) {
+        message = formatErrorMessage(component, message);
+      }
     }
     super(message);
     this.name = 'ElementError';
@@ -200,6 +205,30 @@ function normaliseDataset(Component, dataset) {
   }
   return out;
 }
+function normaliseOptions(scopeOrOptions) {
+  let $scope = document;
+  let onError;
+  if (isObject(scopeOrOptions)) {
+    const options = scopeOrOptions;
+    if (isScope(options.scope) || options.scope === null) {
+      $scope = options.scope;
+    }
+    if (typeof options.onError === 'function') {
+      onError = options.onError;
+    }
+  }
+  if (isScope(scopeOrOptions)) {
+    $scope = scopeOrOptions;
+  } else if (scopeOrOptions === null) {
+    $scope = null;
+  } else if (typeof scopeOrOptions === 'function') {
+    onError = scopeOrOptions;
+  }
+  return {
+    scope: $scope,
+    onError
+  };
+}
 function mergeConfigs(...configObjects) {
   const formattedConfigObject = {};
   for (const configObject of configObjects) {
@@ -254,42 +283,42 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  * @template {CompatibleClass} ComponentClass
  * @param {ComponentClass} Component - class of the component to create
  * @param {ComponentConfig<ComponentClass>} [config] - Config supplied to component
- * @param {OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
+ * @param {OnErrorCallback<ComponentClass> | Element | Document | null | CreateAllOptions<ComponentClass>} [scopeOrOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<ComponentClass>>} - array of instantiated components
  */
-function createAll(Component, config, createAllOptions) {
-  let $scope = document;
-  let onError;
-  if (typeof createAllOptions === 'object') {
-    var _createAllOptions$sco;
-    createAllOptions = createAllOptions;
-    $scope = (_createAllOptions$sco = createAllOptions.scope) != null ? _createAllOptions$sco : $scope;
-    onError = createAllOptions.onError;
-  }
-  if (typeof createAllOptions === 'function') {
-    onError = createAllOptions;
-  }
-  if (createAllOptions instanceof HTMLElement) {
-    $scope = createAllOptions;
-  }
-  const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
-  if (!isSupported()) {
-    if (onError) {
-      onError(new SupportError(), {
+function createAll(Component, config, scopeOrOptions) {
+  let $elements;
+  const options = normaliseOptions(scopeOrOptions);
+  try {
+    var _options$scope;
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        component: Component,
+        identifier: 'Scope element (`$scope`)'
+      });
+    }
+    $elements = (_options$scope = options.scope) == null ? void 0 : _options$scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         component: Component,
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return [];
   }
-  return Array.from($elements).map($element => {
+  return Array.from($elements != null ? $elements : []).map($element => {
     try {
       return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
     } catch (error) {
-      if (onError) {
-        onError(error, {
+      if (options.onError) {
+        options.onError(error, {
           element: $element,
           component: Component,
           config
@@ -308,11 +337,11 @@ function createAll(Component, config, createAllOptions) {
  */
 
 /**
- * MoJ Frontend release version
+ * MOJ Frontend release version
  *
  * {@link https://github.com/ministryofjustice/moj-frontend/releases}
  */
-const version = '5.2.1';
+const version = '7.0.0';
 
 class AddAnother extends Component {
   /**
@@ -601,7 +630,7 @@ function getPreviousSibling($element, selector) {
  */
 function findNearestMatchingElement($element, selector) {
   // If no element or selector is provided, return
-  if (!$element || !($element instanceof HTMLElement) || false) {
+  if (!$element || !($element instanceof HTMLElement) || !selector) {
     return;
   }
 
@@ -1346,7 +1375,7 @@ class DatePicker extends ConfigurableComponent {
     const day = match[1];
     const month = match[3];
     const year = match[4];
-    formattedDate = new Date(`${year}-${month}-${day}`);
+    formattedDate = new Date(Number(year), Number(month) - 1, Number(day));
     if (formattedDate instanceof Date && Number.isFinite(formattedDate.getTime())) {
       return formattedDate;
     }
@@ -1522,6 +1551,16 @@ class DatePicker extends ConfigurableComponent {
 
     // get the date from the input element
     this.inputDate = this.formattedDateFromString(this.$input.value);
+    // move current date to the closest selectable date if it is out of range
+    if (this.minDate && this.minDate > this.inputDate) {
+      this.inputDate = new Date(this.minDate.getTime());
+    }
+    if (this.maxDate && this.maxDate < this.inputDate) {
+      this.inputDate = new Date(this.maxDate.getTime());
+    }
+    if (this.minDate && this.maxDate && this.minDate > this.maxDate) {
+      console.error('min date is after max date. No dates will be selectable');
+    }
     this.currentDate = this.inputDate;
     this.currentDate.setHours(0, 0, 0, 0);
     this.updateCalendar();
@@ -2469,13 +2508,13 @@ class MultiFileUpload extends ConfigurableComponent {
       $message.innerHTML = this.getSuccessHtml(xhr.response.success);
       this.$status.textContent = xhr.response.success.messageText;
       $actions.append(this.getDeleteButton(xhr.response.file));
-      this.config.hooks.exitHook(this, file, xhr, xhr.responseText);
+      this.config.hooks.exitHook(this, file, xhr, xhr.statusText);
     };
     const onError = () => {
       const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
       $message.innerHTML = this.getErrorHtml(error);
       this.$status.textContent = error.message;
-      this.config.hooks.errorHook(this, file, xhr, xhr.responseText, error);
+      this.config.hooks.errorHook(this, file, xhr, xhr.statusText, error);
     };
     xhr.addEventListener('load', onLoad);
     xhr.addEventListener('error', onError);
@@ -2512,7 +2551,7 @@ class MultiFileUpload extends ConfigurableComponent {
       }
       const $rowDelete = $rows.find($row => $row.contains($button));
       if ($rowDelete) $rowDelete.remove();
-      this.config.hooks.deleteHook(this, undefined, xhr, xhr.responseText);
+      this.config.hooks.deleteHook(this, undefined, xhr, xhr.statusText);
     });
     xhr.open('POST', this.config.deleteUrl);
     xhr.setRequestHeader('Content-Type', 'application/json');
@@ -3407,16 +3446,24 @@ SortableTable.schema = Object.freeze(/** @type {const} */{
 });
 
 /**
- * @param {Config} [config]
+ * Initialise all components
+ *
+ * Use the `data-module` attributes to find, instantiate and init all of the
+ * components provided as part of MOJ Frontend.
+ *
+ * @param {Config | Element | Document | null} [scopeOrConfig]
  */
-function initAll(config) {
-  for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, PdsHeader]) {
-    createAll(Component, undefined, config);
+function initAll(scopeOrConfig) {
+  for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, PdsHeader, RichTextEditor, SearchToggle, SortableTable]) {
+    createAll(Component, undefined, scopeOrConfig);
   }
 }
 
 /**
- * @typedef {Parameters<typeof GOVUKFrontend.initAll>[0]} Config
+ * Config for all components via `initAll()`
+ *
+ * @typedef {object} Config
+ * @property {Element | Document | null } scope - the scope to search for components in
  */
 
 /**