minor release (#86)

CHANGELOG.md

@@ -1,6 +1,12 @@
 Changelog
 =========
 
+## 4.1.0
+- Fixes a styling issue in Beanstalk and Ivy themes where native select element was discoverable on click to the left of the head element.
+- Fixes the `behavior.closeOnSelect` configuration option which not previously implemented internally.
+- Adds ensures that when `behavior.openOnFocus` is set, that selects also close on `blur`.
+- Updates and locks dependencies.
+
 ## 4.0.5
 
 - Fixes a styling issue with Firefox which caused a long scrolling page to scroll to the top when a dropdown is focused.

config/mocha/mocha.opts

@@ -1,3 +1,4 @@
 --require ts-node/register
+--recursive
 --watch-extensions ts
 **/*.test.ts

config/nyc/.nycrc.json

@@ -10,15 +10,9 @@
     "extension": [
       ".ts"
     ],
-    "watermarks": {
-      "lines": [100, 100],
-      "functions": [100, 100],
-      "branches": [100, 100],
-      "statements": [100, 100]
-    },
     "exclude": [
-      "./demos",
-      "./config",
+      "demos",
+      "config",
       "**/umd.ts",
       "**/index.ts",
       "**/*.d.ts",
@@ -31,5 +25,9 @@
       "dist",
       "coverage"
     ],
+    "statements": 100,
+    "branches": 100,
+    "functions": 100,
+    "lines": 100,
     "all": true
 }

demos/themes/beanstalk.css

@@ -27,6 +27,7 @@
 }
 
 .edd-head {
+    position: relative;
     overflow: hidden;
     border: 1px solid #eee;
     transition: box-shadow 200ms, border-color 150ms;

demos/themes/ivy.css

@@ -24,6 +24,7 @@
 }
 
 .edd-head {
+    position: relative;
     overflow: hidden;
     border: 1px solid #eee;
     transition: box-shadow 200ms;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easydropdown",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "A lightweight library for building beautiful styleable select elements",
   "author": "KunkaLabs Limited",
   "private": false,
@@ -13,7 +13,7 @@
     "url": "https://github.com/patrickkunka/easydropdown/"
   },
   "scripts": {
-    "test": "mocha --opts ./config/mocha/mocha.opts",
+    "test": "mocha --opts ./config/mocha/mocha.opts --exit",
     "test:watch": "npm run test -- --watch",
     "test:cover": "nyc npm run test",
     "test:size": "bundlesize",
@@ -39,34 +39,34 @@
     }
   ],
   "dependencies": {
-    "custom-event-polyfill": "^0.3.0",
-    "helpful-merge": "^0.1.0"
+    "custom-event-polyfill": "1.0.6",
+    "helpful-merge": "0.2.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.0.5",
-    "@types/mocha": "^2.2.44",
-    "@types/node": "^8.0.53",
-    "@types/sinon": "^4.3.1",
-    "bundlesize": "^0.17.0",
-    "chai": "^3.5.0",
-    "chai-shallow-deep-equal": "^1.4.0",
-    "coveralls": "^3.0.0",
-    "istanbul": "^0.4.5",
-    "jsdom": "^11.8.0",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^3.0.2",
-    "nyc": "^11.3.0",
-    "sinon": "^4.5.0",
-    "source-map-support": "^0.5.0",
-    "stylelint": "^9.2.0",
-    "stylelint-config-standard": "^18.2.0",
-    "ts-loader": "^4.2.0",
-    "ts-node": "^3.3.0",
-    "tsconfig-paths": "^3.3.1",
-    "tslint": "^5.8.0",
-    "tslint-eslint-rules": "^5.1.0",
-    "typescript": "^2.6.1",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^2.1.2"
+    "@types/chai": "4.1.7",
+    "@types/mocha": "5.2.5",
+    "@types/node": "10.12.12",
+    "@types/sinon": "7.0.4",
+    "bundlesize": "0.17.1",
+    "chai": "4.2.0",
+    "chai-shallow-deep-equal": "1.4.6",
+    "coveralls": "3.0.3",
+    "istanbul": "0.4.5",
+    "jsdom": "13.0.0",
+    "jsdom-global": "3.0.2",
+    "mocha": "5.2.0",
+    "nyc": "13.3.0",
+    "sinon": "7.2.3",
+    "source-map-support": "0.5.0",
+    "stylelint": "9.2.0",
+    "stylelint-config-standard": "18.2.0",
+    "ts-loader": "5.3.0",
+    "ts-node": "7.0.1",
+    "tsconfig-paths": "3.3.1",
+    "tslint": "5.14.0",
+    "tslint-eslint-rules": "5.4.0",
+    "typescript": "3.1.6",
+    "webpack": "4.29.6",
+    "webpack-cli": "3.1.0"
   }
 }

src/Easydropdown/Easydropdown.ts

@@ -51,7 +51,7 @@ class Easydropdown {
             timers: this.timers
         });
 
-        this.timers.pollChangeIntervalId = pollForSelectChange(this.dom.select, this.state, this.actions);
+        this.timers.pollChangeIntervalId = pollForSelectChange(this.dom.select, this.state, this.actions, this.config);
 
         if (this.config.behavior.liveUpdates) {
             this.timers.pollMutationIntervalId = pollForSelectMutation(

src/Events/Handlers/handleBodyClick.test.ts

@@ -30,4 +30,24 @@ describe('handleBodyClick()', () => {
 
         assert.isTrue(selectOptionSpy.calledWith(0));
     });
+
+    it('calls `actions.selectOption()` with `close: false` if configured not to `closeOnSelect`', () => {
+        const params = createMockHandlerParams({
+            behavior: {
+                closeOnSelect: false
+            }
+        });
+
+        const selectOptionSpy = spy(params.actions, 'selectOption');
+        const option = document.createElement('div');
+        const mockEvent = createMockEvent(option);
+
+        option.setAttribute('data-ref', 'option');
+
+        params.dom.option.push(option);
+
+        handleBodyClick(mockEvent, params);
+
+        assert.isTrue(selectOptionSpy.calledWith(0, false));
+    });
 });

src/Events/Handlers/handleBodyClick.ts

@@ -2,7 +2,7 @@ import closestParent  from '../../Shared/Util/closestParent';
 import * as Selectors from '../Constants/Selectors';
 import IHandlerParams from '../Interfaces/IHandlerParams';
 
-function handleBodyClick(e: Event, {state, actions, dom}: IHandlerParams): void {
+function handleBodyClick(e: Event, {state, actions, dom, config}: IHandlerParams): void {
     e.stopPropagation();
 
     const option = closestParent(e.target as HTMLElement, Selectors.OPTION, true);
@@ -11,7 +11,7 @@ function handleBodyClick(e: Event, {state, actions, dom}: IHandlerParams): void
 
     const optionIndex = Array.prototype.indexOf.call(dom.option, option);
 
-    actions.selectOption(optionIndex);
+    actions.selectOption(optionIndex, config.behavior.closeOnSelect);
 }
 
 export default handleBodyClick;

src/Events/Handlers/handleSelectBlur.test.ts

@@ -28,4 +28,19 @@ describe('handleSelectBlur()', () => {
 
         assert.isFalse(blurSpy.called);
     });
+
+    it('calls `actions.close()` if `config.openOnFocus` is set', () => {
+        const params = createMockHandlerParams({
+            behavior: {
+                openOnFocus: true
+            }
+        });
+
+        const mockEvent = createMockEvent();
+        const closeSpy = spy(params.actions, 'close');
+
+        handleSelectBlur(mockEvent, params);
+
+        assert.isTrue(closeSpy.called);
+    });
 });

src/Events/Handlers/handleSelectBlur.ts

@@ -1,9 +1,11 @@
 import IHandlerParams from '../Interfaces/IHandlerParams';
 
-function handleSelectBlur(e: Event, {actions, state}: IHandlerParams): void {
+function handleSelectBlur(e: Event, {actions, state, config}: IHandlerParams): void {
     if (state.isKeying) return;
 
     actions.blur();
+
+    if (config.behavior.openOnFocus) actions.close();
 }
 
 export default handleSelectBlur;

src/Events/Handlers/handleSelectKeydown.test.ts

@@ -79,7 +79,27 @@ describe('handleSelectKeydown()', () => {
             });
     });
 
-    it('does not call `actions.selectOptiom()` if when the space key is pressed if searching', () => {
+    it('calls `actions.selectOption()` with `close: false` if configured not to `closeOnSelect`', () => {
+        const mockEvent = createMockEvent();
+
+        const params = createMockHandlerParams({
+            behavior: {
+                closeOnSelect: false
+            }
+        });
+
+        const selectOptionSpy = spy(params.actions, 'selectOption');
+
+        params.state.bodyStatus = BodyStatus.OPEN_ABOVE;
+
+        mockEvent.keyCode = KeyCodes.ENTER;
+
+        handleSelectKeydown(mockEvent, params);
+
+        assert.isTrue(selectOptionSpy.calledWith(params.state.focusedIndex, false));
+    });
+
+    it('does not call `actions.selectOption()` if when the space key is pressed if searching', () => {
         const mockEvent = createMockEvent();
         const params = createMockHandlerParams();
         const selectOptionSpy = spy(params.actions, 'selectOption');

src/Events/Handlers/handleSelectKeydown.ts

@@ -35,7 +35,7 @@ function handleSelectKeydown(e: KeyboardEvent, handlerParams: IHandlerParams): v
             killSelectReaction(target as HTMLSelectElement, handlerParams);
 
             if (state.isOpen) {
-                actions.selectOption(state.focusedIndex);
+                actions.selectOption(state.focusedIndex, config.behavior.closeOnSelect);
             } else {
                 dispatchOpen(actions, config, dom);
             }

src/Events/Mock/createMockHandlerParams.ts

@@ -1,16 +1,19 @@
+import merge from 'helpful-merge';
+
 import Config          from '../../Config/Config';
+import IConfig         from '../../Config/Interfaces/IConfig';
 import Timers          from '../../Easydropdown/Timers';
 import Dom             from '../../Renderer/Dom';
 import resolveActions  from '../../State/resolveActions';
 import State           from '../../State/State';
 import IHandlerParams  from '../Interfaces/IHandlerParams';
 
-const createMockHandlerParams = (): IHandlerParams => {
+const createMockHandlerParams = (options: IConfig = {}): IHandlerParams => {
     const state = new State();
     const actions = resolveActions(state);
     const dom = new Dom();
     const timers = new Timers();
-    const config = new Config();
+    const config = merge(new Config(), options);
 
     dom.head = document.createElement('div');
     dom.body = document.createElement('div');

src/Renderer/domPatch.test.ts

@@ -117,7 +117,7 @@ describe('domPatch()', () => {
 
     before(() => {
         rafStub = stub(window, 'requestAnimationFrame')
-            .callsFake(fn => fn());
+            .callsFake(fn => void fn(0) || 0);
     });
 
     after(() => rafStub.restore());

src/Shared/Polyfills/Element.matches.ts

@@ -1,3 +1,3 @@
 if (!Element.prototype.matches) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector;
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
 }

src/Shared/Util/pollForSelectChange.ts

@@ -1,16 +1,22 @@
+import Config from '../../Config/Config';
 import IActions from '../../State/Interfaces/IActions';
 import State    from '../../State/State';
 
 const POLL_INTERVAL_DURATION = 100;
 
-function pollForSelectChange(selectElement: HTMLSelectElement, state: State, actions: IActions): number {
+function pollForSelectChange(
+    selectElement: HTMLSelectElement,
+    state: State,
+    actions: IActions,
+    config: Config
+): number {
     let lastValue: string = selectElement.value;
 
     const pollIntervalId = window.setInterval(() => {
         if (selectElement.value !== lastValue) {
             const selectedIndex = state.getOptionIndexFromValue(selectElement.value);
 
-            actions.selectOption(selectedIndex);
+            actions.selectOption(selectedIndex, config.behavior.closeOnSelect);
             actions.focusOption(selectedIndex, true);
         }
 

src/State/Interfaces/IActions.ts

@@ -17,7 +17,7 @@ interface IActions {
     close(): void;
     makeScrollable(): void;
     makeUnscrollable(): void;
-    selectOption(index: number): void;
+    selectOption(index: number, close?: boolean): void;
     focusOption(index: number, shouldScrollToView?: boolean): void;
     search(): void;
     resetSearch(): void;

src/State/resolveActions.test.ts

@@ -210,14 +210,22 @@ describe('resolveActions', function(): void {
             assert.isFalse(self.state.isInvalid);
         });
 
-        it('closes the instance if open', () => {
-            self.state.bodyStatus = BodyStatus.CLOSED;
+        it('closes the instance if open and close parameter ommited', () => {
+            self.state.bodyStatus = BodyStatus.OPEN_ABOVE;
 
             self.actions.selectOption(2);
 
             assert.isFalse(self.state.isOpen);
         });
 
+        it('does not close the instance if open and close parameter passed as `false`', () => {
+            self.state.bodyStatus = BodyStatus.OPEN_ABOVE;
+
+            self.actions.selectOption(2, false);
+
+            assert.isTrue(self.state.isOpen);
+        });
+
         it('calls `actions.scrollToView` if searching', () => {
             const scrollToViewSpy = spy(self.actions, 'scrollToView');
 

src/State/resolveActions.ts

@@ -75,7 +75,7 @@ const resolveActions = (state: State): IActions => ({
         state.focusedIndex = -1;
     },
 
-    selectOption(this: IActions, index: number): void {
+    selectOption(this: IActions, index: number, close = true): void {
         const optionAtIndex = state.getOptionFromIndex(index);
 
         if (index > -1 && (!optionAtIndex || optionAtIndex.isDisabled)) return;
@@ -88,7 +88,7 @@ const resolveActions = (state: State): IActions => ({
 
         if (state.isSearching) {
             this.scrollToView(state);
-        } else {
+        } else if (close) {
             this.close();
         }
     },