@synerise/ds-item-picker 1.6.2 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.6.2...@synerise/ds-item-picker@1.7.0) (2025-07-04)
+
+
+### Features
+
+* **item-picker:** add onLoadedItems prop ([4a848a9](https://github.com/Synerise/synerise-design/commit/4a848a9cd2b00e8f1f440478f321ad3c06214089))
+
+
+
+
+
 ## [1.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.6.1...@synerise/ds-item-picker@1.6.2) (2025-07-01)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/components/ItemPickerList/ItemPickerList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { BaseItemType, BaseSectionType } from '../ItemPickerNew/ItemPickerNew.types';
 import type { ItemPickerListProps } from './ItemPickerList.types';
-export declare const ItemPickerList: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, recents, sections, actions, texts, isLoading, selectedItem, scrollbarProps, searchBarProps, showItemsSectionLabel, onItemSelect, onRefresh, containerHeight, isVisible, onSectionChange, containerRef: forwardedRef, includeFooter, includeSearchBar, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>) => React.JSX.Element;
+export declare const ItemPickerList: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, recents, sections, actions, texts, isLoading, selectedItem, scrollbarProps, searchBarProps, showItemsSectionLabel, onItemSelect, onRefresh, containerHeight, isVisible, onSectionChange, containerRef: forwardedRef, includeFooter, includeSearchBar, onLoadedData, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>) => React.JSX.Element;
 export default ItemPickerList;

package/dist/components/ItemPickerList/ItemPickerList.js

@@ -1,4 +1,4 @@
-var _excluded = ["items", "recents", "sections", "actions", "texts", "isLoading", "selectedItem", "scrollbarProps", "searchBarProps", "showItemsSectionLabel", "onItemSelect", "onRefresh", "containerHeight", "isVisible", "onSectionChange", "containerRef", "includeFooter", "includeSearchBar"];
+var _excluded = ["items", "recents", "sections", "actions", "texts", "isLoading", "selectedItem", "scrollbarProps", "searchBarProps", "showItemsSectionLabel", "onItemSelect", "onRefresh", "containerHeight", "isVisible", "onSectionChange", "containerRef", "includeFooter", "includeSearchBar", "onLoadedData"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { debounce } from 'lodash';
@@ -39,6 +39,7 @@ export var ItemPickerList = function ItemPickerList(_ref) {
     includeFooter = _ref$includeFooter === void 0 ? true : _ref$includeFooter,
     _ref$includeSearchBar = _ref.includeSearchBar,
     includeSearchBar = _ref$includeSearchBar === void 0 ? true : _ref$includeSearchBar,
+    onLoadedData = _ref.onLoadedData,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var theme = useTheme();
   var _useState = useState(''),
@@ -81,7 +82,8 @@ export var ItemPickerList = function ItemPickerList(_ref) {
       handleItemSelect: handleItemSelect,
       onSectionChange: onSectionChange,
       showItemsSectionLabel: showItemsSectionLabel,
-      changeSearchQuery: changeSearchQuery
+      changeSearchQuery: changeSearchQuery,
+      onLoadedData: onLoadedData
     }),
     currentSection = _useItemsInSections.currentSection,
     resetCurrentSection = _useItemsInSections.resetCurrentSection,

package/dist/components/ItemPickerList/ItemPickerList.types.d.ts

@@ -3,7 +3,7 @@ import type { ListItemProps } from '@synerise/ds-list-item';
 import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
 import type { SearchBarProps } from '@synerise/ds-search-bar';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
-import type { ActionType, BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, ContainerHeightType, ItemLoaderConfig, ItemsConfig } from '../ItemPickerNew/ItemPickerNew.types';
+import type { ActionType, BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, ContainerHeightType, ItemLoaderConfig, ItemsConfig, OnLoadedData } from '../ItemPickerNew/ItemPickerNew.types';
 type TextsAsReactNode = 'basicSearchPlaceholder' | 'searchPlaceholder' | 'refreshButtonLabel' | 'showMoreResultsLabel' | 'noItems' | 'noResults' | 'noResultsInSection' | 'searchAllFoldersButtonLabel' | 'recentsSectionLabel' | 'actionsSectionLabel' | 'resultsSectionLabel' | 'noActions' | 'itemsSectionLabel' | 'infiniteScrollLoadingMore' | 'infiniteScrollLoadingError' | 'errorMessageTitle' | 'errorMessageDetails' | 'backTooltip' | 'clearSearchTooltip' | 'infiniteScrollAllLoaded';
 export type ItemPickerListTexts = {
     [key in TextsAsReactNode]: ReactNode;
@@ -31,6 +31,7 @@ export type ItemPickerListProps<ItemType extends BaseItemType, SectionType exten
     containerRef?: Ref<HTMLDivElement>;
     includeSearchBar?: boolean;
     includeFooter?: boolean;
+    onLoadedData?: OnLoadedData;
 }>;
 export type TitleListItemProps = Omit<ListItemProps, 'type'> & {
     type: 'title';

package/dist/components/ItemPickerList/hooks/useItemsInSections.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, SearchActionType, SearchParamConfig } from '../../ItemPickerNew/ItemPickerNew.types';
+import type { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, OnLoadedData, SearchActionType, SearchParamConfig } from '../../ItemPickerNew/ItemPickerNew.types';
 import type { ItemPickerListProps, ItemPickerListTexts } from '../ItemPickerList.types';
 type ItemsInSectionsType<ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined> = {
     items: ItemPickerListProps<ItemType, SectionType>['items'];
@@ -14,8 +14,9 @@ type ItemsInSectionsType<ItemType extends BaseItemType, SectionType extends Base
     getItemKey?: (item: ItemType) => string | number;
     showItemsSectionLabel: boolean;
     changeSearchQuery: (query: string) => void;
+    onLoadedData?: OnLoadedData;
 };
-export declare const useItemsInSections: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, texts, selectedItem, sections, recents, actions, searchQuery, handleItemSelect, onSectionChange, getItemKey, showItemsSectionLabel, changeSearchQuery, }: ItemsInSectionsType<ItemType, SectionType>) => {
+export declare const useItemsInSections: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, texts, selectedItem, sections, recents, actions, searchQuery, handleItemSelect, onSectionChange, getItemKey, showItemsSectionLabel, changeSearchQuery, onLoadedData, }: ItemsInSectionsType<ItemType, SectionType>) => {
     currentSection: BaseSectionType | SectionType | undefined;
     currentPath: import("react").ReactNode[] | undefined;
     goBack: () => void;

package/dist/components/ItemPickerList/hooks/useItemsInSections.js

@@ -4,6 +4,7 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { itemSizes } from '@synerise/ds-list-item';
 import { FIRST_PAGE, GET_ITEM_KEY, ITEMS_PER_PAGE, ITEMS_PER_SECTION, ITEMS_PER_SECTION_IN_SEARCH, ITEM_SIZE, SECTION_HEADER_HEIGHT } from '../constants';
+import { RENDER_MODES } from '../types/renderMode';
 import { isItems, isItemsConfig, isWithOutSections } from '../utils';
 import { getSearchActionItems } from '../utils/getSearchActionItems';
 import { useFlattenFolders } from './useFlattenFolders';
@@ -13,11 +14,6 @@ var getSectionHeight = function getSectionHeight(itemsCount, withTitle) {
   var titleHeight = withTitle && itemsCount ? ITEM_SIZE.title : 0;
   return itemsHeight + titleHeight;
 };
-var RENDER_MODES = {
-  LIST_ITEMS_IN_SECTIONS: 'ITEMS_IN_SECTIONS',
-  LIST_FOLDERS_IN_SECTIONS: 'LIST_FOLDERS_IN_SECTION',
-  LIST_ITEMS: 'LIST_ITEMS'
-};
 export var useItemsInSections = function useItemsInSections(_ref) {
   var items = _ref.items,
     texts = _ref.texts,
@@ -31,7 +27,8 @@ export var useItemsInSections = function useItemsInSections(_ref) {
     _ref$getItemKey = _ref.getItemKey,
     getItemKey = _ref$getItemKey === void 0 ? GET_ITEM_KEY : _ref$getItemKey,
     showItemsSectionLabel = _ref.showItemsSectionLabel,
-    changeSearchQuery = _ref.changeSearchQuery;
+    changeSearchQuery = _ref.changeSearchQuery,
+    onLoadedData = _ref.onLoadedData;
   var _useState = useState(),
     currentSection = _useState[0],
     setCurrentSection = _useState[1];
@@ -249,7 +246,7 @@ export var useItemsInSections = function useItemsInSections(_ref) {
           currentRequestId = crypto.randomUUID();
           requestIdRef.current = currentRequestId;
           if (!(listRenderingMode === RENDER_MODES.LIST_ITEMS)) {
-            _context.next = 29;
+            _context.next = 30;
             break;
           }
           sectionId = (currentSection == null ? void 0 : currentSection.id) || 'DEFAULT';
@@ -277,26 +274,32 @@ export var useItemsInSections = function useItemsInSections(_ref) {
           setIsLoading(false);
           loadedPage.current = FIRST_PAGE;
           metaRef.current[sectionId] = meta;
+          onLoadedData == null || onLoadedData({
+            sectionId: sectionId,
+            meta: meta,
+            renderMode: listRenderingMode
+          });
           setIsInitialDataLoaded(true);
           setCurrentItems(_fetchedItems);
-          _context.next = 28;
+          _context.next = 29;
           break;
-        case 23:
-          _context.prev = 23;
+        case 24:
+          _context.prev = 24;
           _context.t0 = _context["catch"](8);
           setIsLoading(false);
           setIsInitialDataLoaded(true);
           setIsLoadingError(true);
-        case 28:
-          return _context.abrupt("return");
         case 29:
+          return _context.abrupt("return");
+        case 30:
           fetchedItems = [];
           requests = listRenderingMode === RENDER_MODES.LIST_FOLDERS_IN_SECTIONS ? [Promise.resolve()] : currentFolders == null ? void 0 : currentFolders.map(function (folder) {
+            var sectionId = folder.id;
             return items.loadItems({
               page: FIRST_PAGE,
               searchQuery: searchQuery,
               limit: (items.limitPerSection || ITEMS_PER_SECTION) + 1,
-              sectionId: folder.id,
+              sectionId: sectionId,
               meta: undefined,
               abortController: abortControllerRef.current,
               searchKey: searchParamConfig == null ? void 0 : searchParamConfig.paramKey
@@ -304,58 +307,63 @@ export var useItemsInSections = function useItemsInSections(_ref) {
               var sectionItems = _ref3.items,
                 total = _ref3.total,
                 meta = _ref3.meta;
+              onLoadedData == null || onLoadedData({
+                sectionId: sectionId,
+                meta: meta,
+                renderMode: listRenderingMode
+              });
               metaRef.current[folder.id] = meta;
               sectionTotals.current[folder.id] = total;
               fetchedItems = [].concat(fetchedItems, sectionItems);
             });
           });
-          _context.prev = 31;
+          _context.prev = 32;
           if (!requests) {
-            _context.next = 38;
+            _context.next = 39;
             break;
           }
-          _context.next = 35;
+          _context.next = 36;
           return Promise.allSettled(requests);
-        case 35:
+        case 36:
           _context.t1 = _context.sent;
-          _context.next = 39;
+          _context.next = 40;
           break;
-        case 38:
-          _context.t1 = [];
         case 39:
+          _context.t1 = [];
+        case 40:
           results = _context.t1;
           if (!(currentRequestId !== requestIdRef.current)) {
-            _context.next = 42;
+            _context.next = 43;
             break;
           }
           return _context.abrupt("return");
-        case 42:
+        case 43:
           setIsLoading(false);
           setIsInitialDataLoaded(true);
           if (!results.every(function (result) {
             return result.status === 'fulfilled';
           })) {
-            _context.next = 47;
+            _context.next = 48;
             break;
           }
           setCurrentItems(fetchedItems);
           return _context.abrupt("return");
-        case 47:
+        case 48:
           setIsLoadingError(true);
-          _context.next = 55;
+          _context.next = 56;
           break;
-        case 50:
-          _context.prev = 50;
-          _context.t2 = _context["catch"](31);
+        case 51:
+          _context.prev = 51;
+          _context.t2 = _context["catch"](32);
           setIsLoading(false);
           setIsInitialDataLoaded(true);
           setIsLoadingError(true);
-        case 55:
+        case 56:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[8, 23], [31, 50]]);
-  })), [searchParamConfig, currentSection, isFixedItemsList, currentFolders, listRenderingMode, items, listActions, searchQuery, searchActionSection]);
+    }, _callee, null, [[8, 24], [32, 51]]);
+  })), [searchParamConfig, currentSection, isFixedItemsList, currentFolders, listRenderingMode, items, listActions, searchQuery, searchActionSection, onLoadedData]);
   useEffect(function () {
     if (listActions) {
       return;

package/dist/components/ItemPickerList/types/renderMode.d.ts

@@ -0,0 +1,6 @@
+export declare const RENDER_MODES: {
+    readonly LIST_ITEMS_IN_SECTIONS: "ITEMS_IN_SECTIONS";
+    readonly LIST_FOLDERS_IN_SECTIONS: "LIST_FOLDERS_IN_SECTION";
+    readonly LIST_ITEMS: "LIST_ITEMS";
+};
+export type RenderMode = (typeof RENDER_MODES)[keyof typeof RENDER_MODES];

package/dist/components/ItemPickerList/types/renderMode.js

@@ -0,0 +1,5 @@
+export var RENDER_MODES = {
+  LIST_ITEMS_IN_SECTIONS: 'ITEMS_IN_SECTIONS',
+  LIST_FOLDERS_IN_SECTIONS: 'LIST_FOLDERS_IN_SECTION',
+  LIST_ITEMS: 'LIST_ITEMS'
+};

package/dist/components/ItemPickerNew/ItemPickerNew.types.d.ts

@@ -5,6 +5,7 @@ import type { InformationCardProps } from '@synerise/ds-information-card';
 import type { ListItemProps } from '@synerise/ds-list-item';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
 import type { ItemPickerListProps, ItemPickerListTexts } from '../ItemPickerList/ItemPickerList.types';
+import type { RenderMode } from '../ItemPickerList/types/renderMode';
 import type { ItemPickerTriggerProps, ItemPickerTriggerTexts } from '../ItemPickerTrigger/Trigger.types';
 type HeightConfig = {
     defaultHeight: number;
@@ -40,6 +41,9 @@ export type LoaderProps = {
     abortController?: AbortController;
     searchKey?: string;
 };
+export type OnLoadedData = (options: Pick<LoaderProps, 'sectionId' | 'meta'> & {
+    renderMode: RenderMode;
+}) => void;
 export type ItemLoaderConfig<ItemType extends BaseItemType> = {
     limitPerPage?: number;
     limitPerSection?: number;
@@ -83,6 +87,7 @@ export type ItemPickerProps<ItemType extends BaseItemType, SectionType extends B
     onChange?: (item: ItemType) => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    onLoadedData?: OnLoadedData;
     dropdownProps?: Partial<DropdownProps>;
 } & Pick<ItemPickerListProps<ItemType, SectionType>, 'items' | 'actions' | 'recents' | 'sections' | 'isLoading' | 'onRefresh' | 'onSectionChange' | 'containerHeight' | 'showItemsSectionLabel' | 'noResultsIcon' | 'emptyListIcon' | 'selectedItem' | 'getItemHeight' | 'scrollbarProps' | 'searchBarProps' | 'includeFooter' | 'includeSearchBar'>> & FormFieldCommonProps & Partial<Pick<ItemPickerTriggerProps, 'placeholder' | 'placeholderIcon' | 'onClear'>>;
 export type SearchConfig = {

package/dist/index.d.ts

@@ -5,4 +5,4 @@ export { default as ItemPickerTrigger } from './components/ItemPickerTrigger/Tri
 export { ItemPickerList } from './components/ItemPickerList/ItemPickerList';
 export { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
 export type { ItemPickerListProps, ItemPickerListTexts, ItemSelectHandler, } from './components/ItemPickerList/ItemPickerList.types';
-export type { ItemPickerProps as ItemPickerPropsNew, ItemLoaderConfig, BaseSectionTypeWithFolders, BaseItemType, ItemLoaderResponse, LoaderProps, } from './components/ItemPickerNew/ItemPickerNew.types';
+export type { ItemPickerProps as ItemPickerPropsNew, ItemLoaderConfig, BaseSectionTypeWithFolders, BaseItemType, ItemLoaderResponse, LoaderProps, OnLoadedData, } from './components/ItemPickerNew/ItemPickerNew.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,7 +42,7 @@
     "@synerise/ds-flag": "^1.0.2",
     "@synerise/ds-form-field": "^1.1.8",
     "@synerise/ds-icon": "^1.5.4",
-    "@synerise/ds-information-card": "^1.0.18",
+    "@synerise/ds-information-card": "^1.0.19",
     "@synerise/ds-list-item": "^1.0.13",
     "@synerise/ds-loader": "^1.0.6",
     "@synerise/ds-popconfirm": "^1.0.14",
@@ -64,5 +64,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
+  "gitHead": "2161bdb04f3db0f79b7d0465ce6b41121f1543ef"
 }