makeup-expander - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

browser.json

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

dist/cjs/index.js

@@ -10,6 +10,6 @@ "use strict";
 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 }; }
-var defaultOptions = {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultOptions = {
   alwaysDoFocusManagement: false,
@@ -21,3 +21,3 @@ ariaControls: true,
   collapseOnClickOut: false,
-  contentSelector: '.expander__content',
+  contentSelector: ".expander__content",
   expandedClass: null,
@@ -28,3 +28,3 @@ expandOnClick: false,
   focusManagement: null,
-  hostSelector: '.expander__host',
+  hostSelector: ".expander__host",
   simulateSpacebarClick: false
@@ -88,11 +88,11 @@ };
 function manageFocus(focusManagement, contentEl) {
-  if (focusManagement === 'content') {
-    contentEl.setAttribute('tabindex', '-1');
+  if (focusManagement === "content") {
+    contentEl.setAttribute("tabindex", "-1");
     contentEl.focus();
-  } else if (focusManagement === 'focusable') {
+  } else if (focusManagement === "focusable") {
     (0, _makeupFocusables.default)(contentEl)[0].focus();
-  } else if (focusManagement === 'interactive') {
+  } else if (focusManagement === "interactive") {
     (0, _makeupFocusables.default)(contentEl, true)[0].focus();
   } else if (focusManagement !== null) {
-    var el = contentEl.querySelector("#".concat(focusManagement));
+    const el = contentEl.querySelector("#".concat(focusManagement));
     if (el) {
@@ -121,10 +121,10 @@ el.focus();
     this._mouseLeaveListener = onMouseLeave.bind(this);
-    if (this.hostEl.getAttribute('aria-expanded') === null) {
-      this.hostEl.setAttribute('aria-expanded', 'false');
+    if (this.hostEl.getAttribute("aria-expanded") === null) {
+      this.hostEl.setAttribute("aria-expanded", "false");
     }
     if (this.options.ariaControls === true) {
       // ensure the widget has an id
-      (0, _makeupNextId.default)(this.el, 'expander');
+      (0, _makeupNextId.default)(this.el, "expander");
       this.contentEl.id = this.contentEl.id || "".concat(this.el.id, "-content");
-      this.hostEl.setAttribute('aria-controls', this.contentEl.id);
+      this.hostEl.setAttribute("aria-controls", this.contentEl.id);
     }
@@ -142,5 +142,5 @@ this.expandOnClick = this.options.expandOnClick;
     if (bool === true) {
-      this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
-      this.hostEl.addEventListener('mousedown', this._hostMouseDownListener);
-      this.hostEl.addEventListener('click', this._hostClickListener);
+      this.hostEl.addEventListener("keydown", this._hostKeyDownListener);
+      this.hostEl.addEventListener("mousedown", this._hostMouseDownListener);
+      this.hostEl.addEventListener("click", this._hostClickListener);
       if (this.options.autoCollapse === true) {
@@ -151,5 +151,5 @@ this.collapseOnClickOut = true;
     } else {
-      this.hostEl.removeEventListener('click', this._hostClickListener);
-      this.hostEl.removeEventListener('mousedown', this._hostMouseDownListener);
-      this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+      this.hostEl.removeEventListener("click", this._hostClickListener);
+      this.hostEl.removeEventListener("mousedown", this._hostMouseDownListener);
+      this.hostEl.removeEventListener("keydown", this._hostKeyDownListener);
     }
@@ -159,3 +159,3 @@ }
     if (bool === true) {
-      this.hostEl.addEventListener('focus', this._hostFocusListener);
+      this.hostEl.addEventListener("focus", this._hostFocusListener);
       if (this.options.autoCollapse === true) {
@@ -166,3 +166,3 @@ this.collapseOnClickOut = true;
     } else {
-      this.hostEl.removeEventListener('focus', this._hostFocusListener);
+      this.hostEl.removeEventListener("focus", this._hostFocusListener);
     }
@@ -172,4 +172,4 @@ }
     if (bool === true) {
-      this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
-      this.contentEl.addEventListener('mouseenter', this._hostHoverListener);
+      this.hostEl.addEventListener("mouseenter", this._hostHoverListener);
+      this.contentEl.addEventListener("mouseenter", this._hostHoverListener);
       if (this.options.autoCollapse === true) {
@@ -179,4 +179,4 @@ this.collapseOnMouseOut = true;
     } else {
-      this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
-      this.contentEl.removeEventListener('mouseenter', this._hostHoverListener);
+      this.hostEl.removeEventListener("mouseenter", this._hostHoverListener);
+      this.contentEl.removeEventListener("mouseenter", this._hostHoverListener);
     }
@@ -186,11 +186,11 @@ }
     if (bool === true) {
-      document.addEventListener('click', this._documentClickListener);
-      document.addEventListener('touchstart', this._documentTouchStartListener);
-      document.addEventListener('touchmove', this._documentTouchMoveListener);
-      document.addEventListener('touchend', this._documentTouchEndListener);
+      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);
+      document.removeEventListener("click", this._documentClickListener);
+      document.removeEventListener("touchstart", this._documentTouchStartListener);
+      document.removeEventListener("touchmove", this._documentTouchMoveListener);
+      document.removeEventListener("touchend", this._documentTouchEndListener);
     }
@@ -200,5 +200,5 @@ }
     if (bool === true) {
-      this.el.addEventListener('focusExit', this._focusExitListener);
+      this.el.addEventListener("focusExit", this._focusExitListener);
     } else {
-      this.el.removeEventListener('focusExit', this._focusExitListener);
+      this.el.removeEventListener("focusExit", this._focusExitListener);
     }
@@ -208,15 +208,15 @@ }
     if (bool === true) {
-      this.el.addEventListener('mouseleave', this._mouseLeaveListener);
-      this.contentEl.addEventListener('mouseleave', this._mouseLeaveListener);
+      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);
+      this.el.removeEventListener("mouseleave", this._mouseLeaveListener);
+      this.contentEl.removeEventListener("mouseleave", this._mouseLeaveListener);
     }
   }
   get expanded() {
-    return this.hostEl.getAttribute('aria-expanded') === 'true';
+    return this.hostEl.getAttribute("aria-expanded") === "true";
   }
   set expanded(bool) {
     if (bool === true && this.expanded === false) {
-      this.hostEl.setAttribute('aria-expanded', 'true');
+      this.hostEl.setAttribute("aria-expanded", "true");
       if (this.options.expandedClass) {
@@ -228,3 +228,3 @@ this.el.classList.add(this.options.expandedClass);
       }
-      this.el.dispatchEvent(new CustomEvent('expander-expand', {
+      this.el.dispatchEvent(new CustomEvent("expander-expand", {
         bubbles: true,
@@ -235,7 +235,7 @@ detail: this.contentEl
     if (bool === false && this.expanded === true) {
-      this.hostEl.setAttribute('aria-expanded', 'false');
+      this.hostEl.setAttribute("aria-expanded", "false");
       if (this.options.expandedClass) {
         this.el.classList.remove(this.options.expandedClass);
       }
-      this.el.dispatchEvent(new CustomEvent('expander-collapse', {
+      this.el.dispatchEvent(new CustomEvent("expander-collapse", {
         bubbles: true,
@@ -242,0 +242,0 @@ detail: this.contentEl

package.json

 {
   "name": "makeup-expander",
   "description": "Creates the basic interactivity for an element that expands and collapses another element.",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "main": "./dist/cjs/index.js",
@@ -13,3 +13,3 @@ "module": "./dist/mjs/index.js",
   },
-  "repository": "https://github.com/makeup/makeup-js/tree/master/packages/makeup-expander",
+  "repository": "https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-expander",
   "author": "Ian McBurnie <[e-mail]>",
@@ -30,5 +30,5 @@ "license": "MIT",
   "dependencies": {
-    "makeup-exit-emitter": "~0.4.0",
-    "makeup-focusables": "~0.3.0",
-    "makeup-next-id": "~0.4.0"
+    "makeup-exit-emitter": "^0.4.2",
+    "makeup-focusables": "^0.3.2",
+    "makeup-next-id": "^0.4.2"
   },
@@ -43,3 +43,4 @@ "files": [
     "extends @ebay/browserslist-config"
-  ]
+  ],
+  "gitHead": "4d199965cba30b5f63cfc38b5b58544cfc5b27c1"
 }

README.md

@@ -15,10 +15,10 @@ # makeup-expander
 <div class="expander">
-    <button class="expander__host">Click for Flyout</button>
-    <div class="expander__content">
-        <p>Any kind of HTML control can go inside...</p>
-        <p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
-        <p>A button: <button>Click Me</button></p>
-        <p>An input: <input type="text" aria-label="Dummy textbox"></p>
-        <p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox"></p>
-    </div>
+  <button class="expander__host">Click for Flyout</button>
+  <div class="expander__content">
+    <p>Any kind of HTML control can go inside...</p>
+    <p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
+    <p>A button: <button>Click Me</button></p>
+    <p>An input: <input type="text" aria-label="Dummy textbox" /></p>
+    <p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox" /></p>
+  </div>
 </div>
@@ -28,10 +28,10 @@ ```
 ```js
-import Expander from 'makeup-expander';
+import Expander from "makeup-expander";
 
 // get an element reference
-const widgetEl = document.querySelector('.expander');
+const widgetEl = document.querySelector(".expander");
 
 // options
 const options = {
-    expandOnClick: true
+  expandOnClick: true,
 };
@@ -47,7 +47,7 @@
 .expander__content {
-    display: none;
+  display: none;
 }
 
 .expander__host[aria-expanded="true"] ~ .expander__content {
-    display: block;
+  display: block;
 }
@@ -62,12 +62,12 @@ ```
 <div class="expander">
-    <span>
-        <input class="expander__host" type="text">
-    </span>
-    <div class="expander__content">
-        <p>Any kind of HTML control can go inside...</p>
-        <p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
-        <p>A button: <button>Click Me</button></p>
-        <p>An input: <input type="text" aria-label="Dummy textbox"></p>
-        <p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox"></p>
-    </div>
+  <span>
+    <input class="expander__host" type="text" />
+  </span>
+  <div class="expander__content">
+    <p>Any kind of HTML control can go inside...</p>
+    <p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
+    <p>A button: <button>Click Me</button></p>
+    <p>An input: <input type="text" aria-label="Dummy textbox" /></p>
+    <p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox" /></p>
+  </div>
 </div>
@@ -81,12 +81,12 @@ ```
 const options = {
-    expandedClass: 'expander--expanded',
-    expandOnFocus: true
+  expandedClass: "expander--expanded",
+  expandOnFocus: true,
 };
 ```
 
-Setting focus on the host (a text input) sets it's aria-expanded state *and* add adds the chosen class to the root. CSS can be used to display the content accordingly, for example:
+Setting focus on the host (a text input) sets it's aria-expanded state _and_ add adds the chosen class to the root. CSS can be used to display the content accordingly, for example:
 
 ```css
 .expander--expanded .expander__content {
-    display: block;
+  display: block;
 }
@@ -97,16 +97,16 @@ ```
 
-* `el`: the root widget el
-* `options.alwaysDoFocusManagement`: whether `focusManagement` option (see below) should apply for mouse click
-* `options.ariaControls`: specify whether `aria-controls` relationship should be created between host and overlay (default: true)
-* `options.autoCollapse`: applies a collapse behavior (`collapseOnClick`, `collapseOnFocusOut`, `collapseOnMouseOut`) based on expand behaviour (default: false)
-* `options.collapseOnClickOut`: whether the content should collapse when clicking outside of content (default: false)
-* `options.collapseOnFocusOut`: whether the content should collapse when focus leaves the content (default: false)
-* `options.collapseOnMouseOut`: whether the content should collapse when mouse leaves the content (default: false)
-* `options.contentSelector`: the query selector for the expandee element in relation to the widget (default: '.expander__content')
-* `options.expandOnClick`: whether the host should be click activated (default: false)
-* `options.expandOnFocus`: whether the host should be focus activated (default: false)
-* `options.expandOnHover`: whether the host should be hover activated (default: false)
-* `options.focusManagement`: where keyboard focus should go (null, 'content', 'focusable', 'interactive', or ID reference) when expanded via `ENTER` or `SPACEBAR` (default: null)
-* `options.hostSelector`: the query selector for the host element in relation to the widget (default: '.expander__host')
-* `options.expandedClass`: the class which will be used on the root element to signify expanded state. **Example:** `foo--expanded`; this mirrors the `aria-expanded="true"` setting on the host element
+- `el`: the root widget el
+- `options.alwaysDoFocusManagement`: whether `focusManagement` option (see below) should apply for mouse click
+- `options.ariaControls`: specify whether `aria-controls` relationship should be created between host and overlay (default: true)
+- `options.autoCollapse`: applies a collapse behavior (`collapseOnClick`, `collapseOnFocusOut`, `collapseOnMouseOut`) based on expand behaviour (default: false)
+- `options.collapseOnClickOut`: whether the content should collapse when clicking outside of content (default: false)
+- `options.collapseOnFocusOut`: whether the content should collapse when focus leaves the content (default: false)
+- `options.collapseOnMouseOut`: whether the content should collapse when mouse leaves the content (default: false)
+- `options.contentSelector`: the query selector for the expandee element in relation to the widget (default: '.expander\_\_content')
+- `options.expandOnClick`: whether the host should be click activated (default: false)
+- `options.expandOnFocus`: whether the host should be focus activated (default: false)
+- `options.expandOnHover`: whether the host should be hover activated (default: false)
+- `options.focusManagement`: where keyboard focus should go (null, 'content', 'focusable', 'interactive', or ID reference) when expanded via `ENTER` or `SPACEBAR` (default: null)
+- `options.hostSelector`: the query selector for the host element in relation to the widget (default: '.expander\_\_host')
+- `options.expandedClass`: the class which will be used on the root element to signify expanded state. **Example:** `foo--expanded`; this mirrors the `aria-expanded="true"` setting on the host element
 
@@ -117,26 +117,26 @@ ## Properties
 
-* `collapseOnClickOut`
-* `collapseOnFocusOut`
-* `collapseOnMouseOut`
-* `expanded`
-* `expandOnClick`
-* `expandOnFocus`
-* `expandOnHover`
+- `collapseOnClickOut`
+- `collapseOnFocusOut`
+- `collapseOnMouseOut`
+- `expanded`
+- `expandOnClick`
+- `expandOnFocus`
+- `expandOnHover`
 
 ## Methods
 
-* `collapse()`: set state to collapsed (DEPRECATED)
-* `expand()`: set state to expanded (DEPRECATED)
-* `isExpanded()`: returns expanded state (DEPRECATED)
-* `toggle()`: toggle expanded/collapsed state (DEPRECATED)
+- `collapse()`: set state to collapsed (DEPRECATED)
+- `expand()`: set state to expanded (DEPRECATED)
+- `isExpanded()`: returns expanded state (DEPRECATED)
+- `toggle()`: toggle expanded/collapsed state (DEPRECATED)
 
 ## Events
 
-* `expander-collapse`
-* `expander-expand`
+- `expander-collapse`
+- `expander-expand`
 
 ## Dependencies
 
-* [makeup-exit-emitter](https://github.com/makeup/makeup-js/tree/master/packages/makeup-exit-emitter)
-* [makeup-focusables](https://github.com/makeup/makeup-js/tree/master/packages/makeup-focusables)
-* [makeup-next-id](https://github.com/makeup/makeup-js/tree/master/packages/makeup-next-id)
+- [makeup-exit-emitter](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-exit-emitter)
+- [makeup-focusables](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-focusables)
+- [makeup-next-id](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-next-id)

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37206

increased by26.9%

Lines of code

773

increased by35.38%

Dependency changes

• Updatedmakeup-exit-emitter@^0.4.2

• Updatedmakeup-focusables@^0.3.2

• Updatedmakeup-next-id@^0.4.2