@descope/web-components-ui 2.3.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -29,7 +29,7 @@
     "@types/google-libphonenumber": "^7.4.30",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.8.0",
-    "eslint": "^8.48.0",
+    "eslint": "^10.0.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-import": "^2.28.1",
@@ -50,10 +50,10 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "test-drivers": "2.3.2",
-    "rollup-replace-plugin": "2.3.2",
-    "webpack-extract-font-loader": "2.3.2",
-    "webpack-replace-plugin": "2.3.2"
+    "rollup-replace-plugin": "3.0.0",
+    "test-drivers": "3.0.0",
+    "webpack-extract-font-loader": "3.0.0",
+    "webpack-replace-plugin": "3.0.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,31 +77,31 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.3.2",
-    "@descope-ui/descope-address-field": "2.3.2",
-    "@descope-ui/descope-apps-list": "2.3.2",
-    "@descope-ui/descope-autocomplete-field": "2.3.2",
-    "@descope-ui/descope-avatar": "2.3.2",
-    "@descope-ui/descope-badge": "2.3.2",
-    "@descope-ui/descope-collapsible-container": "2.3.2",
-    "@descope-ui/descope-button": "2.3.2",
-    "@descope-ui/descope-enriched-text": "2.3.2",
-    "@descope-ui/descope-combo-box": "2.3.2",
-    "@descope-ui/descope-icon": "2.3.2",
-    "@descope-ui/descope-image": "2.3.2",
-    "@descope-ui/descope-link": "2.3.2",
-    "@descope-ui/descope-list": "2.3.2",
-    "@descope-ui/descope-list-item": "2.3.2",
-    "@descope-ui/descope-outbound-app-button": "2.3.2",
-    "@descope-ui/descope-outbound-apps": "2.3.2",
-    "@descope-ui/descope-password-strength": "2.3.2",
-    "@descope-ui/descope-recovery-codes": "2.3.2",
-    "@descope-ui/descope-text": "2.3.2",
-    "@descope-ui/descope-timer": "2.3.2",
-    "@descope-ui/descope-timer-button": "2.3.2",
-    "@descope-ui/descope-trusted-devices": "2.3.2",
-    "@descope-ui/descope-tooltip": "2.3.2",
-    "@descope-ui/descope-ponyhot": "2.3.2"
+    "@descope-ui/common": "3.0.0",
+    "@descope-ui/descope-address-field": "3.0.0",
+    "@descope-ui/descope-apps-list": "3.0.0",
+    "@descope-ui/descope-avatar": "3.0.0",
+    "@descope-ui/descope-autocomplete-field": "3.0.0",
+    "@descope-ui/descope-badge": "3.0.0",
+    "@descope-ui/descope-button": "3.0.0",
+    "@descope-ui/descope-collapsible-container": "3.0.0",
+    "@descope-ui/descope-combo-box": "3.0.0",
+    "@descope-ui/descope-enriched-text": "3.0.0",
+    "@descope-ui/descope-icon": "3.0.0",
+    "@descope-ui/descope-image": "3.0.0",
+    "@descope-ui/descope-link": "3.0.0",
+    "@descope-ui/descope-list": "3.0.0",
+    "@descope-ui/descope-list-item": "3.0.0",
+    "@descope-ui/descope-outbound-apps": "3.0.0",
+    "@descope-ui/descope-outbound-app-button": "3.0.0",
+    "@descope-ui/descope-password-strength": "3.0.0",
+    "@descope-ui/descope-recovery-codes": "3.0.0",
+    "@descope-ui/descope-text": "3.0.0",
+    "@descope-ui/descope-timer": "3.0.0",
+    "@descope-ui/descope-timer-button": "3.0.0",
+    "@descope-ui/descope-trusted-devices": "3.0.0",
+    "@descope-ui/descope-tooltip": "3.0.0",
+    "@descope-ui/descope-ponyhot": "3.0.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",
@@ -145,7 +145,7 @@
     "print-components:affected": "nx show projects --projects 'packages/web-components/components/*' --affected",
     "print-components:affected:ci": "nx show projects --projects 'packages/web-components/components/*' --affected --base=$(sh $(git rev-parse --show-toplevel)/tools/scripts/latestTag.sh)",
     "test": "jest",
-    "lint": "eslint --fix --max-warnings 0",
+    "lint": "eslint --fix --max-warnings 100",
     "lint:all": "npm run lint .",
     "prebuild": "rm -rf dist",
     "build:umd": "webpack -c webpack.prod.js",

package/src/baseClasses/createBaseClass.js

@@ -16,7 +16,7 @@ export const createBaseClass = ({ componentName, baseSelector = '' }) => {
 
     // base selector is the selector for the component wrapper,
     // it's the highest element that is relevant for the layout
-    // eslint-disable-next-line class-methods-use-this
+
     get baseSelector() {
       return baseSelector;
     }

package/src/components/button-selection-group-fields/baseButtonSelectionGroup.js

@@ -7,7 +7,6 @@ import {
 
 export const buttonSelectionGroupBaseMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
-    // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ value, label }) =>
       `<descope-button-selection-group-item value="${value}">${label}</descope-button-selection-group-item>`;
 
@@ -53,7 +52,6 @@ export const buttonSelectionGroupBaseMixin = (superclass) =>
       }
     }
 
-    // eslint-disable-next-line class-methods-use-this
     isValidDataType(data) {
       const isValid = Array.isArray(data);
       if (!isValid) {

package/src/components/button-selection-group-fields/createBaseButtonSelectionGroupInternalClass.js

@@ -30,13 +30,12 @@ export const createBaseButtonSelectionGroupInternalClass = (componentName) => {
       return this.getAttribute('size') || 'md';
     }
 
-    // eslint-disable-next-line getter-return, class-methods-use-this
+    // eslint-disable-next-line getter-return
     get value() {
       // eslint-disable-next-line no-console
       console.warn('get value', 'is not implemented');
     }
 
-    // eslint-disable-next-line class-methods-use-this
     set value(value) {
       // eslint-disable-next-line no-console
       console.warn('set value', 'is not implemented');
@@ -52,7 +51,6 @@ export const createBaseButtonSelectionGroupInternalClass = (componentName) => {
       this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
     }
 
-    // eslint-disable-next-line class-methods-use-this
     getValidity() {
       // eslint-disable-next-line no-console
       console.warn('getValidity', 'is not implemented');

package/src/components/button-selection-group-fields/descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass.js

@@ -43,7 +43,6 @@ export class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSele
     return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   #isValidDataType(data) {
     const isValid = Array.isArray(data);
     if (!isValid) {

package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js

@@ -1,9 +1,9 @@
+import { ButtonClass } from '@descope-ui/descope-button/class';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
 import { createBaseClass } from '../../../baseClasses/createBaseClass';
 import { compose } from '../../../helpers';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
-import { ButtonClass } from '@descope-ui/descope-button/class';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('button-selection-group-item');
 

package/src/components/descope-alert/AlertClass.js

@@ -1,9 +1,9 @@
+import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
+import { injectStyle, observeChildren, syncAttrs } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
-import { injectStyle, observeChildren, syncAttrs } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('alert');
 

package/src/components/descope-code-snippet/CodeSnippetClass.js

@@ -1,10 +1,10 @@
 import hljs from 'highlight.js';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { decode, tpl } from './helpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('code-snippet');
 

package/src/components/descope-code-snippet/helpers.js

@@ -4,6 +4,4 @@ export const decode = (input) => {
   return txt.value;
 };
 
-export const tpl = (input, inline) => {
-  return inline ? input : `<pre>${input}</pre>`;
-};
+export const tpl = (input, inline) => (inline ? input : `<pre>${input}</pre>`);

package/src/components/descope-container/ContainerClass.js

@@ -1,8 +1,8 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('container');
 

package/src/components/descope-date-field/DateCounterClass.js

@@ -51,7 +51,7 @@ export class DateCounter {
 
   add(num) {
     // use local var to avoid triggering onChange
-    let data = this.data;
+    let { data } = this;
 
     data = [...data, num];
 

package/src/components/descope-date-field/DateFieldClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
 import {
   createStyleMixin,
@@ -14,6 +15,7 @@ import {
   getCurrentTime,
   overrideConstructedStylesheet,
   dateToEpoch,
+  parseDateString,
 } from './helpers';
 import { formats } from './formats';
 import { calendarIcon } from './icons';
@@ -27,8 +29,6 @@ import {
 } from './consts';
 import { DateCounter } from './DateCounterClass';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
-import { injectStyle } from '@descope-ui/common/components-helpers';
-import { parseDateString } from './helpers';
 import { newDate } from './date-utils';
 
 export const componentName = getComponentName('date-field');
@@ -205,7 +205,7 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   set value(val) {
-    let value = parseInt(val, 10);
+    const value = parseInt(val, 10);
     if (!Number.isNaN(value)) {
       this.updateEpoch(value);
       this.updateDateCounters(new Date(value));
@@ -760,8 +760,7 @@ class RawDateFieldClass extends BaseInputClass {
   isInvalidDate() {
     const yearCounter = this.getCounterById('year');
     const isYearOutOfRange =
-      yearCounter.numberValue > valRange['year'].max ||
-      yearCounter.numberValue < valRange['year'].min;
+      yearCounter.numberValue > valRange.year.max || yearCounter.numberValue < valRange.year.min;
 
     const isDateDisplayMismatch = Object.entries(this.getDateVals()).some(([key, val]) => {
       const counter = this.getCounterById(key);

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -1,3 +1,5 @@
+import { ButtonClass } from '@descope-ui/descope-button/class';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { compose } from '../../../helpers';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
@@ -33,8 +35,6 @@ import {
   prevMonth,
   nextMonth,
 } from './helpers';
-import { ButtonClass } from '@descope-ui/descope-button/class';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 import { newDate } from '../date-utils';
 
 export const componentName = getComponentName('calendar');

package/src/components/descope-date-field/descope-calendar/helpers.js

@@ -16,9 +16,7 @@ const generateYearList = (range) => {
   return years;
 };
 
-const getMaxDaysInMonth = (year, month) => {
-  return new Date(year, month, 0).getDate();
-};
+const getMaxDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 
 const comboBoxItemTpl = ({ label, dataId, dataName }) => `
 	<div class="combo-box-item"

package/src/components/descope-divider/DividerClass.js

@@ -1,9 +1,9 @@
+import { TextClass } from '@descope-ui/descope-text/class';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
-import { TextClass } from '@descope-ui/descope-text/class';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {

package/src/components/descope-grid/GridClass.js

@@ -42,7 +42,6 @@ const GridMixin = (superclass) =>
 
       const template = this.getRowDetailsTemplate(model.item);
 
-      // eslint-disable-next-line no-param-reassign
       cell.innerHTML = '';
       cell.append(template.content.cloneNode(true));
     };
@@ -95,23 +94,21 @@ const GridMixin = (superclass) =>
     }
 
     setColumnsFromChildren() {
-      this.#columns = Array.from(this.children).map((child) => {
-        return {
-          path: child.getAttribute('path'),
-          header: child.getAttribute('header'),
-          type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
-
-          attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
-            const attrVal = child.getAttribute(attrName);
-
-            if (attrVal) {
-              acc[attrName] = attrVal;
-            }
-
-            return acc;
-          }, {}),
-        };
-      });
+      this.#columns = Array.from(this.children).map((child) => ({
+        path: child.getAttribute('path'),
+        header: child.getAttribute('header'),
+        type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
+
+        attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
+          const attrVal = child.getAttribute(attrName);
+
+          if (attrVal) {
+            acc[attrName] = attrVal;
+          }
+
+          return acc;
+        }, {}),
+      }));
     }
 
     get columnsAttr() {
@@ -130,7 +127,6 @@ const GridMixin = (superclass) =>
       }
     }
 
-    // eslint-disable-next-line class-methods-use-this
     #renderColumn = ({ path, header, type, attrs }) => {
       const colAttrs = Object.entries(attrs)
         .map(([key, value]) => `${key}="${value}"`)

package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { GridTextColumnClass } from '../descope-grid-text-column/GridTextColumnClass';
 
 export class GridCustomColumnClass extends GridTextColumnClass {

package/src/components/descope-grid/descope-grid-custom-column/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { getComponentName } from '../../../helpers/componentHelpers';
 import { GridCustomColumnClass } from './GridCustomColumnClass';
 

package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 
 export class GridItemDetailsColumnClass extends GridSortColumn {
@@ -6,7 +5,6 @@ export class GridItemDetailsColumnClass extends GridSortColumn {
     return this.getAttribute('sortable') === 'true';
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _defaultRenderer(cell, _col, model) {
     const grid = _col._gridValue;
     const itemIdx = grid.detailsOpenedItems?.indexOf(model.item) ?? -1;

package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js

@@ -13,10 +13,8 @@ const getIsAllItemsSelected = (grid) =>
   !!grid.items?.length && grid.selectedItems.length === grid.items.length;
 
 export class GridSelectionColumnClass extends GridSelectionColumn {
-  // eslint-disable-next-line class-methods-use-this
   _onHeaderRendererOrBindingChanged() {}
 
-  // eslint-disable-next-line class-methods-use-this
   _headerRenderer(cell) {
     const grid = cell.parentNode;
 
@@ -39,7 +37,6 @@ export class GridSelectionColumnClass extends GridSelectionColumn {
     checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _defaultRenderer(cell, col, model) {
     const grid = cell.parentNode;
 

package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 
 export class GridTextColumnClass extends GridSortColumn {

package/src/components/descope-grid/helpers.js

@@ -57,8 +57,7 @@ const defaultRowDetailsValueRenderer = (value) => {
   return renderText(value);
 };
 
-export const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
-  return `
+export const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
   <div class="row-details">
   ${Object.entries(item)
     .map(
@@ -71,4 +70,3 @@ export const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
     .join('\n')}
 </div>
   `;
-};

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
@@ -5,7 +6,6 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';
 import { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';
 import { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('hybrid-field');
 

package/src/components/descope-loader-linear/LoaderLinearClass.js

@@ -1,8 +1,8 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('loader-linear');
 

package/src/components/descope-loader-radial/LoaderRadialClass.js

@@ -1,8 +1,8 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('loader-radial');
 

package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js

@@ -31,7 +31,6 @@ const multiSelectComboBoxMixin = (superclass) =>
       return ['readonly'];
     }
 
-    // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
       const ele = document.createElement('span');
       ele.setAttribute('data-name', label);
@@ -109,7 +108,6 @@ const multiSelectComboBoxMixin = (superclass) =>
       return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
     }
 
-    // eslint-disable-next-line class-methods-use-this
     isValidDataType(data) {
       const isValid = Array.isArray(data);
       if (!isValid) {
@@ -146,7 +144,6 @@ const multiSelectComboBoxMixin = (superclass) =>
       }
     }
 
-    // eslint-disable-next-line class-methods-use-this
     customValueTransformFn(val) {
       return val;
     }
@@ -179,7 +176,7 @@ const multiSelectComboBoxMixin = (superclass) =>
     }
 
     // To prevent duplicate items for the multi select options, we dedup them based on the "data-id" attribute
-    // eslint-disable-next-line class-methods-use-this
+
     #dedupItems(items) {
       return Array.from(
         new Map(items.map((item) => [item.getAttribute('data-id'), item])).values()
@@ -225,7 +222,6 @@ const multiSelectComboBoxMixin = (superclass) =>
       // and not via default renderer, which renders only the data-name's value
       // in its own HTML template
       this.baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
         root.innerHTML = model.item.outerHTML;
       };
     }
@@ -303,10 +299,8 @@ const multiSelectComboBoxMixin = (superclass) =>
       // which is triggered when the component is checked for validity after blur
       // Without this, our minItemsSelection and maxItemsSelection constraints will not be checked
       const that = this;
-      // eslint-disable-next-line func-names
-      this.baseElement.checkValidity = () => {
-        return that.validity.valid;
-      };
+
+      this.baseElement.checkValidity = () => that.validity.valid;
     }
 
     init() {

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -241,11 +241,9 @@ class NewPasswordInternal extends BaseInputClass {
           this.policyPanel
         );
       }
-    } else {
-      if (this.passwordStrength) {
-        this.passwordStrength.remove();
-        this.passwordStrength = null;
-      }
+    } else if (this.passwordStrength) {
+      this.passwordStrength.remove();
+      this.passwordStrength = null;
     }
   }
 
@@ -253,7 +251,6 @@ class NewPasswordInternal extends BaseInputClass {
     return (this.getAttribute('active-policies') || '').split(',');
   }
 
-  // eslint-disable-next-line class-methods-use-this
   toggleBooleanAttribute(ele, name, value) {
     value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
   }

package/src/components/descope-notification/NotificationClass.js

@@ -70,12 +70,10 @@ const NotificationMixin = (superclass) =>
       };
     }
 
-    // eslint-disable-next-line class-methods-use-this
     get isContainerEmpty() {
       return !NotificationMixinClass._container.children.length;
     }
 
-    // eslint-disable-next-line class-methods-use-this
     removeContainer() {
       NotificationMixinClass._container.remove();
     }

package/src/components/descope-passcode/PasscodeClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import {
   createStyleMixin,
   draggableMixin,
@@ -16,7 +17,6 @@ import {
   resetInputLabelPosition,
   resetInputFieldDefaultWidth,
 } from '../../helpers/themeHelpers/resetHelpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('passcode');
 

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -1,5 +1,5 @@
-/* eslint-disable no-param-reassign */
 import debounce from 'lodash.debounce';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
 import {
@@ -10,7 +10,6 @@ import {
   INPUT_MASK_TEXT_PROP,
   INPUT_MASK_DISPLAY_PROP,
 } from './helpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('passcode-internal');
 
@@ -110,7 +109,6 @@ class PasscodeInternal extends BaseInputClass {
     this.renderInputs();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getInputIdx(inputEle) {
     return Number.parseInt(inputEle.getAttribute('data-id'), 10);
   }

package/src/components/descope-passcode/descope-passcode-internal/helpers.js

@@ -7,9 +7,7 @@ export const focusElement = (ele) => {
   ele?.setSelectionRange?.(1, 1);
 };
 
-export const sanitizeStr = (str) => {
-  return str.replace(/\D/g, '') || '';
-};
+export const sanitizeStr = (str) => str.replace(/\D/g, '') || '';
 
 export const toggleMaskVisibility = (input, value) => {
   if (value) {

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -1,10 +1,9 @@
-// eslint-disable-next-line max-classes-per-file
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import { interpolateString } from './helpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('policy-validation');