makeup-expander - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

dist/cjs/index.js

@@ -7,21 +7,8 @@ "use strict";
 exports.default = void 0;
-
 var _makeupNextId = _interopRequireDefault(require("makeup-next-id"));
-
 var ExitEmitter = _interopRequireWildcard(require("makeup-exit-emitter"));
-
 var _makeupFocusables = _interopRequireDefault(require("makeup-focusables"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 var defaultOptions = {
@@ -43,10 +30,8 @@ alwaysDoFocusManagement: false,
 };
-
 function onHostKeyDown(e) {
   if (e.keyCode === 13 || e.keyCode === 32) {
     this._keyboardClickFlag = true;
-  } // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.
+  }
+  // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.
   // careful! if host already triggers click events naturally, we end up with a "double-click".
-
-
   if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) {
@@ -56,7 +41,5 @@ this.hostEl.click();
 }
-
 function onHostMouseDown() {
   this._mouseClickFlag = true;
 }
-
 function onHostClick() {
@@ -67,3 +50,2 @@ this._expandWasKeyboardClickActivated = this._keyboardClickFlag;
 }
-
 function onHostFocus() {
@@ -73,3 +55,2 @@ this._expandWasFocusActivated = true;
 }
-
 function onHostHover() {
@@ -80,16 +61,11 @@ clearTimeout(this._mouseLeft);
 }
-
 function onFocusExit() {
   this.expanded = false;
 }
-
 function onMouseLeave() {
-  var _this = this;
-
   clearTimeout(this._mouseLeft);
-  this._mouseLeft = setTimeout(function () {
-    _this.expanded = false;
+  this._mouseLeft = setTimeout(() => {
+    this.expanded = false;
   }, 300);
 }
-
 function _onDocumentClick(e) {
@@ -100,15 +76,11 @@ if (this.el.contains(e.target) === false) {
 }
-
 function _onDocumentTouchStart() {
   this.documentClick = true;
 }
-
 function _onDocumentTouchMove() {
   this.documentClick = false;
 }
-
 function _onDocumentTouchEnd(e) {
   if (this.documentClick === true) {
     this.documentClick = false;
-
     if (this.el.contains(e.target) === false) {
@@ -119,3 +91,2 @@ this.expanded = false;
 }
-
 function manageFocus(focusManagement, contentEl) {
@@ -131,3 +102,2 @@ if (focusManagement === 'content') {
     var el = contentEl.querySelector("#".concat(focusManagement));
-
     if (el) {
@@ -138,11 +108,7 @@ el.focus();
 }
-
-var _default = /*#__PURE__*/function () {
-  function _default(el, selectedOptions) {
-    _classCallCheck(this, _default);
-
+class _default {
+  constructor(el, selectedOptions) {
     this.options = Object.assign({}, defaultOptions, selectedOptions);
     this.el = el;
     this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el
-
     this.contentEl = el.querySelector(this.options.contentSelector);
@@ -161,7 +127,5 @@ ExitEmitter.addFocusExit(this.el);
     this._mouseLeaveListener = onMouseLeave.bind(this);
-
     if (this.hostEl.getAttribute('aria-expanded') === null) {
       this.hostEl.setAttribute('aria-expanded', 'false');
     }
-
     if (this.options.ariaControls === true) {
@@ -173,7 +137,5 @@ // ensure the widget has an id
     }
-
     this.expandOnClick = this.options.expandOnClick;
     this.expandOnFocus = this.options.expandOnFocus;
     this.expandOnHover = this.options.expandOnHover;
-
     if (this.options.autoCollapse === false) {
@@ -185,162 +147,129 @@ this.collapseOnClickOut = this.options.collapseOnClickOut;
   }
-
-  _createClass(_default, [{
-    key: "expandOnClick",
-    set: function set(bool) {
-      if (bool === true) {
-        this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
-        this.hostEl.addEventListener('mousedown', this._hostMouseDownListener);
-        this.hostEl.addEventListener('click', this._hostClickListener);
-
-        if (this.options.autoCollapse === true) {
-          this.collapseOnClickOut = true;
-          this.collapseOnFocusOut = true;
-        }
-      } else {
-        this.hostEl.removeEventListener('click', this._hostClickListener);
-        this.hostEl.removeEventListener('mousedown', this._hostMouseDownListener);
-        this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+  set expandOnClick(bool) {
+    if (bool === true) {
+      this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+      this.hostEl.addEventListener('mousedown', this._hostMouseDownListener);
+      this.hostEl.addEventListener('click', this._hostClickListener);
+      if (this.options.autoCollapse === true) {
+        this.collapseOnClickOut = true;
+        this.collapseOnFocusOut = true;
       }
+    } else {
+      this.hostEl.removeEventListener('click', this._hostClickListener);
+      this.hostEl.removeEventListener('mousedown', this._hostMouseDownListener);
+      this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
     }
-  }, {
-    key: "expandOnFocus",
-    set: function set(bool) {
-      if (bool === true) {
-        this.hostEl.addEventListener('focus', this._hostFocusListener);
-
-        if (this.options.autoCollapse === true) {
-          this.collapseOnClickOut = true;
-          this.collapseOnFocusOut = true;
-        }
-      } else {
-        this.hostEl.removeEventListener('focus', this._hostFocusListener);
+  }
+  set expandOnFocus(bool) {
+    if (bool === true) {
+      this.hostEl.addEventListener('focus', this._hostFocusListener);
+      if (this.options.autoCollapse === true) {
+        this.collapseOnClickOut = true;
+        this.collapseOnFocusOut = true;
       }
+    } else {
+      this.hostEl.removeEventListener('focus', this._hostFocusListener);
     }
-  }, {
-    key: "expandOnHover",
-    set: function set(bool) {
-      if (bool === true) {
-        this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
-        this.contentEl.addEventListener('mouseenter', this._hostHoverListener);
-
-        if (this.options.autoCollapse === true) {
-          this.collapseOnMouseOut = true;
-        }
-      } else {
-        this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
-        this.contentEl.removeEventListener('mouseenter', this._hostHoverListener);
+  }
+  set expandOnHover(bool) {
+    if (bool === true) {
+      this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
+      this.contentEl.addEventListener('mouseenter', this._hostHoverListener);
+      if (this.options.autoCollapse === true) {
+        this.collapseOnMouseOut = true;
       }
+    } else {
+      this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
+      this.contentEl.removeEventListener('mouseenter', this._hostHoverListener);
     }
-  }, {
-    key: "collapseOnClickOut",
-    set: function set(bool) {
-      if (bool === true) {
-        document.addEventListener('click', this._documentClickListener);
-        document.addEventListener('touchstart', this._documentTouchStartListener);
-        document.addEventListener('touchmove', this._documentTouchMoveListener);
-        document.addEventListener('touchend', this._documentTouchEndListener);
-      } else {
-        document.removeEventListener('click', this._documentClickListener);
-        document.removeEventListener('touchstart', this._documentTouchStartListener);
-        document.removeEventListener('touchmove', this._documentTouchMoveListener);
-        document.removeEventListener('touchend', this._documentTouchEndListener);
-      }
+  }
+  set collapseOnClickOut(bool) {
+    if (bool === true) {
+      document.addEventListener('click', this._documentClickListener);
+      document.addEventListener('touchstart', this._documentTouchStartListener);
+      document.addEventListener('touchmove', this._documentTouchMoveListener);
+      document.addEventListener('touchend', this._documentTouchEndListener);
+    } else {
+      document.removeEventListener('click', this._documentClickListener);
+      document.removeEventListener('touchstart', this._documentTouchStartListener);
+      document.removeEventListener('touchmove', this._documentTouchMoveListener);
+      document.removeEventListener('touchend', this._documentTouchEndListener);
     }
-  }, {
-    key: "collapseOnFocusOut",
-    set: function set(bool) {
-      if (bool === true) {
-        this.el.addEventListener('focusExit', this._focusExitListener);
-      } else {
-        this.el.removeEventListener('focusExit', this._focusExitListener);
-      }
+  }
+  set collapseOnFocusOut(bool) {
+    if (bool === true) {
+      this.el.addEventListener('focusExit', this._focusExitListener);
+    } else {
+      this.el.removeEventListener('focusExit', this._focusExitListener);
     }
-  }, {
-    key: "collapseOnMouseOut",
-    set: function set(bool) {
-      if (bool === true) {
-        this.el.addEventListener('mouseleave', this._mouseLeaveListener);
-        this.contentEl.addEventListener('mouseleave', this._mouseLeaveListener);
-      } else {
-        this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
-        this.contentEl.removeEventListener('mouseleave', this._mouseLeaveListener);
-      }
+  }
+  set collapseOnMouseOut(bool) {
+    if (bool === true) {
+      this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+      this.contentEl.addEventListener('mouseleave', this._mouseLeaveListener);
+    } else {
+      this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+      this.contentEl.removeEventListener('mouseleave', this._mouseLeaveListener);
     }
-  }, {
-    key: "expanded",
-    get: function get() {
-      return this.hostEl.getAttribute('aria-expanded') === 'true';
-    },
-    set: function set(bool) {
-      if (bool === true && this.expanded === false) {
-        this.hostEl.setAttribute('aria-expanded', 'true');
-
-        if (this.options.expandedClass) {
-          this.el.classList.add(this.options.expandedClass);
-        }
-
-        if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {
-          manageFocus(this.options.focusManagement, this.contentEl);
-        }
-
-        this.el.dispatchEvent(new CustomEvent('expander-expand', {
-          bubbles: true,
-          detail: this.contentEl
-        }));
+  }
+  get expanded() {
+    return this.hostEl.getAttribute('aria-expanded') === 'true';
+  }
+  set expanded(bool) {
+    if (bool === true && this.expanded === false) {
+      this.hostEl.setAttribute('aria-expanded', 'true');
+      if (this.options.expandedClass) {
+        this.el.classList.add(this.options.expandedClass);
       }
-
-      if (bool === false && this.expanded === true) {
-        this.hostEl.setAttribute('aria-expanded', 'false');
-
-        if (this.options.expandedClass) {
-          this.el.classList.remove(this.options.expandedClass);
-        }
-
-        this.el.dispatchEvent(new CustomEvent('expander-collapse', {
-          bubbles: true,
-          detail: this.contentEl
-        }));
+      if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {
+        manageFocus(this.options.focusManagement, this.contentEl);
       }
-
-      this._expandWasKeyboardClickActivated = false;
-      this._expandWasMouseClickActivated = false;
-      this._expandWasFocusActivated = false;
-      this._expandWasHoverActivated = false;
-      this._keyboardClickFlag = false;
-      this._mouseClickFlag = false;
+      this.el.dispatchEvent(new CustomEvent('expander-expand', {
+        bubbles: true,
+        detail: this.contentEl
+      }));
     }
-  }, {
-    key: "sleep",
-    value: function sleep() {
-      if (this._destroyed !== true) {
-        this.expandOnClick = false;
-        this.expandOnFocus = false;
-        this.expandOnHover = false;
-        this.collapseOnClickOut = false;
-        this.collapseOnFocusOut = false;
-        this.collapseOnMouseOut = false;
+    if (bool === false && this.expanded === true) {
+      this.hostEl.setAttribute('aria-expanded', 'false');
+      if (this.options.expandedClass) {
+        this.el.classList.remove(this.options.expandedClass);
       }
+      this.el.dispatchEvent(new CustomEvent('expander-collapse', {
+        bubbles: true,
+        detail: this.contentEl
+      }));
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.sleep();
-      this._destroyed = true;
-      this._hostKeyDownListener = null;
-      this._hostMouseDownListener = null;
-      this._documentClickListener = null;
-      this._documentTouchStartListener = null;
-      this._documentTouchMoveListener = null;
-      this._documentTouchEndListener = null;
-      this._hostClickListener = null;
-      this._hostFocusListener = null;
-      this._hostHoverListener = null;
-      this._focusExitListener = null;
-      this._mouseLeaveListener = null;
+    this._expandWasKeyboardClickActivated = false;
+    this._expandWasMouseClickActivated = false;
+    this._expandWasFocusActivated = false;
+    this._expandWasHoverActivated = false;
+    this._keyboardClickFlag = false;
+    this._mouseClickFlag = false;
+  }
+  sleep() {
+    if (this._destroyed !== true) {
+      this.expandOnClick = false;
+      this.expandOnFocus = false;
+      this.expandOnHover = false;
+      this.collapseOnClickOut = false;
+      this.collapseOnFocusOut = false;
+      this.collapseOnMouseOut = false;
     }
-  }]);
-
-  return _default;
-}();
-
+  }
+  destroy() {
+    this.sleep();
+    this._destroyed = true;
+    this._hostKeyDownListener = null;
+    this._hostMouseDownListener = null;
+    this._documentClickListener = null;
+    this._documentTouchStartListener = null;
+    this._documentTouchMoveListener = null;
+    this._documentTouchEndListener = null;
+    this._hostClickListener = null;
+    this._hostFocusListener = null;
+    this._hostHoverListener = null;
+    this._focusExitListener = null;
+    this._mouseLeaveListener = null;
+  }
+}
 exports.default = _default;

package.json

 {
   "name": "makeup-expander",
   "description": "Creates the basic interactivity for an element that expands and collapses another element.",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "main": "./dist/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "./dist/mjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29318

increased by2.35%

Number of package files

7

increased by16.67%

Lines of code

571

increased by5.55%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes