added debounce; added const width

Author: GrabowskiM

src/bundle/Resources/public/ts/components/overflow_list.ts

@@ -1,7 +1,10 @@
 import { Base } from '../partials';
 import { escapeHTML } from '@ids-core/helpers/escape';
 
+const RESIZE_TIMEOUT = 200;
+
 export class OverflowList extends Base {
+    private _itemsNode: HTMLDivElement;
     private _moreItemNode: HTMLDivElement;
     private _numberOfItems = 0;
     private _numberOfVisibleItems = 0;
@@ -10,37 +13,43 @@ export class OverflowList extends Base {
         itemMore: '',
     };
 
+    private _resizeTimeoutId: number | null = null;
     private _resizeObserver = new ResizeObserver(() => {
-        this.resetState();
-        this.rerender();
+        if (this._resizeTimeoutId) {
+            clearTimeout(this._resizeTimeoutId);
+        }
+
+        this._resizeTimeoutId = window.setTimeout(() => {
+            this.setItemsContainerWidth();
+            this.resetState();
+            this.rerender();
+        }, RESIZE_TIMEOUT);
     });
 
     constructor(container: HTMLDivElement) {
         super(container);
 
-        this._templates = {
-            item: this.getTemplate('item'),
-            itemMore: this.getTemplate('item_more'),
-        };
-
-        this.removeTemplate('item');
-        this.removeTemplate('item_more');
-
-        const moreItemNode = container.querySelector<HTMLDivElement>(':scope *:last-child');
+        const itemsNode = container.querySelector<HTMLDivElement>('.ids-overflow-list__items');
+        const moreItemNode = itemsNode?.querySelector<HTMLDivElement>(':scope *:last-child');
 
-        if (!moreItemNode) {
+        if (!itemsNode || !moreItemNode) {
             throw new Error('OverflowList: OverflowList elements are missing in the container.');
         }
 
+        this._itemsNode = itemsNode;
         this._moreItemNode = moreItemNode;
+        this._templates = {
+            item: this.getTemplate('item'),
+            itemMore: this.getTemplate('item_more'),
+        };
 
         this._numberOfItems = this.getItems(false, false).length;
         this._numberOfVisibleItems = this._numberOfItems;
     }
 
     private getItems(getOnlyVisible = false, withOverflow = true): HTMLDivElement[] {
         const itemsSelector = `:scope > *${getOnlyVisible ? ':not([hidden])' : ''}`;
-        const items = Array.from(this._container.querySelectorAll<HTMLDivElement>(itemsSelector));
+        const items = Array.from(this._itemsNode.querySelectorAll<HTMLDivElement>(itemsSelector));
 
         if (withOverflow) {
             return items;
@@ -59,12 +68,6 @@ export class OverflowList extends Base {
         return templateNode.innerHTML.trim();
     }
 
-    private removeTemplate(type: 'item' | 'item_more') {
-        const templateNode = this._container.querySelector<HTMLTemplateElement>(`.ids-overflow-list__template[data-id="${type}"]`);
-
-        templateNode?.remove();
-    }
-
     private updateMoreItem() {
         const hiddenCount = this._numberOfItems - this._numberOfVisibleItems;
 
@@ -92,7 +95,7 @@ export class OverflowList extends Base {
 
     private recalculateVisibleItems() {
         const itemsNodes = this.getItems(true);
-        const { right: listRightPosition } = this._container.getBoundingClientRect();
+        const { right: listRightPosition } = this._itemsNode.getBoundingClientRect();
         const newNumberOfVisibleItems = itemsNodes.findIndex((itemNode) => {
             const { right: itemRightPosition } = itemNode.getBoundingClientRect();
 
@@ -143,6 +146,7 @@ export class OverflowList extends Base {
             const filledItem = Object.entries(item).reduce((acc, [key, value]) => {
                 const pattern = `{{ ${key} }}`;
                 const escapedValue = escapeHTML(value);
+
                 return acc.replaceAll(pattern, escapedValue);
             }, this._templates.item);
             const container = document.createElement('div');
@@ -159,11 +163,17 @@ export class OverflowList extends Base {
 
         fragment.append(this._moreItemNode);
 
-        this._container.innerHTML = '';
-        this._container.appendChild(fragment);
+        this._itemsNode.innerHTML = '';
+        this._itemsNode.appendChild(fragment);
         this._numberOfItems = items.length;
     }
 
+    private setItemsContainerWidth() {
+        const overflowListWidth = this._container.clientWidth;
+
+        this._itemsNode.style.width = `${overflowListWidth}px`;
+    }
+
     public setItems(items: Record<string, string>[]) {
         this.setItemsContainer(items);
         this.resetState();
@@ -175,6 +185,7 @@ export class OverflowList extends Base {
 
         this.initResizeListener();
 
+        this.setItemsContainerWidth();
         this.rerender();
     }
 }

src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig

@@ -1,12 +1,13 @@
 {% set overflow_list_classes = html_classes('ids-overflow-list', attributes.render('class') ?? '') %}
 
 <div class="{{ overflow_list_classes }}">
-    {% for item in items %}
-        {{ block('item') }}
-    {% endfor %}
-
-    {{ block('more_item') }}
+    <div class="ids-overflow-list__items">
+        {% for item in items %}
+            {{ block('item') }}
+        {% endfor %}
 
+        {{ block('more_item') }}
+    </div>
     <template class="ids-overflow-list__template" data-id="item">
         {% with { item: item_template_props } %}
             {{ block('item') }}