Refinitiv · wsuwt · Jun 27, 2022 · Jun 23, 2022 · Jun 23, 2022 · Jun 23, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/configurations/README.md b/packages/configurations/README.md
@@ -25,7 +25,7 @@ You can override/use your own files to meet project requirements.
 
 ## TypeScript support
 
-Below configurations are used with TypeScript (Element Framework v5).
+Below configurations are used with TypeScript (Element Framework v6).
 
 ### .eslintrc
 

diff --git a/packages/configurations/package.json b/packages/configurations/package.json
@@ -13,7 +13,7 @@
   },
   "keywords": [
     "Element Framework",
-    "v5",
+    "v6",
     "configurations",
     "eslint",
     "tsconfig",
@@ -22,13 +22,14 @@
   "author": "Refinitiv",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
-    "eslint": "^8.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "eslint": "^8.18.0",
     "eslint-plugin-html": "^6.2.0",
-    "typescript": "^4.6.2"
+    "eslint-plugin-import": "^2.26.0",
+    "typescript": "~4.6.4"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/configurations/typescript.eslint-config.js b/packages/configurations/typescript.eslint-config.js
@@ -1,28 +1,30 @@
 module.exports = {
-  extends: [
-    "./eslint-config.js"
-  ],
-  "overrides": [
+  extends: ['./eslint-config.js'],
+  overrides: [
     {
-      files: ["*.ts", "*.tsx"],
-      parser: "@typescript-eslint/parser",
-      plugins: ["@typescript-eslint"],
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint', 'eslint-plugin-import'],
       extends: [
-        "./eslint-config.js",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        './eslint-config.js',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
       ],
-      "parserOptions": {
-        "extraFileExtensions": [".html"]
+      parserOptions: {
+        extraFileExtensions: ['.html'],
+      },
+      rules: {
+        'import/extensions': ['error', 'always'],
+        '@typescript-eslint/unbound-method': 0,
+        'valid-jsdoc': [
+          2,
+          {
+            requireReturnType: false,
+            requireParamType: false,
+          },
+        ],
       },
-      "rules": {
-        "@typescript-eslint/unbound-method": 0,
-        "valid-jsdoc": [2, {
-          "requireReturnType": false,
-          "requireParamType": false
-        }]
-      }
-    }
-  ]
+    },
+  ],
 };
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -43,14 +43,14 @@ export { DeprecationNotice } from './notices/DeprecationNotice.js';
  * Export events
  */
 export { TapEvent } from './events/TapEvent.js';
-export type { FocusedChangedEvent } from './types/events';
+export type { FocusedChangedEvent } from './types/events.js';
 
 /**
  * Export common interfaces
  */
-export type { MultiValue } from './interfaces/MultiValue';
-export type { StyleMap } from './interfaces/StyleMap';
-export type { StyleInfo } from './interfaces/StyleInfo';
+export type { MultiValue } from './interfaces/MultiValue.js';
+export type { StyleMap } from './interfaces/StyleMap.js';
+export type { StyleInfo } from './interfaces/StyleInfo.js';
 
 /**
  * Export useful utils

diff --git a/packages/demo-block/src/demo-block.ts b/packages/demo-block/src/demo-block.ts
@@ -111,7 +111,7 @@ themeLabel.style.textTransform = 'uppercase';
 themeLabel.innerHTML = removePrefixName(currentTheme);
 
 const versionTag = document.createElement('span');
-versionTag.innerHTML = 'V5';
+versionTag.innerHTML = 'V6';
 versionTag.style.marginLeft = '8px';
 versionTag.style.color = '#334BFF';
 themeLabel.appendChild(versionTag);

diff --git a/packages/elements/src/autosuggest/helpers/renderer.ts b/packages/elements/src/autosuggest/helpers/renderer.ts
@@ -1,6 +1,6 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { updateElementContent } from './utils.js';
-import { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types';
+import { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types.js';
 
 /**
  * Build item element from data object

diff --git a/packages/elements/src/autosuggest/helpers/utils.ts b/packages/elements/src/autosuggest/helpers/utils.ts
@@ -1,5 +1,5 @@
 import type { Item } from '../../item';
-import { AutosuggestHighlightable, AutosuggestItem } from './types';
+import { AutosuggestHighlightable, AutosuggestItem } from './types.js';
 
 /**
  * Check whether item can be highlighted

diff --git a/packages/elements/src/autosuggest/index.ts b/packages/elements/src/autosuggest/index.ts
@@ -19,7 +19,7 @@ import {
   TranslateDirective,
   TranslatePropertyKey
 } from '@refinitiv-ui/translate';
-import { TapEvent } from '../events';
+import { TapEvent } from '../events.js';
 import type {
   AutosuggestTargetElement,
   AutosuggestHighlightable,
@@ -55,7 +55,7 @@ export type {
   SuggestionsClearRequestedEvent,
   SuggestionsQueryEvent,
   SuggestionsChangedEvent
-} from './helpers/types';
+} from './helpers/types.js';
 export { updateElementContent } from './helpers/utils.js';
 export {
   itemHighlightable,

diff --git a/packages/elements/src/calendar/index.ts b/packages/elements/src/calendar/index.ts
@@ -80,7 +80,7 @@ import {
   DateButtonElement,
   NavigationDirection,
   WeekdayName
-} from './types';
+} from './types.js';
 import type { TapEvent } from '../events';
 import type { Button } from '../button';
 import './locales.js';

diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts
@@ -22,8 +22,8 @@ import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js'
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { ItemData } from '../item';
-import { ComboBoxData, ComboBoxFilter } from './helpers/types';
+import { ItemData } from '../item/index.js';
+import { ComboBoxData, ComboBoxFilter } from './helpers/types.js';
 import type { List } from '../list/index.js';
 import { ComboBoxRenderer } from './helpers/renderer.js';
 import { defaultFilter } from './helpers/filter.js';

diff --git a/packages/elements/src/datetime-field/index.ts b/packages/elements/src/datetime-field/index.ts
@@ -30,7 +30,7 @@ import {
   NavigationKeys,
   DateTimeFormatPart,
   InputSelection
-} from './types';
+} from './types.js';
 import { TextField } from '../text-field/index.js';
 import {
   getSelectedPartIndex,

diff --git a/packages/elements/src/datetime-field/utils.ts b/packages/elements/src/datetime-field/utils.ts
@@ -1,4 +1,4 @@
-import { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types';
+import { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types.js';
 import { Direction } from './constants.js';
 
 const IterablePartTypes: DateTimeFormatPartTypes[] = ['year', 'day', 'month', 'hour', 'minute', 'second', 'weekday', 'dayPeriod', 'fractionalSecond'];

diff --git a/packages/elements/src/heatmap/helpers/text.ts b/packages/elements/src/heatmap/helpers/text.ts
@@ -1,4 +1,4 @@
-import type { HeatmapCell } from './types';
+import type { HeatmapCell } from './types.js';
 
 const MIN_FONT_SIZE = 10;
 const MAX_FONT_SIZE = 16;

diff --git a/packages/elements/src/heatmap/index.ts b/packages/elements/src/heatmap/index.ts
@@ -25,7 +25,7 @@ import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './hel
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 
-export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
+export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types.js';
 
 /**
  * A graphical representation of data where the individual

diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
@@ -1,3 +1,3 @@
 export { VERSION } from './version.js';
-export * from './events';
+export * from './events.js';
 export * from '@refinitiv-ui/core';
diff --git a/packages/elements/src/item/index.ts b/packages/elements/src/item/index.ts
@@ -14,7 +14,7 @@ import type { ItemType } from './helpers/types';
 import '../icon/index.js';
 import '../checkbox/index.js';
 
-export * from './helpers/types';
+export * from './helpers/types.js';
 
 const isAllWhitespaceTextNode = (node: Node): boolean =>
   node.nodeType === document.TEXT_NODE

diff --git a/packages/elements/src/overlay-menu/index.ts b/packages/elements/src/overlay-menu/index.ts
@@ -20,7 +20,7 @@ import '../item/index.js';
 import { Item, ItemData } from '../item/index.js';
 import { Overlay, OverlayPosition, OverlayPositionTarget } from '../overlay/index.js';
 import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
-import { OverlayMenuData, Navigation } from './helpers/types';
+import { OverlayMenuData, Navigation } from './helpers/types.js';
 import { OpenedMenusManager } from './managers/menu-manager.js';
 
 export type { OverlayMenuData };

diff --git a/packages/elements/src/overlay/index.ts b/packages/elements/src/overlay/index.ts
@@ -2,7 +2,7 @@ export type {
   Position as OverlayPosition,
   PositionTarget as OverlayPositionTarget,
   TransitionStyle as OverlayTransitionStyle
-} from './helpers/types';
+} from './helpers/types.js';
 
 export {
   Overlay

diff --git a/packages/elements/src/time-picker/index.ts b/packages/elements/src/time-picker/index.ts
@@ -12,7 +12,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ValueChangedEvent, FocusedChangedEvent } from '../events';
+import { ValueChangedEvent, FocusedChangedEvent } from '../events.js';
 import { VERSION } from '../version.js';
 import {
   isValidTime,

diff --git a/packages/elements/src/tree/index.ts b/packages/elements/src/tree/index.ts
@@ -1,4 +1,4 @@
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
 export { TreeRenderer } from './helpers/renderer.js';
-export type { TreeData, TreeDataItem } from './helpers/types';
+export type { TreeData, TreeDataItem } from './helpers/types.js';
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
@@ -5,7 +5,7 @@ export type {
   UnicodeExtensions,
   MessageFormats,
   MessageOptions
-} from './types';
+} from './types.js';
 
 export {
   LangObserverCallback,

diff --git a/packages/phrasebook/src/index.ts b/packages/phrasebook/src/index.ts
@@ -1,6 +1,6 @@
 export type {
   Translations
-} from './types';
+} from './types.js';
 
 export {
   Phrasebook,

diff --git a/packages/phrasebook/src/locale/de/color-dialog.ts b/packages/phrasebook/src/locale/de/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/de/tree-select.ts b/packages/phrasebook/src/locale/de/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/en/color-dialog.ts b/packages/phrasebook/src/locale/en/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/en/tree-select.ts b/packages/phrasebook/src/locale/en/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/ja/color-dialog.ts b/packages/phrasebook/src/locale/ja/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/ja/tree-select.ts b/packages/phrasebook/src/locale/ja/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/zh-hant/color-dialog.ts b/packages/phrasebook/src/locale/zh-hant/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/zh-hant/tree-select.ts b/packages/phrasebook/src/locale/zh-hant/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/zh/color-dialog.ts b/packages/phrasebook/src/locale/zh/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/zh/tree-select.ts b/packages/phrasebook/src/locale/zh/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/translate/README.md b/packages/translate/README.md
@@ -6,7 +6,7 @@ It is used in conjunction with `@refinitiv-ui/phrasebook` and `@refinitiv-ui/i18
 
 ## Usage
 
-`@refinitiv-ui/translate` is designed for Element Framework v5 and Lit Element.
+`@refinitiv-ui/translate` is designed for Element Framework v6 and Lit Element.
 
 ```cli
 npm install @refinitiv-ui/translate

diff --git a/packages/translate/src/test/test-inherited.ts b/packages/translate/src/test/test-inherited.ts
@@ -7,9 +7,9 @@ import { query } from '@refinitiv-ui/core/decorators/query.js';
 import {
   translate,
   TranslateDirective
-} from '../translate';
+} from '../translate.js';
 
-import { TestTranslate } from './test-translate';
+import { TestTranslate } from './test-translate.js';
 
 @customElement('test-inherited', { theme: false })
 export class TestInherited extends TestTranslate {

diff --git a/packages/translate/src/test/test-promise.ts b/packages/translate/src/test/test-promise.ts
@@ -13,10 +13,10 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import {
   translate,
   TranslatePromise
-} from '../translate';
+} from '../translate.js';
 
-import './test-nested-translate';
-import './phrasebook';
+import './test-nested-translate.js';
+import './phrasebook.js';
 
 @customElement('test-promise', { theme: false })
 export class TestPromise extends BasicElement {