fix(CheckboxFilter): show 'Show more' option properly

src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js

@@ -1,23 +1,35 @@
 import { configItemItemByLabel, defaultOnChange, stringToId } from '../helpers';
 
+export const DEFAULT_MODAL_VISIBLE_ITEM_COUNT = 10;
+
+const getVisibleItemCount = (modal) =>
+  modal?.visibleItemCount ?? DEFAULT_MODAL_VISIBLE_ITEM_COUNT;
+
 const checkboxType = {
-  filterValues: ({ items, label, modal }, handler, value, openFilterModal) => ({
-    items: [
-      ...items,
-      ...(modal
-        ? [
-            {
-              // TODO The checkbox filter in frontend-components does not really support "Show more", like the group filter.
-              label: 'Show more',
-              value: 'modal',
-              onClick: () => openFilterModal?.(stringToId(label)),
-            },
-          ]
-        : []),
-    ],
-    value,
-    ...defaultOnChange(handler, stringToId(label)),
-  }),
+  filterValues: ({ items, label, modal }, handler, value, openFilterModal) => {
+    const dropdownItems = modal
+      ? items.slice(0, getVisibleItemCount(modal))
+      : items;
+
+    return {
+      items: [
+        ...dropdownItems,
+        ...(modal
+          ? [
+              {
+                label: 'Show more',
+                value: 'modal',
+                hasCheckbox: false,
+                isLoadButton: true,
+                onClick: () => openFilterModal?.(stringToId(label)),
+              },
+            ]
+          : []),
+      ],
+      value,
+      ...defaultOnChange(handler, stringToId(label)),
+    };
+  },
   filterChips: (configItem, value) => ({
     category: configItem.label,
     chips: value.map((chipValue) => {

src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js

@@ -1,9 +1,9 @@
 import { faker } from '@faker-js/faker';
 
-import { genre } from '~/support/factories/filters';
+import { genre, genreWithModal } from '~/support/factories/filters';
 import { genres } from '~/support/factories/items';
 
-import checkboxType from './checkboxType';
+import checkboxType, { DEFAULT_MODAL_VISIBLE_ITEM_COUNT } from './checkboxType';
 import { stringToId } from '../helpers';
 
 describe('checkboxType', () => {
@@ -18,6 +18,36 @@ describe('checkboxType', () => {
         }),
       );
     });
+
+    it('should limit dropdown items when modal is enabled', () => {
+      const { items } = checkboxType.filterValues(
+        genreWithModal,
+        () => {},
+        [],
+        jest.fn(),
+      );
+
+      expect(items).toHaveLength(DEFAULT_MODAL_VISIBLE_ITEM_COUNT + 1);
+      expect(items.slice(0, -1)).toEqual(
+        genreWithModal.items.slice(0, DEFAULT_MODAL_VISIBLE_ITEM_COUNT),
+      );
+      expect(items[items.length - 1].label).toBe('Show more');
+    });
+
+    it('should allow overriding the visible item count via modal.visibleItemCount', () => {
+      const visibleItemCount = 3;
+      const { items } = checkboxType.filterValues(
+        { ...genreWithModal, modal: { visibleItemCount } },
+        () => {},
+        [],
+        jest.fn(),
+      );
+
+      expect(items).toHaveLength(visibleItemCount + 1);
+      expect(items.slice(0, -1)).toEqual(
+        genreWithModal.items.slice(0, visibleItemCount),
+      );
+    });
   });
 
   describe('filterChips', () => {