Merge branch '2026.1' into 2026.x

Author: fashxp

assets/js/src/core/modules/classification-store-config/components/store-editor/tabs/groups/key-selection-dialog.tsx

@@ -8,13 +8,13 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Modal, Input } from 'antd'
 import { Grid } from '@Pimcore/components/grid/grid'
 import { Content } from '@Pimcore/components/content/content'
-import { createColumnHelper } from '@tanstack/react-table'
-import { type RowSelectionState } from '@tanstack/react-table'
+import { Pagination } from '@Pimcore/components/pagination/pagination'
+import { createColumnHelper, type RowSelectionState, type SortingState } from '@tanstack/react-table'
 import {
   type ClassificationStoreConfigurationKeyDetail,
   useClassificationStoreConfigurationKeyCollectionQuery
@@ -40,34 +40,57 @@ export const KeySelectionDialog = ({
 
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedRows, setSelectedRows] = useState<RowSelectionState>({})
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [page, setPage] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(20)
+
+  const onSortingChange = useCallback((newSorting: SortingState) => {
+    setSorting(newSorting)
+    setPage(1)
+  }, [])
+
+  const queryArgs = useMemo(() => ({
+    storeId,
+    body: {
+      filters: {
+        page,
+        pageSize,
+        columnFilters: searchTerm.trim().length > 0
+          ? [{ type: 'search', filterValue: searchTerm.trim() }]
+          : [],
+        ...(sorting.length > 0
+          ? {
+              sortFilter: {
+                key: sorting[0].id,
+                direction: sorting[0].desc ? 'DESC' : 'ASC'
+              }
+            }
+          : {})
+      }
+    }
+  }), [storeId, page, pageSize, searchTerm, sorting])
 
   const { data, isLoading } = useClassificationStoreConfigurationKeyCollectionQuery(
-    { storeId, body: { filters: { page: 1, pageSize: 9999 } } },
+    queryArgs,
     { skip: !open }
   )
 
-  const allKeys = data?.items ?? []
+  const total = data?.totalItems ?? 0
 
-  // Reset selection and search when dialog opens
+  // Reset selection, search and pagination when dialog opens
   useEffect(() => {
     if (open) {
       setSelectedRows({})
       setSearchTerm('')
+      setSorting([])
+      setPage(1)
     }
   }, [open])
 
   const availableKeys = useMemo(() => {
     const excludedSet = new Set(excludedKeyIds)
-    return allKeys.filter((k) => {
-      if (excludedSet.has(k.id)) return false
-      if (searchTerm.trim() === '') return true
-      const term = searchTerm.trim().toLowerCase()
-      return (
-        k.name.toLowerCase().includes(term) ||
-        (k.description ?? '').toLowerCase().includes(term)
-      )
-    })
-  }, [allKeys, excludedKeyIds, searchTerm])
+    return (data?.items ?? []).filter((k) => !excludedSet.has(k.id))
+  }, [data?.items, excludedKeyIds])
 
   const columnHelper = createColumnHelper<ClassificationStoreConfigurationKeyDetail>()
 
@@ -117,7 +140,10 @@ export const KeySelectionDialog = ({
         vertical
       >
         <Input.Search
-          onChange={ (e) => { setSearchTerm(e.target.value) } }
+          onChange={ (e) => {
+            setSearchTerm(e.target.value)
+            setPage(1)
+          } }
           placeholder={ t('classification-store.search-keys') }
           value={ searchTerm }
         />
@@ -130,12 +156,28 @@ export const KeySelectionDialog = ({
             columns={ columns }
             data={ availableKeys }
             enableMultipleRowSelection
+            enableSorting
             isLoading={ isLoading }
+            manualSorting
             onSelectedRowsChange={ setSelectedRows }
+            onSortingChange={ onSortingChange }
             selectedRows={ selectedRows }
             setRowId={ (row: ClassificationStoreConfigurationKeyDetail) => row.id !== undefined ? String(row.id) : undefined as unknown as string }
+            sorting={ sorting }
           />
         </Content>
+
+        <Pagination
+          current={ page }
+          defaultPageSize={ pageSize }
+          onChange={ (newPage, newPageSize) => {
+            setPage(newPage)
+            setPageSize(newPageSize)
+          } }
+          showSizeChanger
+          showTotal={ (total) => t('pagination.show-total', { total }) }
+          total={ total }
+        />
       </Flex>
     </Modal>
   )

doc/01_Architecture_Overview/01_SDK_Overview/01_UI_Components_and_Storybook.md

@@ -28,4 +28,4 @@ Explore our [Storybook](../../05_Development_Details/01_Studio_UI_Core_Developme
 
 ## Source
 
-- [Component Overview](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/components)
+- [Component Overview](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/components)

doc/01_Architecture_Overview/01_SDK_Overview/02_Plugin_Architecture_Plugins_Modules.md

@@ -40,7 +40,7 @@ onStartup: ({ moduleSystem }): void => {
 }
 ```
 
-For more details on plugins, refer to the [Plugin system source](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/app/plugin-system/plugin-system.ts).
+For more details on plugins, refer to the [Plugin system source](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/app/plugin-system/plugin-system.ts).
 
 ---
 
@@ -66,4 +66,4 @@ export const ImageSliderModule: AbstractModule = {
 }
 ```
 
-For more details, refer to the [Module system source](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/app/module-system/module-system.ts).
+For more details, refer to the [Module system source](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/app/module-system/module-system.ts).

doc/01_Architecture_Overview/01_SDK_Overview/03_Services_and_Dependency_Injection.md

@@ -76,4 +76,4 @@ The DI container is used in multiple examples. For instance, refer to the [How t
 
 ### Source
 
-- [Core services](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/app/config/services/index.ts)
+- [Core services](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/app/config/services/index.ts)

doc/01_Architecture_Overview/01_SDK_Overview/04_Component_Registry.md

@@ -67,7 +67,7 @@ This configuration ensures that components are registered in the correct context
 ### Default Configuration
 
 The default configuration is defined in
-[`component-config.ts`](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/modules/app/component-registry/component-config.ts).
+[`component-config.ts`](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/modules/app/component-registry/component-config.ts).
 It organizes components into a hierarchical structure based on their context,
 such as `asset`, `dataObject`, or `wysiwyg`.
 
@@ -116,7 +116,7 @@ componentRegistry.registerConfig({
 })
 ```
 
-Refer to the [Component Configuration Source](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/modules/app/component-registry/component-config.ts)
+Refer to the [Component Configuration Source](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/modules/app/component-registry/component-config.ts)
 for the complete default configuration and available single components and slots.
 This file lists the extension points available in Pimcore Studio via the component registry.
 

doc/01_Architecture_Overview/01_SDK_Overview/05_Widget_Manager.md

@@ -192,4 +192,4 @@ refer to the [Widget Manager example](../../04_Extending/02_Plugin_Development_E
 
 ### Source
 
-- [Widget Manager Hooks](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/widget-manager/hooks)
+- [Widget Manager Hooks](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/widget-manager/hooks)

doc/01_Architecture_Overview/01_SDK_Overview/06_Context_Menu_Registry.md

@@ -70,7 +70,7 @@ contextMenuRegistry.registerToSlot(contextMenuConfig.assetListGrid.name, {
 })
 ```
 
-The [Context Menu Configuration Source](https://github.com/pimcore/studio-ui-bundle/blob/1.x/assets/js/src/core/modules/app/context-menu-registry/context-menu-config.ts) contains all available slot names and their priority configurations for consistent referencing.
+The [Context Menu Configuration Source](https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/modules/app/context-menu-registry/context-menu-config.ts) contains all available slot names and their priority configurations for consistent referencing.
 
 ## Modifying Existing Context Menu Items
 

doc/01_Architecture_Overview/01_SDK_Overview/07_Dynamic_Types.md

@@ -18,44 +18,44 @@ handles them. They serve as boilerplate for creating or extending types by cover
 implementation details, from the edit view to versions and listings.
 
 #### Source
-  - [Data types](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related)
-  - [Layout types](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/objects/layout-related)
+  - [Data types](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related)
+  - [Layout types](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/objects/layout-related)
 
 ### Meta-Data
 Dynamic types define how asset metadata appears in different views,
 such as grids and version comparisons.
 
 #### Source
-  - [Meta-data](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/meta-data)
+  - [Meta-data](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/meta-data)
 
 ### Grid-Cells
 For grid cells, dynamic types describe how each cell renders its value and whether it supports
 inline editing. Grid cell types range from simple text to images and other complex types.
 
 #### Source
-- [Grid cells](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell)
+- [Grid cells](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell)
 
 ### Assets
 Defines which asset types (image, audio, folder, etc.) are available in Pimcore Studio.
 
 #### Source
 
-- [Assets](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/asset)
+- [Assets](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/asset)
 
 ### Batch-Edit
 In the context of batch editing, dynamic types specify how form fields should behave.
 
 #### Source
 
-- [Batch-edit](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/batch-edits)
+- [Batch-edit](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/batch-edits)
 
 ### Field-Filters
 Dynamic types define filter behavior within grids,
 mapping each data or asset metadata type to a suitable filter UI component.
 
 #### Source
 
-- [Field-filters](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters)
+- [Field-filters](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters)
 
 ## Overriding Dynamic Types
 

doc/01_Architecture_Overview/01_SDK_Overview/08_RTK_Query_API.md

@@ -25,7 +25,7 @@ and fewer runtime errors. These slices integrate with
 
 Import the generated API slices directly from the SDK.
 For an overview of available imports, see the
-[SDK API directory](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/sdk/api).
+[SDK API directory](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/sdk/api).
 
 :::tip
 The structure of the API imports mirrors the folder structure of the linked SDK API directory.

doc/01_Architecture_Overview/01_SDK_Overview/09_SDK_Imports.md

@@ -9,11 +9,11 @@ These imports act as modules that encapsulate specific functionalities or utilit
 
 The SDK defines the public API of Studio, meaning that not all components of the UI are exported by default. Only the components and modules intended to be used for extensions are made available through the SDK.
 
-For a full overview of all available import sources, you can refer to the [GitHub repository](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/sdk).
+For a full overview of all available import sources, you can refer to the [GitHub repository](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/sdk).
 
 ## Folder Structure and Import Paths
 
-The folder structure in the SDK mirrors the import paths. Each folder and `index.ts` in the [SDK](https://github.com/pimcore/studio-ui-bundle/tree/1.x/assets/js/src/sdk) corresponds directly to an importable module. For example, if there is a file located at `sdk/api/asset/index.ts`, you can import it in your project as follows:
+The folder structure in the SDK mirrors the import paths. Each folder and `index.ts` in the [SDK](https://github.com/pimcore/studio-ui-bundle/tree/2026.x/assets/js/src/sdk) corresponds directly to an importable module. For example, if there is a file located at `sdk/api/asset/index.ts`, you can import it in your project as follows:
 
 ```typescript
 import { useAssetGetByIdQuery } from '@pimcore/studio-ui-bundle/api/asset';