@refinitiv-ui/elements 7.10.10 → 7.11.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.11.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.11.0...@refinitiv-ui/elements@7.11.1) (2024-05-20)
+
+### Bug Fixes
+
+- **chart:** fix gridlines colors ([#1161](https://github.com/Refinitiv/refinitiv-ui/issues/1161)) ([b59da6d](https://github.com/Refinitiv/refinitiv-ui/commit/b59da6d962d1e8026391df53c76c0fb1549738ca))
+- **datetime-picker:** fix changing format doesn't sync to input ([#1164](https://github.com/Refinitiv/refinitiv-ui/issues/1164)) ([f63decc](https://github.com/Refinitiv/refinitiv-ui/commit/f63decc53ba9941bdc26b8ea432ca62525135111))
+
+# [7.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.10...@refinitiv-ui/elements@7.11.0) (2024-05-07)
+
+### Features
+
+- **tree, tree-select:** introducing new Tree Manager APIs and Tree Node ([#1149](https://github.com/Refinitiv/refinitiv-ui/issues/1149)) ([1dbe3f5](https://github.com/Refinitiv/refinitiv-ui/commit/1dbe3f570f4cf45cc9b3407426aa94a48cc03033)), closes [#1136](https://github.com/Refinitiv/refinitiv-ui/issues/1136) [#1134](https://github.com/Refinitiv/refinitiv-ui/issues/1134) [#1133](https://github.com/Refinitiv/refinitiv-ui/issues/1133) [#1145](https://github.com/Refinitiv/refinitiv-ui/issues/1145) [#1135](https://github.com/Refinitiv/refinitiv-ui/issues/1135)
+
 ## [7.10.10](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.9...@refinitiv-ui/elements@7.10.10) (2024-04-30)
 
 ### Bug Fixes

package/lib/chart/elements/chart.d.ts

@@ -112,6 +112,12 @@ export declare class Chart extends BasicElement {
      * @returns {void}
      */
     protected beforeUpdate: (chart: ChartJS) => void;
+    /**
+     * Set grid color in beforeUpdate event from Chartjs
+     * @param chart Chart.js instance
+     * @returns {void}
+     */
+    private decorateGridColors;
     /**
      * Inject theme color into each datasets
      * @param chart Chart.js instance

package/lib/chart/elements/chart.js

@@ -39,6 +39,7 @@ let Chart = class Chart extends BasicElement {
             // set global config again in case the CSS font isn't loaded when updating the chart
             this.setGlobalConfig();
             this.decorateColors(chart);
+            this.decorateGridColors(chart);
         };
         /**
          * Inject theme color into each datasets
@@ -395,12 +396,6 @@ let Chart = class Chart extends BasicElement {
         ChartJS.defaults.font.family = cssStyle.getPropertyValue('font-family');
         ChartJS.defaults.font.size = Number(cssStyle.getPropertyValue('font-size').replace('px', ''));
         ChartJS.defaults.font.style = cssStyle.getPropertyValue('font-style');
-        // Set global grid color
-        ChartJS.defaults.scale.grid.color = (line) => {
-            return line.index === 0
-                ? this.getComputedVariable('--zero-line-color', 'transparent')
-                : this.getComputedVariable('--grid-line-color', 'transparent');
-        };
         if (ChartJS.defaults.scales.radialLinear) {
             ChartJS.defaults.scales.radialLinear.ticks.showLabelBackdrop = false;
         }
@@ -425,6 +420,27 @@ let Chart = class Chart extends BasicElement {
         const result = parseFloat(cssComputeVar);
         return isNaN(result) ? undefined : result;
     }
+    /**
+     * Set grid color in beforeUpdate event from Chartjs
+     * @param chart Chart.js instance
+     * @returns {void}
+     */
+    decorateGridColors(chart) {
+        for (const scale of Object.keys(chart.scales)) {
+            const axis = chart.options?.scales?.[scale];
+            const userAxis = this.config?.options?.scales?.[scale];
+            const userGridColor = userAxis?.grid?.color;
+            const userBorderColor = userAxis?.border?.color;
+            // Change grid color if the color is the default value of `rgba(0,0,0,0.1)`
+            if (axis && userGridColor === 'rgba(0,0,0,0.1)') {
+                axis.grid.color = this.getComputedVariable('--grid-line-color', 'transparent');
+            }
+            // Change border color if the color is the default value of `rgba(0,0,0,0.1)`
+            if (axis && userBorderColor === 'rgba(0,0,0,0.1)') {
+                axis.border.color = this.getComputedVariable('--zero-line-color', 'transparent');
+            }
+        }
+    }
     /**
      * Merges all the different layers of the config.
      * @returns {void}

package/lib/combo-box/custom-elements.json

@@ -77,7 +77,7 @@
           "name": "filter",
           "description": "Custom filter for static data\nSet this to null when data is filtered externally, eg XHR",
           "type": "ComboBoxFilter<T> | null",
-          "default": "\"defaultFilter<T>(this)\""
+          "default": "\"createDefaultFilter<T>(this)\""
         },
         {
           "name": "renderer",

package/lib/combo-box/custom-elements.md

@@ -10,7 +10,7 @@ Combines a popup with a filterable selection list
 | `data`              |                       | `ComboBoxData<T>`           | []                                | Data array to be displayed                       |
 | `disabled`          | `disabled`            | `boolean`                   | false                             | Set disabled state                               |
 | `error`             | `error`               | `boolean`                   | false                             | Set error state                                  |
-| `filter`            |                       | `ComboBoxFilter<T> \| null` | "defaultFilter<T>(this)"          | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
+| `filter`            |                       | `ComboBoxFilter<T> \| null` | "createDefaultFilter<T>(this)"    | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
 | `freeText`          | `free-text`           | `boolean`                   | false                             | Allow to enter any value                         |
 | `label (readonly)`  |                       | `string`                    | ""                                | Label of selected value                          |
 | `multiple`          | `multiple`            | `boolean`                   | false                             | Multiple selection mode                          |

package/lib/combo-box/helpers/filter.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import { DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
 import type { ComboBox } from '../index';
 import type { ComboBoxFilter } from './types';
@@ -7,4 +7,4 @@ import type { ComboBoxFilter } from './types';
  * @param el ComboBox instance to filter
  * @returns Filter accepting an item
  */
-export declare const defaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;
+export declare const createDefaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;

package/lib/combo-box/helpers/filter.js

@@ -1,10 +1,11 @@
 import escapeStringRegexp from 'escape-string-regexp';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter
  * @returns Filter accepting an item
  */
-export const defaultFilter = (el) => {
+export const createDefaultFilter = (el) => {
     // reference query string for validating queryRegExp cache state
     let query = '';
     // cache RegExp
@@ -20,9 +21,17 @@ export const defaultFilter = (el) => {
         return queryRegExp;
     };
     // return scoped custom filter
-    return (item) => {
+    return (item, context) => {
+        let label;
+        if (context) {
+            const composer = context instanceof CollectionComposer ? context : context.composer;
+            label = composer.getItemPropertyValue(item, 'label');
+        }
+        else {
+            label = item.label;
+        }
         const regex = getRegularExpressionOfQuery();
-        const result = regex.test(item.label);
+        const result = regex.test(label);
         // this example uses global scope, so the index needs resetting
         regex.lastIndex = 0;
         return result;

package/lib/combo-box/helpers/types.d.ts

@@ -1,5 +1,6 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
+import type { TreeManager } from '../../tree';
 /**
  * Predicate callback
  * Matches item against filter function
@@ -7,5 +8,5 @@ import type { ItemData } from '../../item';
  * @param item Item to filter
  * @return Does item match filter
  */
-export type ComboBoxFilter<T extends DataItem = ItemData> = (item: T) => boolean;
+export type ComboBoxFilter<T extends DataItem = ItemData> = (item: T, context?: CollectionComposer<T> | TreeManager<T>) => boolean;
 export type ComboBoxData<T extends DataItem = ItemData> = T[] | Promise<T[]>;

package/lib/combo-box/index.js

@@ -16,7 +16,7 @@ import '../list/index.js';
 import '../overlay/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { VERSION } from '../version.js';
-import { defaultFilter } from './helpers/filter.js';
+import { createDefaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
 import { ComboBoxRenderer, createComboBoxRenderer } from './helpers/renderer.js';
 export { ComboBoxRenderer, createComboBoxRenderer };
@@ -53,7 +53,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
          * Set this to null when data is filtered externally, eg XHR
          * @type {ComboBoxFilter<T> | null}
          */
-        this.filter = defaultFilter(this);
+        this.filter = createDefaultFilter(this);
         /**
          * Renderer used to render list item elements
          */
@@ -683,6 +683,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
             let groupHeaderItem = null;
             this.queryItems((item, composer) => {
                 // do not filter hidden items
+                // TODO: blocking `hidden` update via TreeManager/TreeNode of this component
                 if (item.hidden) {
                     return false;
                 }
@@ -692,7 +693,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
                     groupHeaderItem = item;
                 }
                 else {
-                    result = filter(item);
+                    result = filter(item, composer);
                 }
                 composer.setItemPropertyValue(item, 'hidden', !result);
                 composer.updateItemTimestamp(item);

package/lib/datetime-picker/index.js

@@ -358,7 +358,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         if (this.opened && !this.canOpenPopup) {
             this.opened = false; /* this cannot be nor stopped nor listened */
         }
-        if (changedProperties.has('_values') || changedProperties.has(TranslatePropertyKey)) {
+        if (changedProperties.has('_values') ||
+            changedProperties.has(TranslatePropertyKey) ||
+            changedProperties.has('format')) {
             this.syncInputValues();
         }
         if (changedProperties.has('placeholder')) {

package/lib/overlay/managers/viewport-manager.js

@@ -87,17 +87,17 @@ export class ViewportManager {
             return;
         }
         const screenRect = this.screenViewport.getBoundingClientRect();
-        // since screenViewport is applied on html element, it does not include body zoom
-        // Zoom is a legacy feature and must not be used by any means.
-        // Kept here for compatibility with old apps
-        // only Chromium-based browsers update css zoom property after using ctrl/cmd + (+) or (-)
-        // Firefox doesn't implement this property.
-        // Safari does but zooming doesn't update this property value
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // TODO: Remove @ts-ignore and re-test again when standardized zoom is implemented across major browsers and TypeScript, https://github.com/w3c/csswg-drafts/issues/5623
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        const zoom = document.body ? parseFloat(window.getComputedStyle(document.body).zoom) : 1;
+        /**
+         * since screenViewport is applied on html element, it does not include body zoom.
+         * Zoom is a legacy feature and must not be used by any means.
+         * Kept here for compatibility with old apps.
+         *
+         * TODO: re-visit once the standardized zoom is implemented across major browsers.
+         * https://github.com/w3c/csswg-drafts/issues/5623
+         */
+        const zoom = document.body
+            ? parseFloat(window.getComputedStyle(document.body).getPropertyValue('zoom')) || 1
+            : 1;
         const screenHeight = screenRect.height / zoom;
         const screenWidth = screenRect.width / zoom;
         const { top, left, bottom, right } = viewport.getBoundingClientRect();

package/lib/tree/custom-elements.json

@@ -31,6 +31,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "manager (readonly)",
+          "description": "Tree manager used for item manipulation",
+          "type": "TreeManager<T>"
+        },
         {
           "name": "multiple",
           "attribute": "multiple",

package/lib/tree/custom-elements.md

@@ -5,15 +5,16 @@ to be used for menus and group selections
 
 ## Properties
 
-| Property     | Attribute     | Type          | Default                       | Description                                      |
-|--------------|---------------|---------------|-------------------------------|--------------------------------------------------|
-| `data`       |               | `TreeData<T>` |                               | Data object to be used for creating tree         |
-| `multiple`   | `multiple`    | `boolean`     | false                         | Allows multiple items to be selected             |
-| `noRelation` | `no-relation` | `boolean`     | false                         | Breaks the relationship when multiple<br />selection mode is enabled |
-| `query`      | `query`       | `string`      | ""                            | Query string applied to tree                     |
-| `renderer`   |               |               | "createTreeRenderer<T>(this)" | Renderer used for generating tree items          |
-| `stateless`  | `stateless`   | `boolean`     | false                         | Disable selections                               |
-| `values`     |               | `string[]`    | []                            | Selected items in tree                           |
+| Property             | Attribute     | Type             | Default                       | Description                                      |
+|----------------------|---------------|------------------|-------------------------------|--------------------------------------------------|
+| `data`               |               | `TreeData<T>`    |                               | Data object to be used for creating tree         |
+| `manager (readonly)` |               | `TreeManager<T>` |                               | Tree manager used for item manipulation          |
+| `multiple`           | `multiple`    | `boolean`        | false                         | Allows multiple items to be selected             |
+| `noRelation`         | `no-relation` | `boolean`        | false                         | Breaks the relationship when multiple<br />selection mode is enabled |
+| `query`              | `query`       | `string`         | ""                            | Query string applied to tree                     |
+| `renderer`           |               |                  | "createTreeRenderer<T>(this)" | Renderer used for generating tree items          |
+| `stateless`          | `stateless`   | `boolean`        | false                         | Disable selections                               |
+| `values`             |               | `string[]`       | []                            | Selected items in tree                           |
 
 ## Methods
 

package/lib/tree/elements/tree-item.d.ts

@@ -46,7 +46,7 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
     /**
      * Icon of the item
      */
-    icon: string;
+    icon?: string;
     /**
      * Original data item, used for interacting with the tree manager
      */

package/lib/tree/elements/tree.d.ts

@@ -3,7 +3,7 @@ import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { List } from '../../list/index.js';
 import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
-import { TreeManagerMode } from '../managers/tree-manager.js';
+import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
 /**
  * Displays a tree structure
@@ -22,10 +22,11 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      */
     static get version(): string;
     protected readonly defaultRole: string | null;
+    private _manager;
     /**
-     * Tree manager used for manipulation
+     * Tree manager used for item manipulation
      */
-    private manager;
+    get manager(): TreeManager<T>;
     /**
      * Allows multiple items to be selected
      */
@@ -48,7 +49,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
     /**
      * Renderer used for generating tree items
      */
-    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
+    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement | undefined) => HTMLElement;
     /**
      * Expands all groups
      * @returns {void}

package/lib/tree/elements/tree.js

@@ -3,7 +3,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { List, valueFormatWarning } from '../../list/index.js';
 import { VERSION } from '../../version.js';
-import { defaultFilter } from '../helpers/filter.js';
+import { createDefaultFilter } from '../helpers/filter.js';
 import { createTreeRenderer } from '../helpers/renderer.js';
 import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
@@ -22,10 +22,7 @@ let Tree = class Tree extends List {
     constructor() {
         super(...arguments);
         this.defaultRole = 'tree';
-        /**
-         * Tree manager used for manipulation
-         */
-        this.manager = new TreeManager(this.composer);
+        this._manager = new TreeManager(this.composer);
         /**
          * Allows multiple items to be selected
          */
@@ -44,7 +41,7 @@ let Tree = class Tree extends List {
          * @type {TreeFilter<T> | null}
          * @ignore set to protected for now and need to discuss before set to public API
          */
-        this.filter = defaultFilter(this);
+        this.filter = createDefaultFilter(this);
         /**
          * Renderer used for generating tree items
          */
@@ -57,19 +54,25 @@ let Tree = class Tree extends List {
     static get version() {
         return VERSION;
     }
+    /**
+     * Tree manager used for item manipulation
+     */
+    get manager() {
+        return this._manager;
+    }
     /**
      * Expands all groups
      * @returns {void}
      */
     expandAll() {
-        this.manager.expandAllItems();
+        this._manager.expandAllItems();
     }
     /**
      * Collapses all groups
      * @returns {void}
      */
     collapseAll() {
-        this.manager.collapseAllItems();
+        this._manager.collapseAllItems();
     }
     /**
      * Checks all editable items
@@ -79,14 +82,14 @@ let Tree = class Tree extends List {
         if (!this.multiple) {
             throw new RangeError('You cannot check all items in single selection mode');
         }
-        this.manager.checkAllItems();
+        this._manager.checkAllItems();
     }
     /**
      * Unchecks all editable items
      * @returns {void}
      */
     uncheckAll() {
-        this.manager.uncheckAllItems();
+        this._manager.uncheckAllItems();
     }
     /**
      * @override
@@ -96,23 +99,23 @@ let Tree = class Tree extends List {
         // Stateless tree
         if (this.stateless) {
             // Single selection - expand/collapse group (parent)
-            if (!this.multiple && this.manager.isItemParent(item)) {
+            if (!this.multiple && this._manager.isItemParent(item)) {
                 this.toggleExpandedState(item);
             }
             return false;
         }
         // Multiple selection
         if (this.multiple) {
-            return this.manager.toggleItem(item);
+            return this._manager.toggleItem(item);
         }
         // Single selection - expand/collapse group (parent)
-        if (this.manager.isItemParent(item)) {
+        if (this._manager.isItemParent(item)) {
             this.toggleExpandedState(item);
             return false;
         }
         // Single selection - check item
-        if (this.manager.checkItem(item)) {
-            this.manager.checkedItems.forEach((checkedItem) => {
+        if (this._manager.checkItem(item)) {
+            this._manager.checkedItems.forEach((checkedItem) => {
                 checkedItem !== item && this.forceUncheckItem(checkedItem);
             });
             return true;
@@ -126,7 +129,7 @@ let Tree = class Tree extends List {
      */
     forceUncheckItem(item) {
         const result = this.composer.unlockItem(item);
-        this.manager.uncheckItem(item);
+        this._manager.uncheckItem(item);
         result && this.composer.lockItem(item);
     }
     /**
@@ -144,7 +147,7 @@ let Tree = class Tree extends List {
             cancelable: false,
             composed: true,
             detail: {
-                value: this.manager.isItemExpanded(item),
+                value: this._manager.isItemExpanded(item),
                 item
             }
         });
@@ -200,8 +203,8 @@ let Tree = class Tree extends List {
      */
     left() {
         const item = this.highlightElement && this.itemFromElement(this.highlightElement);
-        if (item && this.manager.isItemExpanded(item)) {
-            this.manager.collapseItem(item);
+        if (item && this._manager.isItemExpanded(item)) {
+            this._manager.collapseItem(item);
             this.dispatchExpandedChangedEvent(item);
         }
     }
@@ -212,8 +215,8 @@ let Tree = class Tree extends List {
      */
     right() {
         const item = this.highlightElement && this.itemFromElement(this.highlightElement);
-        if (item && !this.manager.isItemExpanded(item)) {
-            this.manager.expandItem(item);
+        if (item && !this._manager.isItemExpanded(item)) {
+            this._manager.expandItem(item);
             this.dispatchExpandedChangedEvent(item);
         }
     }
@@ -224,11 +227,11 @@ let Tree = class Tree extends List {
      * @returns {void}
      */
     toggleExpandedState(item) {
-        if (this.manager.isItemExpanded(item)) {
-            this.manager.collapseItem(item);
+        if (this._manager.isItemExpanded(item)) {
+            this._manager.collapseItem(item);
         }
         else {
-            this.manager.expandItem(item);
+            this._manager.expandItem(item);
         }
         this.dispatchExpandedChangedEvent(item);
     }
@@ -250,7 +253,7 @@ let Tree = class Tree extends List {
     willUpdate(changeProperties) {
         super.willUpdate(changeProperties);
         if (changeProperties.has('noRelation') || changeProperties.has('multiple')) {
-            this.manager.setMode(this.mode);
+            this._manager.setMode(this.mode);
         }
         if (changeProperties.has('query') || changeProperties.has('data')) {
             this.filterItems();
@@ -266,15 +269,16 @@ let Tree = class Tree extends List {
             const filter = this.filter;
             const items = this.queryItems((item) => {
                 // Do not filter hidden items
+                // TODO: blocking `hidden` update via TreeManager/TreeNode of this component
                 if (item.hidden) {
                     return false;
                 }
-                const result = filter(item);
+                const result = filter(item, this._manager);
                 if (result) {
-                    this.manager.includeItem(item);
+                    this._manager.includeItem(item);
                 }
                 else {
-                    this.manager.excludeItem(item);
+                    this._manager.excludeItem(item);
                 }
                 return result;
             }).slice();
@@ -304,8 +308,8 @@ let Tree = class Tree extends List {
             /**
              * Collapse an item to prevent tree show too many nested expanded
              */
-            if (this.manager.isItemExpanded(item)) {
-                this.manager.collapseItem(item);
+            if (this._manager.isItemExpanded(item)) {
+                this._manager.collapseItem(item);
             }
             /**
              * show all descendants of items to make them all are selectable
@@ -330,8 +334,8 @@ let Tree = class Tree extends List {
             // Skip hidden and exclude item
             if (!item.hidden && !excludeItems.includes(item)) {
                 // Add item and nested children
-                this.manager.includeItem(item);
-                const children = this.manager.getItemChildren(item);
+                this._manager.includeItem(item);
+                const children = this._manager.getItemChildren(item);
                 if (children.length) {
                     this.addNestedItemsToRender(children, excludeItems, includeHidden);
                 }
@@ -350,9 +354,9 @@ let Tree = class Tree extends List {
         // we iterate each item match so as to find ancestors
         items.forEach((item) => {
             // Get the ancestors
-            const parent = this.manager.getItemParent(item);
+            const parent = this._manager.getItemParent(item);
             if (parent && !ancestors.has(parent)) {
-                this.manager.getItemAncestors(item).forEach((ancestor) => {
+                this._manager.getItemAncestors(item).forEach((ancestor) => {
                     ancestors.add(ancestor); // track ancestors
                     this.addExpandedAncestorToRender(ancestor);
                 });
@@ -366,8 +370,8 @@ let Tree = class Tree extends List {
      * @returns {void}
      */
     addExpandedAncestorToRender(ancestor) {
-        this.manager.includeItem(ancestor);
-        this.manager.expandItem(ancestor);
+        this._manager.includeItem(ancestor);
+        this._manager.expandItem(ancestor);
     }
     /**
      * Selected items in tree
@@ -376,7 +380,7 @@ let Tree = class Tree extends List {
      * @default []
      */
     get values() {
-        return this.manager.checkedItems.map((item) => {
+        return this._manager.checkedItems.map((item) => {
             return this.composer.getItemPropertyValue(item, 'value') ?? '';
         });
     }
@@ -390,10 +394,10 @@ let Tree = class Tree extends List {
             const newValue = [...values];
             const oldValue = [...this.values];
             if (newValue.toString() !== oldValue.toString()) {
-                this.manager.uncheckAllItems();
+                this._manager.uncheckAllItems();
                 values.some((value) => {
                     this.queryItemsByPropertyValue('value', value).forEach((item) => {
-                        this.manager.checkItem(item);
+                        this._manager.checkItem(item);
                     });
                     return !this.multiple; // Only set the fist value if multiple is not enabled
                 });
@@ -411,13 +415,13 @@ let Tree = class Tree extends List {
     }
     set data(data) {
         super.data = data;
-        this.manager = new TreeManager(this.composer, this.mode);
+        this._manager = new TreeManager(this.composer, this.mode);
     }
     /**
      * @override
      */
     get renderItems() {
-        return this.manager.visibleItems;
+        return this._manager.visibleItems;
     }
     /**
      * Mode to use in the tree manager

package/lib/tree/helpers/filter.d.ts

@@ -5,4 +5,4 @@ import type { TreeFilter } from './types';
  * @param el Tree instance to filter
  * @returns Filter accepting an item
  */
-export declare const defaultFilter: <T extends TreeDataItem = TreeDataItem>(el: Tree<T>) => TreeFilter<T>;
+export declare const createDefaultFilter: <T extends TreeDataItem = TreeDataItem>(el: Tree<T>) => TreeFilter<T>;

package/lib/tree/helpers/filter.js

@@ -4,7 +4,7 @@ import escapeStringRegexp from 'escape-string-regexp';
  * @param el Tree instance to filter
  * @returns Filter accepting an item
  */
-export const defaultFilter = (el) => {
+export const createDefaultFilter = (el) => {
     // reference query string for validating queryRegExp cache state
     let query = '';
     // cache RegExp
@@ -20,8 +20,8 @@ export const defaultFilter = (el) => {
         return queryRegExp;
     };
     // return scoped custom filter
-    return (item) => {
-        const label = item.label;
+    return (item, manager) => {
+        const label = manager.composer.getItemPropertyValue(item, 'label');
         if (!label) {
             return false;
         }