feat!: remove deprecated options (#251)

* chore: remove deprecated options
ghiscoding · Mar 19, 2024 · a25882f · a25882f
1 parent 7406bd3
commit a25882f
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 143 deletions.
diff --git a/packages/demo/src/options/options26.html b/packages/demo/src/options/options26.html
@@ -22,51 +22,6 @@ <h2 class="bd-title">
 </div>
 
 <div>
-  <div class="mb-3 row">
-    <label class="col-sm-2"> Basic Select </label>
-
-    <div class="col-sm-10">
-      <select id="basic" multiple="multiple" class="full-width" data-test="select1">
-        <option value="1">January</option>
-        <option value="2">February</option>
-        <option value="3">March</option>
-        <option value="4">April</option>
-        <option value="5">May</option>
-        <option value="6">June</option>
-        <option value="7">July</option>
-        <option value="8">August</option>
-        <option value="9">September</option>
-        <option value="10">October</option>
-        <option value="11">November</option>
-        <option value="12">December</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="mb-3 row">
-    <label class="col-sm-2"> Group Select </label>
-
-    <div class="col-sm-10">
-      <select id="group" multiple="multiple" class="full-width" data-test="select2">
-        <optgroup label="Group 1">
-          <option value="1">Option 1</option>
-          <option value="2">Option 2</option>
-          <option value="3">Option 3</option>
-        </optgroup>
-        <optgroup label="Group 2">
-          <option value="4">Option 4</option>
-          <option value="5">Option 5</option>
-          <option value="6">Option 6</option>
-        </optgroup>
-        <optgroup label="Group 3">
-          <option value="7">Option 7</option>
-          <option value="8">Option 8</option>
-          <option value="9">Option 9</option>
-        </optgroup>
-      </select>
-    </div>
-  </div>
-
   <div class="mb-3 row">
     <label class="col-sm-2"> CSS Styler </label>
 

diff --git a/packages/demo/src/options/options26.ts b/packages/demo/src/options/options26.ts
@@ -3,34 +3,9 @@ import { type MultipleSelectInstance, type OptGroupRowData, type OptionRowData,
 export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
-  ms3?: MultipleSelectInstance;
 
   mount() {
-    this.ms2 = multipleSelect('[data-test="select1"]', {
-      styler: (row: OptionRowData | OptGroupRowData) => {
-        if (+(row?.value ?? 0) === 1) {
-          return 'background-color: #ffee00; color: #ff0000;';
-        }
-        if (+(row?.value ?? 0) === 6) {
-          return 'background-color: #000; color: #fff;';
-        }
-        return null;
-      },
-    }) as MultipleSelectInstance;
-
-    this.ms2 = multipleSelect('[data-test="select2"]', {
-      styler: (row: OptionRowData | OptGroupRowData) => {
-        if (row?.type === 'optgroup') {
-          return 'color: #777; font-weight: normal;';
-        }
-        if (+(row?.value ?? 0) === 1) {
-          return 'color: blue;';
-        }
-        return null;
-      },
-    }) as MultipleSelectInstance;
-
-    this.ms2 = multipleSelect('[data-test="select3"]', {
+    this.ms1 = multipleSelect('[data-test="select3"]', {
       cssStyler: (row: OptionRowData | OptGroupRowData) => {
         if (+(row?.value ?? 0) === 2) {
           return { backgroundColor: '#6fbeff', color: '#0014ff', fontStyle: 'italic' } as CSSStyleDeclaration;
@@ -59,9 +34,7 @@ export default class Example {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
     this.ms2?.destroy();
-    this.ms3?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
-    this.ms3 = undefined;
   }
 }
diff --git a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
@@ -10,7 +10,6 @@ import {
   calculateAvailableSpace,
   classNameToList,
   convertItemRowToHtml,
-  convertStringStyleToElementStyle,
   createDomElement,
   emptyElement,
   findParent,
@@ -626,10 +625,6 @@ export class MultipleSelectInstance {
       };
 
       const customStyleRules = this.options.cssStyler(dataRow);
-      const customStylerStr = String(this.options.styler(dataRow) || ''); // deprecated
-      if (customStylerStr) {
-        liBlock.props.style = convertStringStyleToElementStyle(customStylerStr);
-      }
       if (customStyleRules) {
         liBlock.props.style = customStyleRules;
       }
@@ -713,10 +708,6 @@ export class MultipleSelectInstance {
     }
 
     const customStyleRules = this.options.cssStyler(dataRow);
-    const customStylerStr = String(this.options.styler(dataRow) || ''); // deprecated
-    if (customStylerStr) {
-      liBlock.props.style = convertStringStyleToElementStyle(customStylerStr);
-    }
     if (customStyleRules) {
       liBlock.props.style = customStyleRules;
     }
@@ -1359,10 +1350,7 @@ export class MultipleSelectInstance {
         this.selectClearElm.style.display = displayState;
       }
 
-      if (this.options.displayTitle || this.options.addTitle) {
-        if (this.options.addTitle) {
-          console.warn('[Multiple-Select-Vanilla] Please note that the `addTitle` option was deprecated and replaced by `displayTitle`.');
-        }
+      if (this.options.displayTitle) {
         const selectType = this.options.useSelectOptionLabel || this.options.useSelectOptionLabelToHtml ? 'value' : 'text';
         spanElm.title = this.getSelects(selectType).join(this.options.displayDelimiter);
       }

diff --git a/packages/multiple-select-vanilla/src/constants.ts b/packages/multiple-select-vanilla/src/constants.ts
@@ -60,7 +60,6 @@ const DEFAULTS: Partial<MultipleSelectOption> = {
   virtualScroll: true,
 
   cssStyler: () => null,
-  styler: () => false,
   textTemplate: (elm: HTMLOptionElement) => elm.innerHTML.trim(),
   labelTemplate: (elm: HTMLOptionElement) => elm.label,
 

diff --git a/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts b/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts
@@ -19,9 +19,6 @@ export type CSSStyleDeclarationReadonly =
 export type CSSStyleDeclarationWritable = keyof Omit<CSSStyleDeclaration, CSSStyleDeclarationReadonly>;
 
 export interface MultipleSelectOption extends MultipleSelectLocale {
-  /** @deprecated @alias `displayTitle` Add a title. By default this option is set to false. */
-  addTitle?: boolean;
-
   /** defaults to 10, when using "autoAdjustDropHeight" we might want to add a bottom (or top) padding instead of taking the entire available space */
   adjustedHeightPadding: number;
 
@@ -197,14 +194,11 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   // Methods
   // ------------
 
-  /** Customize the filter method, for example we use startWith */
-  customFilter(options: LabelFilter | TextFilter): boolean;
-
   /** The item styler function, return style string to customize the item style such as background: red. The function take one parameter: value. */
   cssStyler: (value: OptionRowData | OptGroupRowData) => CSSStyleDeclaration | null;
 
-  /** @deprecated @use `cssStyler`. The item styler function, return style string to customize the item style such as background: red. The function take one parameter: value. */
-  styler: (value: OptionRowData | OptGroupRowData) => string | boolean | null;
+  /** Customize the filter method, for example we use startWith */
+  customFilter(options: LabelFilter | TextFilter): boolean;
 
   /** Returns HTML label attribute of a DOM element */
   labelTemplate: (elm: HTMLOptionElement) => string;

diff --git a/packages/multiple-select-vanilla/src/utils/domUtils.ts b/packages/multiple-select-vanilla/src/utils/domUtils.ts
@@ -1,5 +1,5 @@
-import type { CSSStyleDeclarationWritable, HtmlStruct, InferDOMType } from '../interfaces';
-import { objectRemoveEmptyProps, toCamelCase } from './utils';
+import type { HtmlStruct, InferDOMType } from '../interfaces';
+import { objectRemoveEmptyProps } from './utils';
 
 export interface HtmlElementPosition {
   top: number;
@@ -8,22 +8,6 @@ export interface HtmlElementPosition {
   right: number;
 }
 
-export function convertStringStyleToElementStyle(styleStr: string): CSSStyleDeclaration {
-  const style = {} as CSSStyleDeclaration;
-  if (styleStr) {
-    const cstyles = styleStr.replace(/\s/g, '').split(';');
-    for (const cstyle of cstyles) {
-      const [styleProp, styleVal] = cstyle.trim().split(':');
-      if (styleProp) {
-        (style as any)[toCamelCase(styleProp) as CSSStyleDeclarationWritable] = styleVal.trim() as CSSStyleDeclarationWritable;
-      }
-    }
-
-    console.warn('[multiple-select-vanilla] Please note that `styler` is deprecated, please migrate to `cssStyler` when possible.');
-  }
-  return style;
-}
-
 /** calculate available space for each side of the DOM element */
 export function calculateAvailableSpace(element: HTMLElement): { top: number; bottom: number; left: number; right: number } {
   let bottom = 0;

diff --git a/playwright/e2e/options26.spec.ts b/playwright/e2e/options26.spec.ts
@@ -5,35 +5,7 @@ test.describe('Options 26 - The Styler / CSS Styler', () => {
     await page.goto('#/options26');
   });
 
-  test('1st select has January & June with custom styling', async ({ page }) => {
-    await page.locator('[data-test=select1].ms-parent').click();
-    const optionLoc1 = await page.locator('[data-test=select1] .ms-drop ul li').nth(0);
-    optionLoc1.click();
-    expect(optionLoc1).toHaveText('January');
-    await expect(optionLoc1).toHaveCSS('color', 'rgb(255, 0, 0)');
-    await expect(optionLoc1).toHaveCSS('background-color', 'rgb(255, 238, 0)');
-
-    const optionLoc5 = await page.locator('[data-test=select1] .ms-drop ul li').nth(5);
-    optionLoc5.click();
-    expect(optionLoc5).toHaveText('June');
-    await expect(optionLoc5).toHaveCSS('color', 'rgb(255, 255, 255)');
-    await expect(optionLoc5).toHaveCSS('background-color', 'rgb(0, 0, 0)');
-    const selectedText1 = page.locator('[data-test=select1] .ms-choice span', { hasText: 'January, June' });
-    await selectedText1.waitFor();
-  });
-
-  test('2nd select has January & June with custom styling', async ({ page }) => {
-    await page.locator('[data-test=select2].ms-parent').click();
-    const optionLoc1 = await page.locator('[data-test=select2] .ms-drop ul li').nth(1);
-    optionLoc1.click();
-    expect(optionLoc1).toHaveText('Option 1');
-    await expect(optionLoc1).toHaveCSS('color', 'rgb(0, 0, 255)');
-    await expect(optionLoc1).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
-    const dropLoc2 = await page.locator('[data-test=select2] .ms-choice span', { hasText: '[Group 1: Option 1]' });
-    await dropLoc2.waitFor();
-  });
-
-  test('3rd select has February & April with custom CSS styler', async ({ page }) => {
+  test('1st select has February & April with custom CSS styler', async ({ page }) => {
     await page.locator('[data-test=select3].ms-parent').click();
     const optionLoc2 = await page.locator('[data-test=select3] .ms-drop ul li').nth(1);
     optionLoc2.click();
@@ -50,7 +22,7 @@ test.describe('Options 26 - The Styler / CSS Styler', () => {
     await selectedText3.waitFor();
   });
 
-  test('4th select has January & June with custom styling', async ({ page }) => {
+  test('2nd select has January & June with custom styling', async ({ page }) => {
     await page.locator('[data-test=select4].ms-parent').click();
     const optionLoc3 = await page.locator('[data-test=select4] .ms-drop ul li').nth(3);
     optionLoc3.click();