makeup-listbox-button - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

browser.json

 {
-  "dependencies":[
-    "require: ./dist/index.js"
-  ]
+  "dependencies": ["require: ./dist/index.js"]
 }

dist/cjs/index.js

@@ -10,11 +10,12 @@ "use strict";
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var defaultOptions = {
+const defaultOptions = {
   autoSelect: true,
-  buttonLabelSelector: '.expand-btn__text',
+  buttonLabelSelector: ".btn__text",
   collapseTimeout: 150,
   customElementMode: false,
-  listboxSelector: '.listbox-button__listbox',
-  floatingLabelSelector: '.expand-btn__floating-label',
-  floatingLabelInline: 'expand-btn__floating-label--inline',
-  floatingLabelAnimate: 'expand-btn__floating-label--animate'
+  listboxSelector: ".listbox-button__listbox",
+  floatingLabelSelector: ".btn__floating-label",
+  floatingLabelInline: "btn__floating-label--inline",
+  floatingLabelAnimate: "btn__floating-label--animate",
+  valueSelector: ".listbox-button__value"
 };
@@ -26,3 +27,3 @@ class _default {
     this.el = widgetEl;
-    this._buttonEl = this.el.querySelector('button');
+    this._buttonEl = this.el.querySelector("button");
     this._buttonLabelEl = widgetEl.querySelector(this._options.buttonLabelSelector);
@@ -44,5 +45,6 @@ this._buttonFloatingLabelEl = widgetEl.querySelector(this._options.floatingLabelSelector);
     this.listbox = new _makeupListbox.default(this._listboxEl, {
-      activeDescendantClassName: 'listbox-button__option--active',
-      autoReset: 'ariaSelectedOrInteractive',
-      autoSelect: this._options.autoSelect
+      activeDescendantClassName: "listbox-button__option--active",
+      autoReset: "ariaSelectedOrInteractive",
+      autoSelect: this._options.autoSelect,
+      valueSelector: this._options.valueSelector
     });
@@ -55,8 +57,8 @@ this._expander = new _makeupExpander.default(this.el, {
       contentSelector: this._options.listboxSelector,
-      expandedClass: 'listbox-button--expanded',
+      expandedClass: "listbox-button--expanded",
       expandOnClick: true,
-      focusManagement: 'focusable',
-      hostSelector: 'button'
+      focusManagement: "focusable",
+      hostSelector: "button"
     });
-    this.el.classList.add('listbox-button--js');
+    this.el.classList.add("listbox-button--js");
     if (this._buttonFloatingLabelEl) {
@@ -71,3 +73,3 @@ if (!this._buttonLabelEl.innerText) {
       this._mutationObserver.observe(this._buttonEl, {
-        attributeFilter: ['aria-expanded'],
+        attributeFilter: ["aria-expanded"],
         attributes: true,
@@ -85,21 +87,21 @@ childList: false,
   _unobserveEvents() {
-    this._buttonEl.removeEventListener('click', this._onButtonFirstClickListener);
-    this._listboxEl.removeEventListener('click', this._onListboxClickListener);
-    this._listboxEl.removeEventListener('keydown', this._onListboxKeyDownListener);
-    this._listboxEl.removeEventListener('makeup-listbox-init', this._onListboxInitListener);
-    this._listboxEl.removeEventListener('makeup-listbox-change', this._onListboxChangeListener);
+    this._buttonEl.removeEventListener("click", this._onButtonFirstClickListener);
+    this._listboxEl.removeEventListener("click", this._onListboxClickListener);
+    this._listboxEl.removeEventListener("keydown", this._onListboxKeyDownListener);
+    this._listboxEl.removeEventListener("makeup-listbox-init", this._onListboxInitListener);
+    this._listboxEl.removeEventListener("makeup-listbox-change", this._onListboxChangeListener);
   }
   _observeEvents() {
     if (this._destroyed !== true) {
-      this._buttonEl.addEventListener('click', this._onButtonFirstClickListener, {
+      this._buttonEl.addEventListener("click", this._onButtonFirstClickListener, {
         once: true
       });
-      this._listboxEl.addEventListener('click', this._onListboxClickListener);
-      this._listboxEl.addEventListener('keydown', this._onListboxKeyDownListener);
-      this._listboxEl.addEventListener('makeup-listbox-init', this._onListboxInitListener);
-      this._listboxEl.addEventListener('makeup-listbox-change', this._onListboxChangeListener);
+      this._listboxEl.addEventListener("click", this._onListboxClickListener);
+      this._listboxEl.addEventListener("keydown", this._onListboxKeyDownListener);
+      this._listboxEl.addEventListener("makeup-listbox-init", this._onListboxInitListener);
+      this._listboxEl.addEventListener("makeup-listbox-change", this._onListboxChangeListener);
     }
   }
   collapse() {
-    var widget = this;
+    const widget = this;
     setTimeout(function () {
@@ -139,3 +141,3 @@ widget._unobserveMutations();
 function _onListboxInit(e) {
-  this.el.dispatchEvent(new CustomEvent('makeup-listbox-button-init', {
+  this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-init", {
     detail: e.detail
@@ -145,3 +147,3 @@ }));
 function _onListboxChange(e) {
-  var toValue = e.detail.optionValue;
+  const toValue = e.detail.optionValue;
   if (this._buttonPrefix) {
@@ -160,3 +162,3 @@ this._buttonLabelEl.innerText = this._buttonPrefix + toValue;
   }
-  this.el.dispatchEvent(new CustomEvent('makeup-listbox-button-change', {
+  this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", {
     detail: e.detail
@@ -166,5 +168,5 @@ }));
 function _onMutation(mutationsList) {
-  for (var mutation of mutationsList) {
-    if (mutation.type === 'attributes') {
-      this.el.dispatchEvent(new CustomEvent('makeup-listbox-button-mutation', {
+  for (const mutation of mutationsList) {
+    if (mutation.type === "attributes") {
+      this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-mutation", {
         detail: {
@@ -171,0 +173,0 @@ attributeName: mutation.attributeName

dist/mjs/index.js

@@ -5,9 +5,10 @@ import Expander from "makeup-expander";
   autoSelect: true,
-  buttonLabelSelector: ".expand-btn__text",
+  buttonLabelSelector: ".btn__text",
   collapseTimeout: 150,
   customElementMode: false,
   listboxSelector: ".listbox-button__listbox",
-  floatingLabelSelector: ".expand-btn__floating-label",
-  floatingLabelInline: "expand-btn__floating-label--inline",
-  floatingLabelAnimate: "expand-btn__floating-label--animate"
+  floatingLabelSelector: ".btn__floating-label",
+  floatingLabelInline: "btn__floating-label--inline",
+  floatingLabelAnimate: "btn__floating-label--animate",
+  valueSelector: ".listbox-button__value"
 };
@@ -37,3 +38,4 @@ class src_default {
       autoReset: "ariaSelectedOrInteractive",
-      autoSelect: this._options.autoSelect
+      autoSelect: this._options.autoSelect,
+      valueSelector: this._options.valueSelector
     });
@@ -144,7 +146,9 @@ this._expander = new Expander(this.el, {
     if (mutation.type === "attributes") {
-      this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-mutation", {
-        detail: {
-          attributeName: mutation.attributeName
-        }
-      }));
+      this.el.dispatchEvent(
+        new CustomEvent("makeup-listbox-button-mutation", {
+          detail: {
+            attributeName: mutation.attributeName
+          }
+        })
+      );
     }
@@ -151,0 +155,0 @@ }

package.json

 {
   "name": "makeup-listbox-button",
   "description": "A JavaScript class representing an ARIA listbox button",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "./dist/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "./dist/mjs/index.js",

README.md

@@ -13,32 +13,32 @@ # makeup-listbox-button
 <span class="listbox-button">
-    <button class="expand-btn" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
-        <span class="expand-btn__cell">
-            <span class="expand-btn__text">Option 1</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="icon.svg#icon-dropdown"></use>
-            </svg>
-        </span>
-    </button>
-    <div class="listbox-button__listbox">
-        <div class="listbox-button__options" role="listbox" tabindex="0">
-            <div class="listbox-button__option" role="option">
-                <span class="listbox-button__value">Option 1</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="icon.svg#icon-tick-small"></use>
-                </svg>
-            </div>
-            <div class="listbox-button__option" role="option">
-                <span class="listbox-button__value">Option 2</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="icon.svg#icon-tick-small"></use>
-                </svg>
-            </div>
-            <div class="listbox-button__option" role="option">
-                <span class="listbox-button__value">Option 3</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="icon.svg#icon-tick-small"></use>
-                </svg>
-            </div>
-        </div>
+  <button class="expand-btn" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
+    <span class="expand-btn__cell">
+      <span class="expand-btn__text">Option 1</span>
+      <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+        <use xlink:href="icon.svg#icon-dropdown"></use>
+      </svg>
+    </span>
+  </button>
+  <div class="listbox-button__listbox">
+    <div class="listbox-button__options" role="listbox" tabindex="0">
+      <div class="listbox-button__option" role="option">
+        <span class="listbox-button__value">Option 1</span>
+        <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+          <use xlink:href="icon.svg#icon-tick-small"></use>
+        </svg>
+      </div>
+      <div class="listbox-button__option" role="option">
+        <span class="listbox-button__value">Option 2</span>
+        <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+          <use xlink:href="icon.svg#icon-tick-small"></use>
+        </svg>
+      </div>
+      <div class="listbox-button__option" role="option">
+        <span class="listbox-button__value">Option 3</span>
+        <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+          <use xlink:href="icon.svg#icon-tick-small"></use>
+        </svg>
+      </div>
     </div>
+  </div>
 </span>
@@ -54,10 +54,10 @@ ```
 ```js
-import ListboxButton from 'makeup-listbox-button';
+import ListboxButton from "makeup-listbox-button";
 
-document.querySelectorAll('.listbox-button').forEach(function(el, i) {
-    const widget = new ListboxButton(el, config);
+document.querySelectorAll(".listbox-button").forEach(function (el, i) {
+  const widget = new ListboxButton(el, config);
 
-    el.addEventListener('makeup-listbox-button-change', function(e) {
-        console.log(e.type, e.detail);
-    });
+  el.addEventListener("makeup-listbox-button-change", function (e) {
+    console.log(e.type, e.detail);
+  });
 });
@@ -78,3 +78,3 @@ ```
 
-* `fromValue`: the old value
-* `toValue`: the new value
+- `fromValue`: the old value
+- `toValue`: the new value

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

15739

decreased by-29.76%

Number of package files

5

decreased by-16.67%

Lines of code

325

decreased by-30.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes