feat: upgrade to ms-select-vanilla v3.x (#1439)

* feat: upgrade to ms-select-vanilla v3.x

* chore: fix styling issues in Example 11

* chore: update to latest ms-select version with fixes

examples/vite-demo-vanilla-bundle/package.json

@@ -29,7 +29,7 @@
     "flatpickr": "^4.6.13",
     "isomorphic-dompurify": "^2.6.0",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^2.2.1",
+    "multiple-select-vanilla": "^3.1.0",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.20"
   },

examples/vite-demo-vanilla-bundle/src/examples/example11.html

@@ -11,7 +11,7 @@ <h3 class="title is-3">
   </div>
 </h3>
 
-<div class="columns is-desktop">
+<div class="columns is-desktop example11-body">
   <section class="column field has-addons is-narrow">
     <div class="row">
       <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">

examples/vite-demo-vanilla-bundle/src/examples/example11.scss

@@ -4,10 +4,7 @@ $slick-autocomplete-max-height: 250px;
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
 
-.grid11 {
-  .unsaved-editable-field {
-    background-color: #fbfdd1 !important;
-  }
+.example11-body {
   .dropdown-item {
     cursor: pointer;
   }
@@ -22,4 +19,10 @@ $slick-autocomplete-max-height: 250px;
     display: inline-block;
     line-height: 18px;
   }
+}
+
+.grid11 {
+  .unsaved-editable-field {
+    background-color: #fbfdd1 !important;
+  }
 }

examples/vite-demo-vanilla-bundle/src/examples/example11.ts

@@ -13,6 +13,7 @@ import {
   type Formatter,
   Formatters,
   type GridOption,
+  type MultipleSelectOption,
   OperatorType,
   SlickGlobalEditorLock,
   type SliderOption,
@@ -183,10 +184,16 @@ export default class Example11 {
       {
         id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 80, maxWidth: 100,
         sortable: true, filterable: true,
-        editor: { model: Editors.singleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False' }], massUpdate: true },
+        editor: {
+          model: Editors.singleSelect,
+          collection: [{ value: true, label: 'True' }, { value: false, label: 'False' }],
+          massUpdate: true,
+          editorOptions: { showClear: true } as MultipleSelectOption
+        },
         filter: {
+          model: Filters.singleSelect,
           collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
+          filterOptions: { showClear: true } as MultipleSelectOption
         },
         exportWithFormatter: false,
         formatter: Formatters.checkmarkMaterial,

examples/vite-demo-vanilla-bundle/src/examples/example12.ts

@@ -13,6 +13,7 @@ import {
   Formatters,
   type GridOption,
   type LongTextEditorOption,
+  type MultipleSelectOption,
   type OnCompositeEditorChangeEventArgs,
   SlickGlobalEditorLock,
   type SliderOption,
@@ -230,7 +231,8 @@ export default class Example12 {
         exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value]?.label,
         filter: {
           model: Filters.multipleSelect,
-          collection: this.complexityLevelList
+          collection: this.complexityLevelList,
+          filterOptions: { showClear: true } as MultipleSelectOption,
         },
         editor: {
           model: Editors.singleSelect,
@@ -253,7 +255,8 @@ export default class Example12 {
         exportWithFormatter: false,
         filter: {
           collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
+          model: Filters.singleSelect,
+          filterOptions: { showClear: true } as MultipleSelectOption,
         },
         editor: { model: Editors.checkbox, massUpdate: true, },
         // editor: { model: Editors.singleSelect, collection: [{ value: true, label: 'Yes' }, { value: false, label: 'No' }], },

examples/vite-demo-vanilla-bundle/src/material-styles.scss

@@ -70,15 +70,14 @@
 
     --ms-ok-button-text-color: #009530;
     --ms-select-all-text-color: #007c28;
-    --slick-multiselect-icon-border: none;
     --slick-multiselect-icon-radio-border: none;
     --slick-multiselect-ok-button-text-color: #009530;
     --slick-multiselect-ok-button-text-hover-color: #00a736;
     --slick-multiselect-select-all-text-color: #007c28;
     --slick-column-picker-checkbox-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M8.8 19.6L1.2 12c-.3-.3-.3-.8 0-1.1l1-1c.3-.3.8-.3 1 0L9 15.7c.1.2.5.2.6 0L20.9 4.4c.2-.3.7-.3 1 0l1 1c.3.3.3.7 0 1L9.8 19.6c-.2.3-.7.3-1 0z"></path></svg>');
     --slick-column-picker-checkbox-icon-unchecked: var(--slick-column-picker-checkbox-icon-checked);
-    --slick-multiselect-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path></svg>');
     --slick-multiselect-icon-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
+    --ms-checkbox-color: var(--slick-primary-color);
     --slick-multiselect-icon-color: var(--slick-primary-color);
     --slick-multiselect-icon-radio-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path></svg>');
     --slick-multiselect-icon-radio-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
@@ -141,7 +140,11 @@
       --slick-checkbox-selector-icon-height: 22px;
       --slick-checkbox-selector-icon-bg-color: transparent;
       --slick-checkbox-selector-icon-border: none;
+      --slick-multiselect-icon-radio-color:           var(--slick-primary-color);
+      --ms-checkbox-color: var(--slick-primary-color);
+      --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)};
       --ms-ok-button-text-color: #66bb6a;
+      --ms-ok-button-text-hover-color: #{lighten(#66bb6a, 5%)};
     }
   }
 }

packages/common/package.json

@@ -76,7 +76,7 @@
     "flatpickr": "^4.6.13",
     "isomorphic-dompurify": "^2.6.0",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^2.2.1",
+    "multiple-select-vanilla": "^3.1.0",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12"
   },

packages/common/src/editors/selectEditor.ts

@@ -118,6 +118,7 @@ export class SelectEditor implements Editor {
       minHeight: 25,
       name: this.elementName,
       single: true,
+      singleRadio: true,
       renderOptionLabelAsHtml: this.columnEditor?.enableRenderHtml ?? false,
       sanitizer: (dirtyHtml: string) => sanitizeTextByAvailableSanitizer(this.gridOptions, dirtyHtml),
       onClick: () => this._isValueTouched = true,
@@ -135,6 +136,7 @@ export class SelectEditor implements Editor {
 
     if (isMultipleSelect) {
       libOptions.single = false;
+      libOptions.singleRadio = false;
       libOptions.displayTitle = true;
       libOptions.showOkButton = true;
 

packages/common/src/filters/__tests__/selectFilter.spec.ts

@@ -180,6 +180,7 @@ describe('SelectFilter', () => {
     const spyCallback = jest.spyOn(filterArguments, 'callback');
 
     mockColumn.filter!.collection = ['male', 'female'];
+    mockColumn.filter!.filterOptions = { showClear: true };
     filter.init(filterArguments);
     const filterBtnElm = divContainer.querySelector('.ms-parent.ms-filter.search-filter.filter-gender button.ms-choice') as HTMLButtonElement;
     const filterListElm = divContainer.querySelectorAll<HTMLInputElement>(`[data-name=filter-gender].ms-drop ul>li input[type=checkbox]`);
@@ -196,6 +197,23 @@ describe('SelectFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: 'IN', searchTerms: ['male'], shouldTriggerQuery: true });
   });
 
+  it('should type a search filter and expect clear() method to be called when ms-select clear button is clicked', () => {
+    const spyClear = jest.spyOn(filter, 'clear');
+
+    mockColumn.filter!.collection = ['male', 'female'];
+    mockColumn.filter!.filterOptions = { showClear: true };
+    filter.init(filterArguments);
+    const filterBtnElm = divContainer.querySelector('.ms-parent.ms-filter.search-filter.filter-gender button.ms-choice') as HTMLButtonElement;
+    filterBtnElm.click();
+
+    filter.msInstance?.setSelects(['male']);
+    filter.msInstance?.close();
+
+    const filterClearElm = filterBtnElm.querySelector(`.ms-icon-close`) as HTMLButtonElement;
+    filterClearElm.click();
+    expect(spyClear).toHaveBeenCalled();
+  });
+
   it('should pass a different operator then trigger an input change event and expect the callback to be called with the search terms we select from dropdown list', () => {
     mockColumn.filter!.operator = 'NIN';
     mockColumn.filter!.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];

packages/common/src/filters/selectFilter.ts

@@ -424,15 +424,19 @@ export class SelectFilter implements Filter {
       filter: false,  // input search term on top of the select option list
       maxHeight: 275,
       single: true,
+      singleRadio: true,
+      showSearchClear: true,
       renderOptionLabelAsHtml: this.columnFilter?.enableRenderHtml ?? false,
       sanitizer: (dirtyHtml: string) => sanitizeTextByAvailableSanitizer(this.gridOptions, dirtyHtml),
       // we will subscribe to the onClose event for triggering our callback
       // also add/remove "filled" class for styling purposes
-      onClose: () => this.onTriggerEvent()
+      onClose: () => this.onTriggerEvent(),
+      onClear: () => this.clear(),
     } as MultipleSelectOption;
 
     if (this._isMultipleSelect) {
       options.single = false;
+      options.singleRadio = false;
       options.showOkButton = true;
       options.displayTitle = true; // show tooltip of all selected items while hovering the filter
       const translationPrefix = getTranslationPrefix(this.gridOptions);

packages/common/src/styles/_variables-theme-material.scss

@@ -114,17 +114,6 @@ $slick-autocomplete-loading-icon-line-height:               0px !default;
 $slick-autocomplete-loading-icon-vertical-align:            sub !default;
 $slick-compound-filter-operator-select-border:              1px solid #{lighten($slick-primary-color, 10%)} !default;
 $slick-compound-filter-text-color:                          darken($slick-primary-color, 20%) !default;
-$slick-multiselect-icon-arrow-font-size:                    16px !default;
-$slick-multiselect-icon-color:                              $slick-primary-color !default;
-$slick-multiselect-icon-font-size:                          14px !default;
-$slick-multiselect-icon-height:                             15px !default;
-$slick-multiselect-icon-width:                              15px !default;
-$slick-multiselect-icon-margin:                             0px 4px 0 0 !default;
-$slick-multiselect-icon-checked:                            $slick-checkbox-selector-icon-checked !default;
-$slick-multiselect-icon-unchecked:                          $slick-checkbox-selector-icon-unchecked !default;
-$slick-multiselect-icon-radio-checked:                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-multiselect-icon-color)}" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path></svg>') !default;
-$slick-multiselect-icon-radio-unchecked:                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-multiselect-icon-color)}" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
-$slick-multiselect-unchecked-opacity:                       0.8 !default;
 $slick-preheader-border-right:                              1px solid #e2e2e2 !default;
 $slick-row-move-plugin-cursor:                              grab !default;
 $slick-row-move-plugin-icon-color:                          $slick-icon-color !default;
@@ -186,4 +175,9 @@ $slick-pagination-page-input-border-radius:                 3px !default;
   --slick-checkbox-selector-icon-height:          22px;
   --slick-checkbox-selector-icon-bg-color:        transparent;
   --slick-checkbox-selector-icon-border:          none;
+  --slick-multiselect-icon-radio-color:           var(--slick-primary-color);
+  --ms-checkbox-color:                            var(--slick-primary-color);
+  --ms-checkbox-hover-color:                      #{lighten(#49a54e, 13%)};
+  --ms-ok-button-text-color:                      #66bb6a;
+  --ms-ok-button-text-hover-color:                #{lighten(#66bb6a, 5%)};
 }

packages/common/src/styles/_variables-theme-salesforce.scss

@@ -129,21 +129,8 @@ $slick-autocomplete-loading-icon-line-height:                 0px !default;
 $slick-autocomplete-loading-icon-vertical-align:              sub !default;
 $slick-compound-filter-operator-select-border:                1px solid #6cb6ff !default;
 $slick-compound-filter-text-color:                            $slick-primary-color-dark !default;
-$slick-multiselect-icon-arrow-font-size:                      calc(#{$slick-icon-font-size} - 4px) !default;
 $slick-multiselect-icon-checked-color:                        $slick-highlight-color !default;
-$slick-multiselect-icon-border:                               1px solid #d6d4d4 !default;
-$slick-multiselect-icon-height:                               15px !default;
-$slick-multiselect-icon-width:                                15px !default;
-$slick-multiselect-icon-margin:                               0px 4px 0 0 !default;
-$slick-multiselect-icon-border-radius:                        0.125rem !default;
-$slick-multiselect-icon-unchecked-color:                      $slick-bare-color !default;
 $slick-multiselect-icon-radio-color:                          $slick-highlight-color !default;
-$slick-multiselect-icon-checked:                              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-multiselect-icon-checked-color)}" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path></svg>') !default;
-$slick-multiselect-icon-unchecked:                            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="transparent" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>') !default;
-$slick-multiselect-icon-radio-checked:                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-multiselect-icon-radio-color)}" viewBox="0 0 24 24"><path d="M12 3.7c4.6 0 8.3 3.7 8.3 8.3s-3.7 8.3-8.3 8.3-8.3-3.7-8.3-8.3S7.4 3.7 12 3.7z"></path></svg>') !default;
-$slick-multiselect-icon-radio-unchecked:                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="transparent" viewBox="0 0 24 24"><path d="M12 3.7c4.6 0 8.3 3.7 8.3 8.3s-3.7 8.3-8.3 8.3-8.3-3.7-8.3-8.3S7.4 3.7 12 3.7z"></path></svg>') !default;
-$slick-multiselect-icon-font-size:                            10px !default;
-$slick-multiselect-icon-radio-border-radius:                  50% !default;
 $slick-multiselect-option-highlight-bg-color:                 #fafafa !default;
 $slick-multiselect-unchecked-opacity:                         0.8 !default;
 $slick-preheader-border-right:                                1px solid #e8e8e8 !default;
@@ -205,9 +192,12 @@ $slick-pagination-page-input-border-radius:                   3px !default;
 .ms-drop.ms-dark-mode,
 .slick-dark-mode .ms-dark-mode,
 .slick-dark-mode {
+  --ms-checkbox-color:                      #3a9ef5;
+  --ms-ok-button-text-color:                #3a9ef5;
+  --slick-multiselect-icon-checked-color:   #3a9ef5;
   --slick-base-dark-menu-bg-color:          #212121;
   --slick-cell-box-shadow: 0px 1px 0px      #303030, 0px -1px 0px #303030;
-  --slick-column-picker-checkbox-color:     #2292f4;
+  --slick-column-picker-checkbox-color:     #3a9ef5;
   --slick-compound-filter-text-color:       #66b8ff;
   --slick-filled-filter-color:              #66b8ff;
   --slick-header-filter-row-border-bottom:   2px solid #0389ff;