From 83ef979161d9cac49b86df4c61e867a48d559225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Mon, 20 Oct 2025 08:57:11 +0200
Subject: [PATCH 1/9] IBX-10758: Overflow list

---
 eslint.config.mjs                             |   1 +
 .../public/ts/components/overflow_list.ts     | 180 ++++++++++++++++++
 .../Resources/public/ts/init_components.ts    |   9 +
 .../components/overflow_list.html.twig        |  18 ++
 src/lib/Twig/Components/OverflowList.php      |  53 ++++++
 5 files changed, 261 insertions(+)
 create mode 100644 src/bundle/Resources/public/ts/components/overflow_list.ts
 create mode 100644 src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig
 create mode 100644 src/lib/Twig/Components/OverflowList.php

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7d987c70..b2d8f484 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -5,6 +5,7 @@ export default [
     {
         files: ['**/*.ts'],
         rules: {
+            'no-magic-numbers': ['error', { ignore: [-1, 0] }],
             '@typescript-eslint/unbound-method': 'off',
         },
     },
diff --git a/src/bundle/Resources/public/ts/components/overflow_list.ts b/src/bundle/Resources/public/ts/components/overflow_list.ts
new file mode 100644
index 00000000..82634f02
--- /dev/null
+++ b/src/bundle/Resources/public/ts/components/overflow_list.ts
@@ -0,0 +1,180 @@
+import { Base } from '../partials';
+import { escapeHTML } from '@ids-core/helpers/escape';
+
+export class OverflowList extends Base {
+    private _moreItemNode: HTMLDivElement;
+    private _numberOfItems = 0;
+    private _numberOfVisibleItems = 0;
+    private _templates: Record<'item' | 'itemMore', string> = {
+        item: '',
+        itemMore: '',
+    };
+
+    private _resizeObserver = new ResizeObserver(() => {
+        this.resetState();
+        this.rerender();
+    });
+
+    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');
+
+        if (!moreItemNode) {
+            throw new Error('OverflowList: OverflowList elements are missing in the container.');
+        }
+
+        this._moreItemNode = moreItemNode;
+
+        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));
+
+        if (withOverflow) {
+            return items;
+        }
+
+        return items.slice(0, -1);
+    }
+
+    private getTemplate(type: 'item' | 'item_more'): string {
+        const templateNode = this._container.querySelector<HTMLTemplateElement>(`.ids-overflow-list__template[data-id="${type}"]`);
+
+        if (!templateNode) {
+            throw new Error(`OverflowList: Template of type "${type}" is missing in the container.`);
+        }
+
+        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;
+
+        if (hiddenCount > 0) {
+            const tempMoreItem = document.createElement('div');
+            tempMoreItem.innerHTML = this._templates.itemMore.replace('{{ hidden_count }}', hiddenCount.toString());
+
+            if (!tempMoreItem.firstElementChild) {
+                throw new Error('OverflowList: Error while creating more item element from template.');
+            }
+
+            this._moreItemNode.replaceWith(tempMoreItem.firstElementChild);
+        } else {
+            this._moreItemNode.setAttribute('hidden', 'true');
+        }
+    }
+
+    private hideOverflowItems() {
+        const itemsNodes = this.getItems(true, false);
+
+        itemsNodes.slice(this._numberOfVisibleItems).forEach((itemNode) => {
+            itemNode.setAttribute('hidden', 'true');
+        });
+    }
+
+    private recalculateVisibleItems() {
+        const itemsNodes = this.getItems(true);
+        const { right: listRightPosition } = this._container.getBoundingClientRect();
+        const newNumberOfVisibleItems = itemsNodes.findIndex((itemNode) => {
+            const { right: itemRightPosition } = itemNode.getBoundingClientRect();
+
+            return itemRightPosition > listRightPosition;
+        });
+
+        if (newNumberOfVisibleItems === -1 || newNumberOfVisibleItems === this._numberOfItems) {
+            return true;
+        }
+
+        if (newNumberOfVisibleItems === this._numberOfVisibleItems) {
+            this._numberOfVisibleItems = newNumberOfVisibleItems - 1; // eslint-disable-line no-magic-numbers
+        } else {
+            this._numberOfVisibleItems = newNumberOfVisibleItems;
+        }
+
+        return false;
+    }
+
+    private initResizeListener() {
+        this._resizeObserver.observe(this._container);
+    }
+
+    public resetState() {
+        this._numberOfVisibleItems = this._numberOfItems;
+
+        const itemsNodes = this.getItems(false);
+
+        itemsNodes.forEach((itemNode) => {
+            itemNode.removeAttribute('hidden');
+        });
+    }
+
+    public rerender() {
+        let stopRecalculating = true;
+        do {
+            stopRecalculating = this.recalculateVisibleItems();
+
+            this.hideOverflowItems();
+            this.updateMoreItem();
+        } while (!stopRecalculating);
+    }
+
+    private setItemsContainer(items: Record<string, string>[]) {
+        const fragment = document.createDocumentFragment();
+
+        items.forEach((item) => {
+            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');
+
+            container.innerHTML = filledItem;
+
+            if (container.firstElementChild) {
+                fragment.append(container.firstElementChild);
+            }
+        });
+
+        // Needs to use type assertion here as cloneNode returns a Node type https://github.com/microsoft/TypeScript/issues/283
+        this._moreItemNode = this._moreItemNode.cloneNode(true) as HTMLDivElement; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+
+        fragment.append(this._moreItemNode);
+
+        this._container.innerHTML = '';
+        this._container.appendChild(fragment);
+        this._numberOfItems = items.length;
+    }
+
+    public setItems(items: Record<string, string>[]) {
+        this.setItemsContainer(items);
+        this.resetState();
+        this.rerender();
+    }
+
+    public init() {
+        super.init();
+
+        this.initResizeListener();
+
+        this.rerender();
+    }
+}
diff --git a/src/bundle/Resources/public/ts/init_components.ts b/src/bundle/Resources/public/ts/init_components.ts
index cd4aea0a..1371fb55 100644
--- a/src/bundle/Resources/public/ts/init_components.ts
+++ b/src/bundle/Resources/public/ts/init_components.ts
@@ -3,6 +3,7 @@ import { InputTextField, InputTextInput } from './components/input_text';
 import { Accordion } from './components/accordion';
 import { AltRadioInput } from './components/alt_radio/alt_radio_input';
 import { DropdownSingleInput } from './components/dropdown/dropdown_single_input';
+import { OverflowList } from './components/overflow_list';
 
 const accordionContainers = document.querySelectorAll<HTMLDivElement>('.ids-accordion:not([data-ids-custom-init])');
 
@@ -59,3 +60,11 @@ inputTextContainers.forEach((inputTextContainer: HTMLDivElement) => {
 
     inputTextInstance.init();
 });
+
+const overflowListContainers = document.querySelectorAll<HTMLDivElement>('.ids-overflow-list:not([data-ids-custom-init])');
+
+overflowListContainers.forEach((overflowListContainer: HTMLDivElement) => {
+    const overflowListInstance = new OverflowList(overflowListContainer);
+
+    overflowListInstance.init();
+});
diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig
new file mode 100644
index 00000000..dd746ea6
--- /dev/null
+++ b/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig
@@ -0,0 +1,18 @@
+{% 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') }}
+
+    <template class="ids-overflow-list__template" data-id="item">
+        {% with { item: item_template_props } %}
+            {{ block('item') }}
+        {% endwith %}
+    </template>
+    <template class="ids-overflow-list__template" data-id="item_more">
+        {{ block('more_item') }}
+    </template>
+</div>
diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
new file mode 100644
index 00000000..671a4c30
--- /dev/null
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\DesignSystemTwig\Twig\Components;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsTwigComponent('ibexa:overflow_list')]
+final class OverflowList
+{
+    /**
+     * @var list<array>
+     */
+    public array $items = [];
+
+    /**
+     * @param array<string, mixed> $props
+     *
+     * @return array<string, mixed>
+     */
+    #[PreMount]
+    public function validate(array $props): array
+    {
+        $resolver = new OptionsResolver();
+        $resolver->setIgnoreUndefined();
+        $resolver
+            ->define('items')
+            ->allowedTypes('array')
+            ->default([]);
+
+        return $resolver->resolve($props) + $props;
+    }
+
+    #[ExposeInTemplate('item_template_props')]
+    public function getItemTemplateProps(): array
+    {
+        $item_props_names = array_keys($this->items[0]);
+        $item_props_patterns = array_map(
+            fn (string $name): string => '{{ ' . $name . ' }}',
+            $item_props_names
+        );
+
+        return array_combine($item_props_names, $item_props_patterns) ?? [];
+    }
+}

From 95c82020ce99d14b1a9b441eff8a82b742e85a9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Tue, 21 Oct 2025 16:57:41 +0200
Subject: [PATCH 2/9] added debounce; added const width

---
 .../public/ts/components/overflow_list.ts     | 55 +++++++++++--------
 .../components/overflow_list.html.twig        | 11 ++--
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/bundle/Resources/public/ts/components/overflow_list.ts b/src/bundle/Resources/public/ts/components/overflow_list.ts
index 82634f02..64864e21 100644
--- a/src/bundle/Resources/public/ts/components/overflow_list.ts
+++ b/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,29 +13,35 @@ 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;
@@ -40,7 +49,7 @@ export class OverflowList extends Base {
 
     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();
     }
 }
diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig
index dd746ea6..94f1a94c 100644
--- a/src/bundle/Resources/views/themes/standard/design_system/components/overflow_list.html.twig
+++ b/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') }}

From 2bd2c3e4105e6c95729f4690aa37a1342bf9e9de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Wed, 22 Oct 2025 13:41:44 +0200
Subject: [PATCH 3/9] fix dynamic

---
 src/lib/Twig/Components/OverflowList.php | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index 671a4c30..4e8150dc 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -21,6 +21,11 @@ final class OverflowList
      */
     public array $items = [];
 
+    /**
+     * @var array<string>
+     */
+    public array $itemTemplateProps = [];
+
     /**
      * @param array<string, mixed> $props
      *
@@ -35,19 +40,25 @@ public function validate(array $props): array
             ->define('items')
             ->allowedTypes('array')
             ->default([]);
+        $resolver
+            ->define('itemTemplateProps')
+            ->allowedTypes('array')
+            ->default([]);
 
         return $resolver->resolve($props) + $props;
     }
 
+    /**
+     * @return array<string, string>
+     */
     #[ExposeInTemplate('item_template_props')]
     public function getItemTemplateProps(): array
     {
-        $item_props_names = array_keys($this->items[0]);
-        $item_props_patterns = array_map(
+        $itemPropsPatterns = array_map(
             fn (string $name): string => '{{ ' . $name . ' }}',
-            $item_props_names
+            $this->itemTemplateProps
         );
 
-        return array_combine($item_props_names, $item_props_patterns) ?? [];
+        return array_combine($this->itemTemplateProps, $itemPropsPatterns);
     }
 }

From 78cba96dca8211b63aad71d50cf540dd58007322 Mon Sep 17 00:00:00 2001
From: mikolaj <mikolaj.adamczyk@ez.no>
Date: Mon, 20 Oct 2025 11:06:46 +0200
Subject: [PATCH 4/9] Fixed CI

---
 src/lib/Twig/Components/OverflowList.php | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index 4e8150dc..1f94d4f0 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -54,11 +54,19 @@ public function validate(array $props): array
     #[ExposeInTemplate('item_template_props')]
     public function getItemTemplateProps(): array
     {
+        $itemPropsNames = array_keys($this->items[0]);
+
         $itemPropsPatterns = array_map(
-            fn (string $name): string => '{{ ' . $name . ' }}',
+            static fn (string $name): string => '{{ ' . $name . ' }}',
             $this->itemTemplateProps
         );
 
-        return array_combine($this->itemTemplateProps, $itemPropsPatterns);
+        $props = array_combine($itemPropsNames, $itemPropsPatterns);
+
+        if (empty($props)) {
+            return [];
+        }
+
+        return $props;
     }
 }

From a8dc475942303617abba54a4ef8c6acd2ff1f2b3 Mon Sep 17 00:00:00 2001
From: mikolaj <mikolaj.adamczyk@ez.no>
Date: Mon, 20 Oct 2025 11:18:29 +0200
Subject: [PATCH 5/9] Code improvements

---
 src/lib/Twig/Components/OverflowList.php | 43 ++++++++++++++++++------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index 1f94d4f0..88a14497 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -8,6 +8,7 @@
 
 namespace Ibexa\DesignSystemTwig\Twig\Components;
 
+use InvalidArgumentException;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
@@ -39,7 +40,28 @@ public function validate(array $props): array
         $resolver
             ->define('items')
             ->allowedTypes('array')
-            ->default([]);
+            ->default([])
+            ->normalize(static function ($options, $value): array {
+                if (!is_array($value) || !array_is_list($value)) {
+                    throw new InvalidArgumentException('Property "items" must be a list (sequential array).');
+                }
+
+                foreach ($value as $i => $item) {
+                    if (!is_array($item)) {
+                        throw new InvalidArgumentException(sprintf('items[%d] must be an array, %s given.', $i, get_debug_type($item)));
+                    }
+                    foreach (array_keys($item) as $key) {
+                        if (!is_string($key)) {
+                            throw new InvalidArgumentException(sprintf('items[%d] must use string keys.', $i));
+                        }
+                        if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $key)) {
+                            throw new InvalidArgumentException(sprintf('Invalid key "%s" in items[%d].', $key, $i));
+                        }
+                    }
+                }
+
+                return $value;
+            });
         $resolver
             ->define('itemTemplateProps')
             ->allowedTypes('array')
@@ -54,17 +76,18 @@ public function validate(array $props): array
     #[ExposeInTemplate('item_template_props')]
     public function getItemTemplateProps(): array
     {
-        $itemPropsNames = array_keys($this->items[0]);
-
-        $itemPropsPatterns = array_map(
-            static fn (string $name): string => '{{ ' . $name . ' }}',
-            $this->itemTemplateProps
-        );
+        if (empty($this->items)) {
+            return [];
+        }
 
-        $props = array_combine($itemPropsNames, $itemPropsPatterns);
+        $allKeys = [];
+        foreach ($this->items as $item) {
+            $allKeys = array_unique([...$allKeys, ...array_keys($item)]);
+        }
 
-        if (empty($props)) {
-            return [];
+        $props = [];
+        foreach ($allKeys as $name) {
+            $props[$name] = '{{ ' . $name . ' }}';
         }
 
         return $props;

From dc6fc39b2de57ea2e5b174e14837bfcfee5c1da4 Mon Sep 17 00:00:00 2001
From: mikolaj <mikolaj.adamczyk@ez.no>
Date: Thu, 23 Oct 2025 14:30:29 +0200
Subject: [PATCH 6/9] Added validation for ItemTemplateProps

---
 src/lib/Twig/Components/OverflowList.php | 94 +++++++++++++++---------
 1 file changed, 59 insertions(+), 35 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index 88a14497..fe5220e7 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -9,6 +9,7 @@
 namespace Ibexa\DesignSystemTwig\Twig\Components;
 
 use InvalidArgumentException;
+use Symfony\Component\OptionsResolver\Options;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
@@ -17,14 +18,10 @@
 #[AsTwigComponent('ibexa:overflow_list')]
 final class OverflowList
 {
-    /**
-     * @var list<array>
-     */
+    /** @var list<array> */
     public array $items = [];
 
-    /**
-     * @var array<string>
-     */
+    /** @var list<string> */
     public array $itemTemplateProps = [];
 
     /**
@@ -41,31 +38,12 @@ public function validate(array $props): array
             ->define('items')
             ->allowedTypes('array')
             ->default([])
-            ->normalize(static function ($options, $value): array {
-                if (!is_array($value) || !array_is_list($value)) {
-                    throw new InvalidArgumentException('Property "items" must be a list (sequential array).');
-                }
-
-                foreach ($value as $i => $item) {
-                    if (!is_array($item)) {
-                        throw new InvalidArgumentException(sprintf('items[%d] must be an array, %s given.', $i, get_debug_type($item)));
-                    }
-                    foreach (array_keys($item) as $key) {
-                        if (!is_string($key)) {
-                            throw new InvalidArgumentException(sprintf('items[%d] must use string keys.', $i));
-                        }
-                        if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $key)) {
-                            throw new InvalidArgumentException(sprintf('Invalid key "%s" in items[%d].', $key, $i));
-                        }
-                    }
-                }
-
-                return $value;
-            });
+            ->normalize(self::normalizeItems(...));
         $resolver
             ->define('itemTemplateProps')
             ->allowedTypes('array')
-            ->default([]);
+            ->default([])
+            ->normalize(self::normalizeItemTemplateProps(...));
 
         return $resolver->resolve($props) + $props;
     }
@@ -76,20 +54,66 @@ public function validate(array $props): array
     #[ExposeInTemplate('item_template_props')]
     public function getItemTemplateProps(): array
     {
-        if (empty($this->items)) {
+        if (empty($this->itemTemplateProps)) {
             return [];
         }
 
-        $allKeys = [];
-        foreach ($this->items as $item) {
-            $allKeys = array_unique([...$allKeys, ...array_keys($item)]);
-        }
-
         $props = [];
-        foreach ($allKeys as $name) {
+        foreach ($this->itemTemplateProps as $name) {
             $props[$name] = '{{ ' . $name . ' }}';
         }
 
         return $props;
     }
+
+    /**
+     * @param Options<array<string, mixed>> $options
+     * @param array<int, mixed> $value
+     *
+     * @return list<array<string, mixed>>
+     */
+    private static function normalizeItems(Options $options, array $value): array
+    {
+        if (!array_is_list($value)) {
+            throw new InvalidArgumentException('Property "items" must be a list (sequential array).');
+        }
+
+        foreach ($value as $i => $item) {
+            if (!is_array($item)) {
+                throw new InvalidArgumentException(sprintf('items[%d] must be an array, %s given.', $i, get_debug_type($item)));
+            }
+            foreach (array_keys($item) as $key) {
+                if (!is_string($key)) {
+                    throw new InvalidArgumentException(sprintf('items[%d] must use string keys.', $i));
+                }
+                if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $key)) {
+                    throw new InvalidArgumentException(sprintf('Invalid key "%s" in items[%d].', $key, $i));
+                }
+            }
+        }
+
+        return $value;
+    }
+
+    /**
+     * @param Options<array<string, mixed>> $options
+     * @param array<int|string, mixed> $value
+     *
+     * @return array<int, string>
+     */
+    private static function normalizeItemTemplateProps(Options $options, array $value): array
+    {
+        foreach ($value as $key => $prop) {
+            if (!is_string($prop)) {
+                $index = is_int($key) ? (string) $key : sprintf('"%s"', $key);
+                throw new InvalidArgumentException(sprintf('itemTemplateProps[%s] must be a string, %s given.', $index, get_debug_type($prop)));
+            }
+
+            if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $prop)) {
+                throw new InvalidArgumentException(sprintf('Invalid itemTemplateProps value "%s".', $prop));
+            }
+        }
+
+        return array_values($value);
+    }
 }

From 0e9e6ffc17b6bd2682cb2a3a9b5079e058c61fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Fri, 24 Oct 2025 16:08:54 +0200
Subject: [PATCH 7/9] after cr

---
 .../Resources/public/ts/components/overflow_list.ts    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/bundle/Resources/public/ts/components/overflow_list.ts b/src/bundle/Resources/public/ts/components/overflow_list.ts
index 64864e21..486ceb14 100644
--- a/src/bundle/Resources/public/ts/components/overflow_list.ts
+++ b/src/bundle/Resources/public/ts/components/overflow_list.ts
@@ -8,12 +8,12 @@ export class OverflowList extends Base {
     private _moreItemNode: HTMLDivElement;
     private _numberOfItems = 0;
     private _numberOfVisibleItems = 0;
+    private _resizeTimeoutId: number | null = null;
     private _templates: Record<'item' | 'itemMore', string> = {
         item: '',
         itemMore: '',
     };
 
-    private _resizeTimeoutId: number | null = null;
     private _resizeObserver = new ResizeObserver(() => {
         if (this._resizeTimeoutId) {
             clearTimeout(this._resizeTimeoutId);
@@ -42,14 +42,14 @@ export class OverflowList extends Base {
             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._itemsNode.querySelectorAll<HTMLDivElement>(itemsSelector));
+        const items = getOnlyVisible
+            ? Array.from(this._itemsNode.querySelectorAll<HTMLDivElement>(':scope > *:not([hidden])'))
+            : Array.from(this._itemsNode.querySelectorAll<HTMLDivElement>(':scope > *'));
 
         if (withOverflow) {
             return items;
@@ -73,6 +73,7 @@ export class OverflowList extends Base {
 
         if (hiddenCount > 0) {
             const tempMoreItem = document.createElement('div');
+
             tempMoreItem.innerHTML = this._templates.itemMore.replace('{{ hidden_count }}', hiddenCount.toString());
 
             if (!tempMoreItem.firstElementChild) {
@@ -131,6 +132,7 @@ export class OverflowList extends Base {
 
     public rerender() {
         let stopRecalculating = true;
+
         do {
             stopRecalculating = this.recalculateVisibleItems();
 

From cadfb04c1ee41e8e01b7f4e5c4640598096bdd12 Mon Sep 17 00:00:00 2001
From: mikolaj <mikolaj.adamczyk@ez.no>
Date: Mon, 27 Oct 2025 09:07:00 +0100
Subject: [PATCH 8/9] Refine type annotations for OverflowList properties

---
 src/lib/Twig/Components/OverflowList.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index fe5220e7..e0053906 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -18,10 +18,10 @@
 #[AsTwigComponent('ibexa:overflow_list')]
 final class OverflowList
 {
-    /** @var list<array> */
+    /** @var array<int, array<string, mixed>> */
     public array $items = [];
 
-    /** @var list<string> */
+    /** @var array<int, string> */
     public array $itemTemplateProps = [];
 
     /**

From 6d70df98a61c0646cabd45d44645667cafa304ed Mon Sep 17 00:00:00 2001
From: mikolaj <mikolaj.adamczyk@ez.no>
Date: Mon, 27 Oct 2025 09:09:38 +0100
Subject: [PATCH 9/9] Refactor error messages in OverflowList to improve
 readability

---
 src/lib/Twig/Components/OverflowList.php | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/lib/Twig/Components/OverflowList.php b/src/lib/Twig/Components/OverflowList.php
index e0053906..8a7e0cc0 100644
--- a/src/lib/Twig/Components/OverflowList.php
+++ b/src/lib/Twig/Components/OverflowList.php
@@ -75,19 +75,27 @@ public function getItemTemplateProps(): array
     private static function normalizeItems(Options $options, array $value): array
     {
         if (!array_is_list($value)) {
-            throw new InvalidArgumentException('Property "items" must be a list (sequential array).');
+            throw new InvalidArgumentException(
+                'Property "items" must be a list (sequential array).'
+            );
         }
 
         foreach ($value as $i => $item) {
             if (!is_array($item)) {
-                throw new InvalidArgumentException(sprintf('items[%d] must be an array, %s given.', $i, get_debug_type($item)));
+                throw new InvalidArgumentException(
+                    sprintf('items[%d] must be an array, %s given.', $i, get_debug_type($item))
+                );
             }
             foreach (array_keys($item) as $key) {
                 if (!is_string($key)) {
-                    throw new InvalidArgumentException(sprintf('items[%d] must use string keys.', $i));
+                    throw new InvalidArgumentException(
+                        sprintf('items[%d] must use string keys.', $i)
+                    );
                 }
                 if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $key)) {
-                    throw new InvalidArgumentException(sprintf('Invalid key "%s" in items[%d].', $key, $i));
+                    throw new InvalidArgumentException(
+                        sprintf('Invalid key "%s" in items[%d].', $key, $i)
+                    );
                 }
             }
         }
@@ -106,11 +114,15 @@ private static function normalizeItemTemplateProps(Options $options, array $valu
         foreach ($value as $key => $prop) {
             if (!is_string($prop)) {
                 $index = is_int($key) ? (string) $key : sprintf('"%s"', $key);
-                throw new InvalidArgumentException(sprintf('itemTemplateProps[%s] must be a string, %s given.', $index, get_debug_type($prop)));
+                throw new InvalidArgumentException(
+                    sprintf('itemTemplateProps[%s] must be a string, %s given.', $index, get_debug_type($prop))
+                );
             }
 
             if (!preg_match('/^[A-Za-z_][A-Za-z0-9_]*$/', $prop)) {
-                throw new InvalidArgumentException(sprintf('Invalid itemTemplateProps value "%s".', $prop));
+                throw new InvalidArgumentException(
+                    sprintf('Invalid itemTemplateProps value "%s".', $prop)
+                );
             }
         }