@cfpb/cfpb-forms - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

package.json

 {
   "name": "@cfpb/cfpb-forms",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Design System form fields",
@@ -11,6 +11,6 @@ "less": "src/cfpb-forms.less",
   "dependencies": {
-    "@cfpb/cfpb-buttons": "^0.6.0",
-    "@cfpb/cfpb-core": "^0.6.0",
-    "@cfpb/cfpb-grid": "^0.6.0",
-    "@cfpb/cfpb-icons": "^0.6.0"
+    "@cfpb/cfpb-buttons": "^0.7.0",
+    "@cfpb/cfpb-core": "^0.7.0",
+    "@cfpb/cfpb-grid": "^0.7.0",
+    "@cfpb/cfpb-icons": "^0.7.0"
   },
@@ -20,3 +20,3 @@ "keywords": [
   ],
-  "gitHead": "6dd58b56abcd0c5a98fbe66a5fcbabf56b31060e"
+  "gitHead": "6cd9639374c987030a84d78fcf2428a2db8dc9cf"
 }

src/organisms/Multiselect.js

@@ -23,3 +23,2 @@ // Required modules.
 
-  const LIST_CLASS = 'm-list';
   const CHECKBOX_INPUT_CLASS = 'a-checkbox';
@@ -75,3 +74,3 @@ const TEXT_INPUT_CLASS = 'a-text-input';
     _instance = this;
-    _name = _dom.name;
+    _name = _dom.name || _dom.id;
     _placeholder = _dom.getAttribute( 'placeholder' );
@@ -81,3 +80,3 @@ _options = _dom.options || [];
     if ( _options.length > 0 ) {
-      _model = new MultiselectModel( _options ).init();
+      _model = new MultiselectModel( _options, _name ).init();
       _optionsData = _model.getOptions();
@@ -141,5 +140,3 @@ const newDom = _populateMarkup();
     _selectionsDom = MultiselectUtils.create( 'ul', {
-      className: LIST_CLASS + ' ' +
-                 LIST_CLASS + '__unstyled ' +
-                 BASE_CLASS + '_choices',
+      className: BASE_CLASS + '_choices',
       inside:    _containerDom
@@ -167,5 +164,3 @@ } );
     _optionsDom = MultiselectUtils.create( 'ul', {
-      className: LIST_CLASS + ' ' +
-                 LIST_CLASS + '__unstyled ' +
-                 BASE_CLASS + '_options',
+      className: BASE_CLASS + '_options',
       inside:    _fieldsetDom
@@ -181,3 +176,3 @@ } );
       MultiselectUtils.create( 'input', {
-        'id':     option.value,
+        'id':      option.id,
         // Type must come before value or IE fails
@@ -193,3 +188,3 @@ 'type':    'checkbox',
       MultiselectUtils.create( 'label', {
-        'for':         option.value,
+        'for':         option.id,
         'textContent': option.text,
@@ -225,3 +220,3 @@ 'className':   BASE_CLASS + '_label a-label',
     const selectionsItemLabelDom = MultiselectUtils.create( 'button', {
-      innerHTML: '<label for=' + option.value + '>' + option.text + closeIcon + '</label>',
+      innerHTML: '<label for=' + option.id + '>' + option.text + closeIcon + '</label>',
       inside:    selectionsItemDom
@@ -233,2 +228,3 @@ } );
 
+    selectionsItemLabelDom.addEventListener( 'click', _selectionClickHandler );
     selectionsItemLabelDom.addEventListener( 'keydown', _selectionKeyDownHandler );
@@ -480,2 +476,3 @@ }
     for ( let j = 0, len = labelButtons.length; j < len; j++ ) {
+      labelButtons[j].addEventListener( 'click', _selectionClickHandler );
       labelButtons[j].addEventListener( 'keydown', _selectionKeyDownHandler );
@@ -486,2 +483,18 @@ }
   /**
+   * This passes the click of the selected item button down to the label it
+   * contains. This is only required for browsers (IE11) that prevent the
+   * click of a selected item from cascading from the button down to the label
+   * it contains.
+   * @param {MouseEvent} event - The mouse click event object.
+   */
+  function _selectionClickHandler( event ) {
+    const target = event.target;
+    if ( target.tagName === 'BUTTON' ) {
+      event.preventDefault();
+      target.removeEventListener( 'click', _selectionClickHandler );
+      target.querySelector( 'label' ).click();
+    }
+  }
+
+  /**
    * @param {KeyEvent} event - The key down event object.
@@ -488,0 +501,0 @@ */

src/organisms/MultiselectModel.js

@@ -31,5 +31,7 @@ // Undefined return value for void methods.
  *   Set of options from a <select> element.
+ * @param {string} name - a unique name for this multiselect.
  */
-function MultiselectModel( options ) {
+function MultiselectModel( options, name ) {
   const _options = options;
+  const _name = name;
   let _optionsData = [];
@@ -70,2 +72,3 @@
       cleaned.push( {
+        id:      _getOptionId( item ),
         value:   item.value,
@@ -192,2 +195,11 @@ text:    item.text,
 
+  /**
+   * @param {HTMLNode} item - An option HTML node.
+   * @returns {string} A (hopefully) unique ID.
+   *   If it's not unique, we have a duplicate option value.
+   */
+  function _getOptionId( item ) {
+    return _name + '-' + item.value.trim().replace( /\s+/g, '-' ).toLowerCase();
+  }
+
   this.init = init;
@@ -194,0 +206,0 @@

No alert changes

Improved metrics

Total package byte prevSize

159217

increased by0.65%

Lines of code

3211

increased by0.75%

Dependency changes

• + Added@cfpb/cfpb-buttons@0.7.9(transitive)

• + Added@cfpb/cfpb-core@0.7.7(transitive)

• + Added@cfpb/cfpb-grid@0.7.2(transitive)

• + Added@cfpb/cfpb-icons@0.7.9(transitive)

• - Removed@cfpb/cfpb-buttons@0.6.0(transitive)

• - Removed@cfpb/cfpb-core@0.6.0(transitive)

• - Removed@cfpb/cfpb-grid@0.6.0(transitive)

• - Removed@cfpb/cfpb-icons@0.6.0(transitive)

• Updated@cfpb/cfpb-buttons@^0.7.0

• Updated@cfpb/cfpb-core@^0.7.0

• Updated@cfpb/cfpb-grid@^0.7.0

• Updated@cfpb/cfpb-icons@^0.7.0