chore: don't re-export ms-select interface (#1488)

- re-exporting is typically discouraged by the TypeScript team, so let's stop doing that and ask the user to import it directly from the ms-select external lib

docs/column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md

@@ -36,14 +36,21 @@ this.columnDefinitions = [
 ```
 
 ### Editor Options (`MultipleSelectOption` interface)
-All the available options that can be provided as `editorOptions` to your column definitions can be found under this [multipleSelectOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/multipleSelectOption.interface.ts) and you should cast your `editorOptions` to that interface to make sure that you use only valid options of the `multiple-select.js` library.
+All the available options that can be provided as `editorOptions` to your column definitions via the `MultipleSelectOption` interface of the external library and so you should cast your `editorOptions` to that interface to make sure that you use only valid options of the `Multiple-Select-Vanilla` library.
 
 ```ts
-editor: {
-  model: Editors.SingleSelect,
-  editorOptions: {
-    maxHeight: 400
-  } as MultipleSelectOption
+import { MultipleSelectOption } from 'multiple-select-vanilla';
+
+prepareGrid() {
+  this.columnDefinitions = [{
+    id: 'isActive', name: 'Active', field: 'isActive',
+    editor: {
+      model: Editors.singleSelect,
+      editorOptions: {
+        maxHeight: 400
+      } as MultipleSelectOption
+    }
+  }];
 }
 ```
 
@@ -52,7 +59,7 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultEditorOptions: { 
+  defaultEditorOptions: {
     // Note: that `select` combines both multipleSelect & singleSelect
     select: { minHeight: 350 }, // typed as MultipleSelectOption
   }

docs/column-functionalities/filters/Select-Filter.md

@@ -554,14 +554,21 @@ this.columnDefinitions = [
 ```
 
 ### Filter Options (`MultipleSelectOption` interface)
-All the available options that can be provided as `filterOptions` to your column definitions can be found under this [multipleSelectOption interface](/ghiscoding/slickgrid-universal/tree/master/packages/common/src/interfaces/multipleSelectOption.interface.ts) and you should cast your `filterOptions` to that interface to make sure that you use only valid options of the `multiple-select.js` library.
+All the available options that can be provided as `filterOptions` to your column definitions via the `MultipleSelectOption` interface of the external library and so you should cast your `filterOptions` to that interface to make sure that you use only valid options of the `Multiple-Select-Vanilla` library.
 
 ```ts
-filter: {
-  model: Filters.singleSelect,
-  filterOptions: {
-    maxHeight: 400
-  } as MultipleSelectOption
+import { MultipleSelectOption } from 'multiple-select-vanilla';
+
+prepareGrid() {
+  this.columnDefinitions = [{
+    id: 'isActive', name: 'Active', field: 'isActive',
+    filter: {
+      model: Filters.singleSelect,
+      filterOptions: {
+        maxHeight: 400
+      } as MultipleSelectOption
+    }
+  }];
 }
 ```
 
@@ -570,7 +577,7 @@ You could also define certain options as a global level (for the entire grid or
 
 ```ts
 this.gridOptions = {
-  defaultFilterOptions: { 
+  defaultFilterOptions: {
     // Note: that `select` combines both multipleSelect & singleSelect
     select: { minHeight: 350 }, // typed as MultipleSelectOption
   }
@@ -598,53 +605,61 @@ Couple of small options were added to suit SlickGrid-Universal needs, which is w
 
 ##### Code
 ```typescript
-this.columnDefinitions = [
-  {
-    id: 'isActive', name: 'Is Active', field: 'isActive',
-    filterable: true,
-    filter: {
-      collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
-      model: Filters.singleSelect,
-      filterOptions: {
-        // add any multiple-select.js options (from original or custom version)
-        autoAdjustDropPosition: false, // by default set to True, but you can disable it
-        position: 'top'
-      } as MultipleSelectOption
+import { MultipleSelectOption } from 'multiple-select-vanilla';
+
+prepareGrid() {
+  this.columnDefinitions = [
+    {
+      id: 'isActive', name: 'Is Active', field: 'isActive',
+      filterable: true,
+      filter: {
+        collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
+        model: Filters.singleSelect,
+        filterOptions: {
+          // add any multiple-select.js options (from original or custom version)
+          autoAdjustDropPosition: false, // by default set to True, but you can disable it
+          position: 'top'
+        } as MultipleSelectOption
+      }
     }
-  }
-];
+  ];
+}
 ```
 
 #### Display shorter selected label text
 If we find that our text shown as selected text is too wide, we can choose change that by using `optionLabel` in Custom Structure.
 ```typescript
-this.columnDefinitions = [
-  {
-    id: 'isActive', name: 'Is Active', field: 'isActive',
-    filterable: true,
-    filter: {
-      collection: [
-        { value: 1, label: '1', suffix: 'day' },
-        { value: 2, label: '2', suffix: 'days' },
-        { value: 3, label: '3', suffix: 'days' },
-        // ...
-      ],
-      model: Filters.multipleSelect,
-      customStructure: {
-        label: 'label',
-        labelSuffix: 'suffix',
-        value: 'value',
-        optionLabel: 'value', // use value instead to show "1, 2" instead of "1 day, 2 days"
-      },
-      filterOptions: {
-        // use different label to show as selected text
-        // please note the Custom Structure with optionLabel defined
-        // or use "useSelectOptionLabelToHtml" to render HTML
-        useSelectOptionLabel: true
-      } as MultipleSelectOption
+import { MultipleSelectOption } from 'multiple-select-vanilla';
+
+prepareGrid() {
+  this.columnDefinitions = [
+    {
+      id: 'isActive', name: 'Is Active', field: 'isActive',
+      filterable: true,
+      filter: {
+        collection: [
+          { value: 1, label: '1', suffix: 'day' },
+          { value: 2, label: '2', suffix: 'days' },
+          { value: 3, label: '3', suffix: 'days' },
+          // ...
+        ],
+        model: Filters.multipleSelect,
+        customStructure: {
+          label: 'label',
+          labelSuffix: 'suffix',
+          value: 'value',
+          optionLabel: 'value', // use value instead to show "1, 2" instead of "1 day, 2 days"
+        },
+        filterOptions: {
+          // use different label to show as selected text
+          // please note the Custom Structure with optionLabel defined
+          // or use "useSelectOptionLabelToHtml" to render HTML
+          useSelectOptionLabel: true
+        } as MultipleSelectOption
+      }
     }
-  }
-];
+  ];
+}
 ```
 
 ### Query against another field property

docs/migrations/migration-to-5.x.md

@@ -149,3 +149,21 @@ prepareGrid() {
 
 > **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork, however the rest of the settings should be similar, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. The hope is to drop the fork whenever the original project receives all missing features.
 
+### Multiple-Select
+Please note that in previous version we were re-exporting the `MultipleSelectOption` interface from the `Multiple-Select-Vanilla` library, however re-exporting is typically discouraged by the TypeScript team and so it was removed. The change is quite simple, you simply need to import the `MultipleSelectOption` interface from the `multiple-select-vanilla` external library.
+
+```diff
+- import { MultipleSelectOption } from '@slickgrid-universal/common';
++ import { MultipleSelectOption } from 'multiple-select-vanilla';
+
+prepareGrid() {
+  this.columnDefinitions = [{
+    id: 'isActive', name: 'Active', field: 'isActive',
+    editor: {
+      model: Editors.singleSelect,
+      collection: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ],
+      editorOptions: { maxHeight: 400 } as MultipleSelectOption
+    }
+  }];
+}
+```

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

@@ -7,14 +7,15 @@ import {
   type GridOption,
   type GridStateChange,
   type Metrics,
-  type MultipleSelectOption,
   OperatorType,
   SortDirection,
 } from '@slickgrid-universal/common';
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, type GraphqlServiceOption, } from '@slickgrid-universal/graphql';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import moment from 'moment-mini';
+import { type MultipleSelectOption } from 'multiple-select-vanilla';
+
 import { ExampleGridOptions } from './example-grid-options';
 import type { TranslateService } from '../translate.service';
 import './example10.scss';

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

@@ -13,7 +13,6 @@ import {
   type Formatter,
   Formatters,
   type GridOption,
-  type MultipleSelectOption,
   OperatorType,
   SlickGlobalEditorLock,
   type SliderOption,
@@ -29,6 +28,7 @@ import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import moment from 'moment-mini';
+import { type MultipleSelectOption } from 'multiple-select-vanilla';
 
 import exampleModal from './example11-modal.html?raw';
 import Example11Modal from './example11-modal';

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

@@ -11,7 +11,6 @@ import {
   Formatters,
   type GridOption,
   type LongTextEditorOption,
-  type MultipleSelectOption,
   type OnCompositeEditorChangeEventArgs,
   SlickGlobalEditorLock,
   type SliderOption,
@@ -26,6 +25,8 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { type SlickerGridInstance } from '@slickgrid-universal/vanilla-bundle';
 import { Slicker, type VanillaForceGridBundle } from '@slickgrid-universal/vanilla-force-bundle';
 import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
+import { type MultipleSelectOption } from 'multiple-select-vanilla';
+
 import { ExampleGridOptions } from './example-grid-options';
 import countriesJson from './data/countries.json?raw';
 import './example12.scss';

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

@@ -1,5 +1,6 @@
 // import 3rd party lib multiple-select for the tests
 import 'multiple-select-vanilla';
+import type { MultipleSelectOption } from 'multiple-select-vanilla';
 import { of, Subject } from 'rxjs';
 
 import { FieldType, OperatorType } from '../../enums/index';
@@ -11,7 +12,6 @@ import { SlickGrid } from '../../core/index';
 import { HttpStub } from '../../../../../test/httpClientStub';
 import { RxJsResourceStub } from '../../../../../test/rxjsResourceStub';
 import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
-import type { MultipleSelectOption } from 'multiple-select-vanilla';
 
 jest.useFakeTimers();
 

packages/common/src/index.ts

@@ -42,7 +42,4 @@ export { Enums } from './enums/enums.index';
 
 const Utilities = { ...BackendUtilities, ...Observers, ...ServiceUtilities, ...SortUtilities, ...Utils, deepAssign: Utils.deepMerge };
 export { Utilities };
-export { SlickgridConfig } from './slickgrid-config';
-
-// re-export MultipleSelectOption to avoid breaking previous code implementation
-export type { MultipleSelectOption } from 'multiple-select-vanilla';
+export { SlickgridConfig } from './slickgrid-config';

packages/common/src/interfaces/columnEditor.interface.ts

@@ -68,7 +68,8 @@ export interface ColumnEditor {
   /**
    * Options that could be provided to the Editor, example: { container: 'body', maxHeight: 250}
    *
-   * Please note that if you use options that have existed model interfaces, you should cast with "as X",
+   * Please note that if you use options that have existed model interfaces,
+   * you should always cast it with the "as X" (where X is the external lib options interface),
    * for example { editorOptions: {maxHeight: 250} as MultipleSelectOption }
    */
   editorOptions?: any;

packages/common/src/interfaces/columnFilter.interface.ts

@@ -88,7 +88,8 @@ export interface ColumnFilter {
   /**
    * Options that could be provided to the Filter, example: { container: 'body', maxHeight: 250}
    *
-   * Please note that if you use options that have existed model interfaces, you should cast with "as X",
+   * Please note that if you use options that have existed model interfaces,
+   * you should always cast it with the "as X" (where X is the external lib options interface),
    * for example { filterOptions: {maxHeight: 250} as MultipleSelectOption }
    */
   filterOptions?: any;

packages/common/src/interfaces/gridOption.interface.ts

@@ -1,4 +1,5 @@
 import type { EventNamingStyle } from '@slickgrid-universal/event-pub-sub';
+import type { MultipleSelectOption } from 'multiple-select-vanilla';
 
 import type {
   AutoResizeOption,
@@ -46,7 +47,6 @@ import type {
 import type { ColumnReorderFunction, OperatorString, OperatorType, } from '../enums/index';
 import type { TranslaterService } from '../services/translater.service';
 import type { DataViewOption, SlickEditorLock } from '../core/index';
-import type { MultipleSelectOption } from 'multiple-select-vanilla';
 
 export interface CellViewportRange {
   bottom: number;