nsw-design-system 3.18.3 → 3.18.5

package/README.md

@@ -26,7 +26,7 @@ We recommend the following methods:
 
 4. **Using JSDelivr CDN:** If you prefer a quicker setup, you can use the JSDelivr content delivery network to directly include the design system's CSS and JavaScript files in your project.
 
-Read the [Getting started page](https://designsystem.nsw.gov.au/nsw-design-system/docs/content/develop/getting-started.html) for information on the framework contents, templates, examples, and more.
+Read the [Getting started page](https://designsystem.nsw.gov.au/docs/content/develop/getting-started.html) for information on the framework contents, templates, examples, and more.
 
 ## Installing with NPM
 
@@ -144,7 +144,7 @@ View and raise issues and bugs through our [Issues tracker on Github](https://gi
 
 ## Design System Figma UI Kit
 
-Access the complete set of design assets required for designing, sharing, and prototyping using our [Figma UI Kit](https://designsystem.nsw.gov.au/nsw-design-system/docs/content/design/figma-ui-kit.html).
+Access the complete set of design assets required for designing, sharing, and prototyping using our [Figma UI Kit](https://designsystem.nsw.gov.au/docs/content/design/figma-ui-kit.html).
 
 ## Versioning
 
@@ -158,6 +158,6 @@ Our version numbers consist of MAJOR.MINOR.PATCH, where:
 
 * **PATCH** version is used for minor backward-compatible updates, new component variations, and bug fixes.
 
-See [the Releases section of our GitHub project](https://github.com/digitalnsw/nsw-design-system/releases) for changelogs for each release version. Release posts on our [what’s happening page](https://designsystem.nsw.gov.au/nsw-design-system/docs/content/about/whats-happening.html) contain summaries of the most noteworthy changes made in each release.
+See [the Releases section of our GitHub project](https://github.com/digitalnsw/nsw-design-system/releases) for changelogs for each release version. Release posts on our [what’s happening page](https://designsystem.nsw.gov.au/docs/content/about/whats-happening.html) contain summaries of the most noteworthy changes made in each release.
 
 Feel free to reach out if you have any questions or need more help with integrating the NSW Design System into your projects!

package/dist/js/components/file-upload/file-upload.d.ts

@@ -13,6 +13,7 @@ declare class FileUpload {
     createFileList(): void;
     createFileItem(file: any): string;
     updateFileList(): void;
+    currentFiles: DataTransfer | undefined;
     removeFile(): void;
     handleFileRemove(event: any): void;
 }

package/dist/js/main.js

@@ -1826,6 +1826,12 @@
         this.createFileList();
       }
       this.filesList.classList.add('active');
+      const dataTransfer = new DataTransfer();
+      for (let i = 0; i < this.input.files.length; i += 1) {
+        const file = this.input.files[i];
+        dataTransfer.items.add(file);
+      }
+      this.currentFiles = dataTransfer;
       let fileListHTML = '';
       for (let i = 0; i < this.input.files.length; i += 1) {
         const file = this.input.files[i];
@@ -1836,6 +1842,7 @@
       } else {
         this.filesList.insertAdjacentHTML('beforeend', fileListHTML);
       }
+      this.input.files = this.currentFiles.files;
       this.removeFile();
     }
     removeFile() {
@@ -1845,6 +1852,16 @@
       if (!event.target.closest('.nsw-icon-button')) return;
       event.preventDefault();
       const item = event.target.closest('.nsw-file-upload__item');
+      const filename = item.querySelector('.nsw-file-upload__item-filename').textContent;
+      const dataTransfer = new DataTransfer();
+      for (let i = 0; i < this.currentFiles.files.length; i += 1) {
+        const file = this.currentFiles.files[i];
+        if (file.name !== filename) {
+          dataTransfer.items.add(file);
+        }
+      }
+      this.currentFiles = dataTransfer;
+      this.input.files = this.currentFiles.files;
       item.remove();
       if (this.filesList.children.length === 0) {
         this.filesList.classList.remove('active');
@@ -4219,6 +4236,11 @@
         ariaExpanded = this.trigger.getAttribute('aria-expanded') === 'true' ? 'false' : 'true';
       }
       this.trigger.setAttribute('aria-expanded', ariaExpanded);
+      const options = this.dropdown.querySelectorAll(`.js-${this.optionClass}`);
+      options.forEach(option => {
+        const isVisible = ariaExpanded === 'true';
+        option.setAttribute('aria-hidden', !isVisible);
+      });
       if (ariaExpanded === 'true') {
         const selectedOption = this.getSelectedOption() || this.allButton;
         this.constructor.moveFocusFn(selectedOption);
@@ -4387,7 +4409,8 @@
         const disabled = options[i].hasAttribute('disabled') ? 'disabled' : '';
         const checked = options[i].hasAttribute('selected') ? 'checked' : '';
         const uniqueName = this.constructor.createSafeCss(`${this.selectId}-${options[i].value}-${this.optionIndex.toString()}`);
-        list = `${list}<li class="js-${this.optionClass}" role="option" data-value="${options[i].value}" ${selected} data-label="${options[i].text}" data-index="${this.optionIndex}"><input aria-hidden="true" class="${this.prefix}${this.checkboxInputClass} js-${this.checkboxClass}" type="checkbox" id="${uniqueName}" ${checked} ${disabled}><label class="${this.prefix}${this.checkboxLabelClass} ${this.prefix}${this.itemClass} ${this.prefix}${this.itemClass}--option" aria-hidden="true" for="${uniqueName}"><span>${options[i].text}</span></label></li>`;
+        const ariaHidden = options[i].hasAttribute('hidden') ? 'aria-hidden="true"' : '';
+        list = `${list}<li class="js-${this.optionClass}" role="option" data-value="${options[i].value}" ${selected} ${ariaHidden} data-label="${options[i].text}" data-index="${this.optionIndex}"><input class="${this.prefix}${this.checkboxInputClass} js-${this.checkboxClass}" type="checkbox" id="${uniqueName}" ${checked} ${disabled}><label class="${this.prefix}${this.checkboxLabelClass} ${this.prefix}${this.itemClass} ${this.prefix}${this.itemClass}--option" for="${uniqueName}"><span>${options[i].text}</span></label></li>`;
         this.optionIndex += 1;
       }
       return list;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.18.3",
+  "version": "3.18.5",
   "description": "Design system for Digital NSW",
   "main": "dist/js/main.js",
   "types": "dist/js/main.d.ts",

package/src/components/file-upload/file-upload.js

@@ -59,6 +59,14 @@ class FileUpload {
 
     this.filesList.classList.add('active')
 
+    const dataTransfer = new DataTransfer()
+
+    for (let i = 0; i < this.input.files.length; i += 1) {
+      const file = this.input.files[i]
+      dataTransfer.items.add(file)
+    }
+
+    this.currentFiles = dataTransfer
     let fileListHTML = ''
 
     for (let i = 0; i < this.input.files.length; i += 1) {
@@ -72,6 +80,7 @@ class FileUpload {
       this.filesList.insertAdjacentHTML('beforeend', fileListHTML)
     }
 
+    this.input.files = this.currentFiles.files
     this.removeFile()
   }
 
@@ -83,6 +92,18 @@ class FileUpload {
     if (!event.target.closest('.nsw-icon-button')) return
     event.preventDefault()
     const item = event.target.closest('.nsw-file-upload__item')
+    const filename = item.querySelector('.nsw-file-upload__item-filename').textContent
+
+    const dataTransfer = new DataTransfer()
+    for (let i = 0; i < this.currentFiles.files.length; i += 1) {
+      const file = this.currentFiles.files[i]
+      if (file.name !== filename) {
+        dataTransfer.items.add(file)
+      }
+    }
+
+    this.currentFiles = dataTransfer
+    this.input.files = this.currentFiles.files
 
     item.remove()
 

package/src/components/select/select.js

@@ -100,6 +100,13 @@ class Select {
       ariaExpanded = this.trigger.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
     }
     this.trigger.setAttribute('aria-expanded', ariaExpanded)
+
+    const options = this.dropdown.querySelectorAll(`.js-${this.optionClass}`)
+    options.forEach((option) => {
+      const isVisible = ariaExpanded === 'true'
+      option.setAttribute('aria-hidden', !isVisible)
+    })
+
     if (ariaExpanded === 'true') {
       const selectedOption = this.getSelectedOption() || this.allButton
       this.constructor.moveFocusFn(selectedOption)
@@ -296,7 +303,8 @@ class Select {
       const disabled = options[i].hasAttribute('disabled') ? 'disabled' : ''
       const checked = options[i].hasAttribute('selected') ? 'checked' : ''
       const uniqueName = this.constructor.createSafeCss(`${this.selectId}-${options[i].value}-${this.optionIndex.toString()}`)
-      list = `${list}<li class="js-${this.optionClass}" role="option" data-value="${options[i].value}" ${selected} data-label="${options[i].text}" data-index="${this.optionIndex}"><input aria-hidden="true" class="${this.prefix}${this.checkboxInputClass} js-${this.checkboxClass}" type="checkbox" id="${uniqueName}" ${checked} ${disabled}><label class="${this.prefix}${this.checkboxLabelClass} ${this.prefix}${this.itemClass} ${this.prefix}${this.itemClass}--option" aria-hidden="true" for="${uniqueName}"><span>${options[i].text}</span></label></li>`
+      const ariaHidden = options[i].hasAttribute('hidden') ? 'aria-hidden="true"' : ''
+      list = `${list}<li class="js-${this.optionClass}" role="option" data-value="${options[i].value}" ${selected} ${ariaHidden} data-label="${options[i].text}" data-index="${this.optionIndex}"><input class="${this.prefix}${this.checkboxInputClass} js-${this.checkboxClass}" type="checkbox" id="${uniqueName}" ${checked} ${disabled}><label class="${this.prefix}${this.checkboxLabelClass} ${this.prefix}${this.itemClass} ${this.prefix}${this.itemClass}--option" for="${uniqueName}"><span>${options[i].text}</span></label></li>`
       this.optionIndex += 1
     }
     return list