Merge remote-tracking branch 'origin/v6' into fix-list-focus

Refinitiv · Jun 30, 2022 · 8d4cc90 · 8d4cc90
2 parents 77ab81d + 09f91fa
commit 8d4cc90
Show file tree

Hide file tree

Showing 119 changed files with 7,484 additions and 6,447 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -7,3 +7,4 @@ lib/
 !**/*.html
 !test/*.js
 **/*.d.ts
+samples/
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.huskyrc.yaml b/.huskyrc.yaml
diff --git a/README.md b/README.md
@@ -12,20 +12,20 @@ Getting started and usage guide are available from this [documentation](https://
 # Packages
 | Package                       | Version                                                                                                                               | Change Log                                                                                                                                                                 |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| @refinitiv-ui/configurations  | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/configurations/next)](https://www.npmjs.com/package/@refinitiv-ui/configurations)   | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/configurations/CHANGELOG.md)  |
-| @refinitiv-ui/core            | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/core/next)](https://www.npmjs.com/package/@refinitiv-ui/core)                       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/core/CHANGELOG.md)            |
-| @refinitiv-ui/demo-block      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/demo-block/next)](https://www.npmjs.com/package/@refinitiv-ui/demo-block)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/demo-block/CHANGELOG.md)      |
-| @refinitiv-ui/elemental-theme | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/elemental-theme/next)](https://www.npmjs.com/package/@refinitiv-ui/elemental-theme) | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/elemental-theme/CHANGELOG.md) |
-| @refinitiv-ui/elements        | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/elements/next)](https://www.npmjs.com/package/@refinitiv-ui/elements)               | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/elements/CHANGELOG.md)        |
-| @refinitiv-ui/halo-theme      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/halo-theme/next)](https://www.npmjs.com/package/@refinitiv-ui/halo-theme)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/halo-theme/CHANGELOG.md)      |
-| @refinitiv-ui/i18n            | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/i18n/next)](https://www.npmjs.com/package/@refinitiv-ui/i18n)                       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/i18n/CHANGELOG.md)            |
-| @refinitiv-ui/phrasebook      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/phrasebook/next)](https://www.npmjs.com/package/@refinitiv-ui/phrasebook)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/phrasebook/CHANGELOG.md)      |
-| @refinitiv-ui/polyfills       | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/polyfills/next)](https://www.npmjs.com/package/@refinitiv-ui/polyfills)             | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/polyfills/CHANGELOG.md)       |
-| @refinitiv-ui/solar-theme     | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/solar-theme/next)](https://www.npmjs.com/package/@refinitiv-ui/solar-theme)         | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/solar-theme/CHANGELOG.md)     |
-| @refinitiv-ui/test-helpers    | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/test-helpers/next)](https://www.npmjs.com/package/@refinitiv-ui/test-helpers)       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/test-helpers/CHANGELOG.md)    |
-| @refinitiv-ui/theme-compiler  | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/theme-compiler/next)](https://www.npmjs.com/package/@refinitiv-ui/theme-compiler)   | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/theme-compiler/CHANGELOG.md)  |
-| @refinitiv-ui/translate       | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/translate/next)](https://www.npmjs.com/package/@refinitiv-ui/translate)             | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/translate/CHANGELOG.md)       |
-| @refinitiv-ui/utils           | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/utils/next)](https://www.npmjs.com/package/@refinitiv-ui/utils)                     | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/utils/CHANGELOG.md)           |
+| [@refinitiv-ui/configurations](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/configurations)  | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/configurations)](https://www.npmjs.com/package/@refinitiv-ui/configurations)   | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/configurations/CHANGELOG.md)  |
+| [@refinitiv-ui/core](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/core)            | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/core)](https://www.npmjs.com/package/@refinitiv-ui/core)                       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/core/CHANGELOG.md)            |
+| [@refinitiv-ui/demo-block](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/demo-block)      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/demo-block)](https://www.npmjs.com/package/@refinitiv-ui/demo-block)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/demo-block/CHANGELOG.md)      |
+| [@refinitiv-ui/elemental-theme](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/elemental-theme) | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/elemental-theme)](https://www.npmjs.com/package/@refinitiv-ui/elemental-theme) | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/elemental-theme/CHANGELOG.md) |
+| [@refinitiv-ui/elements](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/elements)        | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/elements)](https://www.npmjs.com/package/@refinitiv-ui/elements)               | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/elements/CHANGELOG.md)        |
+| [@refinitiv-ui/halo-theme](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/halo-theme)      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/halo-theme)](https://www.npmjs.com/package/@refinitiv-ui/halo-theme)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/halo-theme/CHANGELOG.md)      |
+| [@refinitiv-ui/i18n](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/i18n)            | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/i18n)](https://www.npmjs.com/package/@refinitiv-ui/i18n)                       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/i18n/CHANGELOG.md)            |
+| [@refinitiv-ui/phrasebook](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/phrasebook)      | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/phrasebook)](https://www.npmjs.com/package/@refinitiv-ui/phrasebook)           | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/phrasebook/CHANGELOG.md)      |
+| [@refinitiv-ui/polyfills](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/polyfills)       | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/polyfills)](https://www.npmjs.com/package/@refinitiv-ui/polyfills)             | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/polyfills/CHANGELOG.md)       |
+| [@refinitiv-ui/solar-theme](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/solar-theme)     | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/solar-theme)](https://www.npmjs.com/package/@refinitiv-ui/solar-theme)         | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/solar-theme/CHANGELOG.md)     |
+| [@refinitiv-ui/test-helpers](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/test-helpers)    | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/test-helpers)](https://www.npmjs.com/package/@refinitiv-ui/test-helpers)       | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/test-helpers/CHANGELOG.md)    |
+| [@refinitiv-ui/theme-compiler](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/theme-compiler)  | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/theme-compiler)](https://www.npmjs.com/package/@refinitiv-ui/theme-compiler)   | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/theme-compiler/CHANGELOG.md)  |
+| [@refinitiv-ui/translate](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/translate)       | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/translate)](https://www.npmjs.com/package/@refinitiv-ui/translate)             | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/translate/CHANGELOG.md)       |
+| [@refinitiv-ui/utils](https://github.com/Refinitiv/refinitiv-ui/tree/v6/packages/utils)           | [![npm version](https://badgen.net/npm/v/@refinitiv-ui/utils)](https://www.npmjs.com/package/@refinitiv-ui/utils)                     | [![change log](https://badgen.net/badge/icon/changelog/grey?icon=git&label)](https://github.com/Refinitiv/refinitiv-ui/blob/v6/packages/utils/CHANGELOG.md)           |
 
 
 # License Information

diff --git a/documents/CHANGELOG.md b/documents/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/[email protected]...@refinitiv-ui/[email protected]) (2022-06-20)
+
+**Note:** Version bump only for package @refinitiv-ui/docs
+
+
+
+
+
 # [5.1.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/[email protected]...@refinitiv-ui/[email protected]) (2022-06-07)
 
 

diff --git a/documents/package.json b/documents/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/docs",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": true,
   "description": "Element Framework Documentation",
   "engines": {
@@ -32,7 +32,7 @@
     "serve": "^13.0.2"
   },
   "dependencies": {
-    "@refinitiv-ui/elements": "^6.0.0",
+    "@refinitiv-ui/elements": "^6.0.1",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0"
   }

diff --git a/documents/src/pages/build-app/internationalization.md b/documents/src/pages/build-app/internationalization.md
@@ -57,12 +57,12 @@ The simplest way is to include translations in a bundle, for instance:
 // # translations.js
 
 // ef-tree-select, Japanese and German locales
-import '@refinitiv-ui/phrasebook/locale/ja/tree-select';
-import '@refinitiv-ui/phrasebook/locale/de/tree-select';
+import '@refinitiv-ui/phrasebook/locale/ja/tree-select.js';
+import '@refinitiv-ui/phrasebook/locale/de/tree-select.js';
 
 // ef-pagination, Simplified and Traditional Chinese locales
-import '@refinitiv-ui/phrasebook/locale/zh/pagination';
-import '@refinitiv-ui/phrasebook/locale/zh-hant/pagination';
+import '@refinitiv-ui/phrasebook/locale/zh/pagination.js';
+import '@refinitiv-ui/phrasebook/locale/zh-hant/pagination.js';
 ```
 
 Including translations in such a way will increase the bundle size, but has the benefit that translations are available immediately on application load.
@@ -83,7 +83,7 @@ App.Settings.Language.read(value => {
   const locale = supportedLocales(['ja', 'de'], [value])[0];
   if (locale) {
     // use dynamic import. Element will update itself once locale is loaded
-    import(`@refinitiv-ui/phrasebook/locale/${locale}/pagination`);
+    import(`@refinitiv-ui/phrasebook/locale/${locale}/pagination.js`);
   }
 });
 ```

diff --git a/documents/src/pages/elements/combo-box.md b/documents/src/pages/elements/combo-box.md
@@ -356,13 +356,13 @@ import '@refinitiv-ui/elements/flag'
 import '@refinitiv-ui/elements/flag/themes/halo/dark'
 
 // Keep the reference to the default renderer
-const defaultRenderer = new ComboBoxRenderer(comboBox);
+const itemRenderer = new ComboBoxRenderer(comboBox);
 // Keep track flag elements after creating to avoid memory leak and re-render the same flag
 const flagMap = new WeakMap();
 
 // Create a re-useable renderer that shows Flags next to the country
 comboBox.renderer = (item, composer, element) => {
-    element = defaultRenderer(item, composer, element);
+    element = itemRenderer(item, composer, element);
     const type = composer.getItemPropertyValue(item, 'type');
     let flagElement = flagMap.get(element);
     if (!flagElement && (!type || type === 'text')) {
@@ -416,12 +416,12 @@ comboBox.data = [
   { label: 'Argentina', value: 'ar' }
 ];
 
-const defaultRenderer = new ComboBoxRenderer(comboBox);
+const itemRenderer = new ComboBoxRenderer(comboBox);
 
 const flagMap = new WeakMap();
 
 comboBox.renderer = (item, composer, element) => {
-    element = defaultRenderer(item, composer, element);
+    element = itemRenderer(item, composer, element);
     const type = composer.getItemPropertyValue(item, 'type');
     let flagElement = flagMap.get(element);
     if (!flagElement && (!type || type === 'text')) {

diff --git a/documents/src/pages/elements/list.md b/documents/src/pages/elements/list.md
@@ -85,13 +85,13 @@ Extending the default renderer is the easiest way to display custom content, whi
 !> Renders are currently being upgraded and should only be used for testing purposes.
 
 ```javascript
-import { List, DefaultRenderer } from '@refinitiv-ui/list';
+import { ListRenderer } from '@refinitiv-ui/elements/list';
 
 const el = document.querySelector('ef-list');
-const defaultRenderer = new DefaultRenderer(el);
+const itemRenderer = new ListRenderer(el);
 
 el.renderer = (item, composer, element) => {
-  const el = defaultRenderer.apply(this, arguments);
+  const el = itemRenderer(item, composer, element);
   // do something extra
   return el;
 };

diff --git a/documents/src/pages/elements/notification.md b/documents/src/pages/elements/notification.md
@@ -13,12 +13,10 @@ layout: default
 let el;
 const createNotification = () => {
   el = document.createElement('ef-notification');
-  el.innerText = 'Notifcation received at ' + new Date().toLocaleTimeString();
+  el.innerText = 'Notification received at ' + new Date().toLocaleTimeString();
   el.addEventListener('dismiss', createNotification, { once: true });
   document.body.appendChild(el);
-  el.updateStyles({
-    '--background-color': 'hsl(' + Math.random() * 360 + ', 50%, 50%)'
-  });
+  el.style.setProperty('--background-color', 'hsl(' + Math.random() * 360 + ', 50%, 50%)');
 };
 createNotification();
 ```
@@ -32,7 +30,7 @@ The notification bar is used to show informative content when something happens
 These methods work in a similar way to those provided by `window.console`.
 
 ```javascript
-import { info, confirm, warn, error } from '@refinitiv-ui/notification/helpers';
+import { info, confirm, warn, error } from '@refinitiv-ui/elements/notification';
 
 // Show an info notification
 info('Info Notification');
@@ -52,7 +50,7 @@ error('Error Notification', Infinity/* Show until user dismisses */);
 When using the notification methods provided by the module, you can gain access to the created element using the returned result.
 
 ```javascript
-import { info } from '@refinitiv-ui/notification';
+import { info } from '@refinitiv-ui/elements/notification';
 
 const notification = info('Info Notification');
 

diff --git a/documents/src/pages/elements/tooltip.md b/documents/src/pages/elements/tooltip.md
@@ -413,7 +413,7 @@ It is recommended to have only one instance of tooltip per page. A default toolt
 Use `addTooltipCondition` and `removeTooltipCondition` to reuse the default tooltip:
 
 ```javascript
-import { addTooltipCondition, removeTooltipCondition } from '@refinitiv-ui/tooltip';
+import { addTooltipCondition, removeTooltipCondition } from '@refinitiv-ui/elements/tooltip';
 
 // Show tooltip for elements that have "ref" attribute
 const condition = target => target.hasAttribute('ref');
@@ -442,7 +442,7 @@ Overflow tooltip reuses the concept of _Default tooltip_ to display a tooltip wh
 <div class="overflow">Very long text with overflow</div>
 ```
 ```javascript
-import { registerOverflowTooltip } from '@refinitiv-ui/tooltip';
+import { registerOverflowTooltip } from '@refinitiv-ui/elements/tooltip';
 const overflowElement = document.querySelector('.overflow');
 registerOverflowTooltip(overflowElement);
 ```

diff --git a/documents/src/pages/styles/styling-components.md b/documents/src/pages/styles/styling-components.md
@@ -36,6 +36,4 @@ ef-led-gauge[red-blue-scale] {
 }
 ```
 
-*>For Single Page Applications, the `<shady-css-scoped>` tag must be placed at the root of the application i.e. `index.html`.
-
 ::footer::
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,4 @@ ef-led-gauge[red-blue-scale] { @@
     }
     ```
-    *>For Single Page Applications, the `<shady-css-scoped>` tag must be placed at the root of the application i.e. `index.html`.
     ::footer::