@synerise/ds-item-picker 1.0.7 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.1.0...@synerise/ds-item-picker@1.1.1) (2025-04-24)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
+
+
+
+
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.0.7...@synerise/ds-item-picker@1.1.0) (2025-04-16)
+
+
+### Features
+
+* **form-field:** add form-field component ([7f6b191](https://github.com/Synerise/synerise-design/commit/7f6b191132a3b0d694c21fb4d649f4deea6acb89))
+* **item-picker:** custom limit per section ([d45ec39](https://github.com/Synerise/synerise-design/commit/d45ec3951828811a03ca89bdbb3f39c91a120e22))
+
+
+
+
+
 ## [1.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.0.6...@synerise/ds-item-picker@1.0.7) (2025-04-08)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/ItemPicker.styles.d.ts

@@ -1,6 +1,3 @@
 export declare const ItemPickerWrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const Error: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;

package/dist/ItemPicker.styles.js

@@ -1,12 +1,5 @@
 import styled from 'styled-components';
-import { Description } from '@synerise/ds-typography';
 export var ItemPickerWrapper = styled.div.withConfig({
   displayName: "ItemPickerstyles__ItemPickerWrapper",
   componentId: "sc-1dxa5ip-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;& > label{margin-bottom:8px;}", "{margin-top:8px;}"], Description);
-export var Error = styled(Description).withConfig({
-  displayName: "ItemPickerstyles__Error",
-  componentId: "sc-1dxa5ip-1"
-})(["color:", ";"], function (props) {
-  return props.theme.palette['red-600'];
-});
+})(["position:relative;"]);

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.d.ts

@@ -3,5 +3,5 @@ import { ItemPickerProps } from './ItemPickerLegacy.types';
 /**
  * @deprecated - use new ItemPicker
  */
-declare const ItemPickerLegacy: ({ dataSource, onChange, onClear, placeholder, changeButtonLabel, clear, clearConfirmTitle, closeOnBottomAction, description, disabled, dropdownBottomAction, dropdownProps, dropdownRowHeight, dropdownVisibleRows, error, errorMessage, label, onBlur, onFocus, noResults, noText, placeholderIcon, searchPlaceholder, searchBarProps, selectedItem, tooltip, size, yesText, withClearConfirmation, scrollbarProps, informationCardTooltipProps, hideSearchBar, }: ItemPickerProps) => React.JSX.Element;
+declare const ItemPickerLegacy: ({ dataSource, onChange, onClear, placeholder, changeButtonLabel, clear, clearConfirmTitle, closeOnBottomAction, description, disabled, dropdownBottomAction, dropdownProps, dropdownRowHeight, dropdownVisibleRows, error, errorMessage, label, onBlur, onFocus, noResults, noText, placeholderIcon, searchPlaceholder, searchBarProps, selectedItem, tooltip, tooltipConfig, size, yesText, withClearConfirmation, scrollbarProps, informationCardTooltipProps, hideSearchBar, }: ItemPickerProps) => React.JSX.Element;
 export default ItemPickerLegacy;

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js

@@ -1,8 +1,7 @@
 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); }
 import React, { useState, useCallback, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import { Label } from '@synerise/ds-input';
-import { Description } from '@synerise/ds-typography';
+import FormField from '@synerise/ds-form-field';
 import Dropdown from '@synerise/ds-dropdown';
 import * as S from '../../ItemPicker.styles';
 import ItemPickerDropdown from '../ItemPickerDropdown/ItemPickerDropdown';
@@ -39,6 +38,7 @@ var ItemPickerLegacy = function ItemPickerLegacy(_ref) {
     searchBarProps = _ref.searchBarProps,
     selectedItem = _ref.selectedItem,
     tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     yesText = _ref.yesText,
@@ -143,15 +143,18 @@ var ItemPickerLegacy = function ItemPickerLegacy(_ref) {
   return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
     className: "ds-items-picker",
     disabled: disabled
-  }, label && /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(FormField, {
     label: label,
-    tooltip: tooltip
-  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    tooltip: tooltip,
+    tooltipConfig: tooltipConfig,
+    errorText: errorMessage,
+    description: description
+  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     visible: dropdownOpened,
     disabled: disabled,
     trigger: ['click'],
     overlay: dropdownOverlay,
     onVisibleChange: onVisibilityChange
-  }, dropdownProps), renderTrigger), error && errorMessage && /*#__PURE__*/React.createElement(S.Error, null, errorMessage), description && /*#__PURE__*/React.createElement(Description, null, description));
+  }, dropdownProps), renderTrigger)));
 };
 export default ItemPickerLegacy;

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

@@ -5,6 +5,7 @@ import type { DropdownProps } from '@synerise/ds-dropdown';
 import type { InformationCardTooltipProps } from '@synerise/ds-information-card';
 import type { ListItemProps } from '@synerise/ds-list-item';
 import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
+import type { FormFieldCommonProps } from '@synerise/ds-form-field';
 export type ItemPickerSize = 'small' | 'large';
 export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
     dataSource: ItemType[];
@@ -16,15 +17,13 @@ export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
     clear?: ReactNode;
     clearConfirmTitle?: string;
     closeOnBottomAction?: boolean;
-    description?: ReactNode;
     disabled?: boolean;
     dropdownBottomAction?: ReactNode;
     dropdownProps?: Partial<DropdownProps>;
     dropdownRowHeight?: number;
     dropdownVisibleRows?: number;
     error?: boolean;
-    errorMessage?: ReactNode;
-    label?: ReactNode;
+    errorMessage?: FormFieldCommonProps['errorText'];
     onBlur?: () => void;
     onFocus?: () => void;
     noResults?: string;
@@ -35,9 +34,8 @@ export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
     selectedItem?: ItemType | undefined;
     hideSearchBar?: boolean;
     size?: ItemPickerSize;
-    tooltip?: ReactNode;
     informationCardTooltipProps?: Omit<InformationCardTooltipProps, 'children'>;
     withClearConfirmation?: boolean;
     yesText?: string;
     scrollbarProps?: ScrollbarAdditionalProps;
-};
+} & Omit<FormFieldCommonProps, 'errorText'>;

package/dist/components/ItemPickerList/ItemPickerList.js

@@ -174,7 +174,7 @@ export var ItemPickerList = function ItemPickerList(_ref) {
           component: /*#__PURE__*/React.createElement(ArrowLeftM, null)
         })]
       },
-      label: currentPath ? currentPath.slice(1).join(' - ') : currentSection.text,
+      label: currentPath ? currentPath.join(' - ') : currentSection.text,
       onClick: goBack
     }), (mergedItemsList == null ? void 0 : mergedItemsList.length) === 0 ? /*#__PURE__*/React.createElement(EmptyListMessage, {
       buttonOnClick: function buttonOnClick() {

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 { BaseSectionType, BaseSectionTypeWithFolders, ItemLoaderConfig, ActionType, ContainerHeightType, BaseItemType } from '../ItemPickerNew/ItemPickerNew.types';
+import type { BaseSectionType, BaseSectionTypeWithFolders, ItemLoaderConfig, ActionType, ContainerHeightType, BaseItemType, ItemsConfig } from '../ItemPickerNew/ItemPickerNew.types';
 type TextsAsReactNode = '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;
@@ -23,7 +23,7 @@ export type ItemPickerListProps<ItemType extends BaseItemType, SectionType exten
     scrollbarProps?: ScrollbarAdditionalProps;
     searchBarProps?: Omit<SearchBarProps, 'value' | 'onSearchChange' | 'placeholder'>;
     onRefresh?: () => void;
-    items: ItemType[] | ItemLoaderConfig<ItemType>;
+    items: ItemType[] | ItemsConfig<ItemType> | ItemLoaderConfig<ItemType>;
     isLoading?: boolean;
     isVisible?: boolean;
     sections?: SectionType extends BaseSectionType ? BaseSectionTypeWithFolders<SectionType>[] : undefined;

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

@@ -5,7 +5,22 @@ type NestedFoldersProps<SectionType extends BaseSectionType | undefined> = {
     sections?: SectionType extends BaseSectionType ? BaseSectionTypeWithFolders<SectionType>[] : undefined;
 };
 export declare const useFlattenFolders: <SectionType extends BaseSectionType | undefined>({ currentSection, sections, }: NestedFoldersProps<SectionType>) => {
-    allFolders: ({
+    allFolders: {
+        titles: ReactNode[] | undefined;
+        type?: import("@synerise/ds-list-item").ItemType | undefined;
+        id: string;
+        selected?: boolean | undefined;
+        highlight?: string | undefined;
+        hoverTooltipProps?: (import("rc-trigger").TriggerProps & {
+            ref?: import("react").LegacyRef<import("@synerise/ds-list-item/dist/ListItem.types").TriggerHandle> | undefined;
+        }) | undefined;
+        prefixel?: ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+        renderHoverTooltip?: (() => JSX.Element) | undefined;
+        timeToHideTooltip?: number | undefined;
+        text: string;
+        folders?: BaseSectionTypeWithFolders<BaseSectionType>[] | undefined;
+    }[] | undefined;
+    childFolders: ({
         type?: import("@synerise/ds-list-item").ItemType | undefined;
         id?: string | undefined;
         selected?: boolean | undefined;
@@ -24,7 +39,8 @@ export declare const useFlattenFolders: <SectionType extends BaseSectionType | u
     } & {
         titles?: ReactNode[] | undefined;
     })[] | undefined;
-    childFolders: ({
+    parentFolder: BaseSectionTypeWithFolders<BaseSectionType> | undefined;
+    currentFolders: ({
         type?: import("@synerise/ds-list-item").ItemType | undefined;
         id?: string | undefined;
         selected?: boolean | undefined;
@@ -43,7 +59,7 @@ export declare const useFlattenFolders: <SectionType extends BaseSectionType | u
     } & {
         titles?: ReactNode[] | undefined;
     })[] | undefined;
-    parentFolder: BaseSectionTypeWithFolders<BaseSectionType> | undefined;
+    currentSectionHasFolders: boolean;
     currentPath: ReactNode[] | undefined;
 };
 export {};

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

@@ -28,11 +28,6 @@ export var useFlattenFolders = function useFlattenFolders(_ref) {
   var _allItemFolders$find;
   var currentSection = _ref.currentSection,
     sections = _ref.sections;
-  var allItemFolders = useMemo(function () {
-    return sections == null ? void 0 : sections.flatMap(function (section) {
-      return _getFolders(section);
-    });
-  }, [sections]);
   var folderParentMap = useMemo(function () {
     return sections == null ? void 0 : sections.flatMap(function (section) {
       return section.folders ? section.folders.flatMap(function (f) {
@@ -40,10 +35,22 @@ export var useFlattenFolders = function useFlattenFolders(_ref) {
       }) : [];
     });
   }, [sections]);
+  var titlePathIndex = folderParentMap != null && folderParentMap.length ? 1 : 0;
+  var allItemFolders = useMemo(function () {
+    var mappedFolders = sections == null ? void 0 : sections.flatMap(function (section) {
+      return _getFolders(section);
+    });
+    return mappedFolders == null ? void 0 : mappedFolders.map(function (folder) {
+      var _folder$titles;
+      return _extends({}, folder, {
+        titles: (_folder$titles = folder.titles) == null ? void 0 : _folder$titles.slice(titlePathIndex)
+      });
+    });
+  }, [sections, titlePathIndex]);
   var childFolders = useMemo(function () {
     var _currentSection$folde;
     return currentSection == null || (_currentSection$folde = currentSection.folders) == null ? void 0 : _currentSection$folde.flatMap(function (folder) {
-      return _getFolders(folder, [currentSection == null ? void 0 : currentSection.text]);
+      return _getFolders(folder);
     });
   }, [currentSection]);
   var parentFolder = useMemo(function () {
@@ -55,10 +62,15 @@ export var useFlattenFolders = function useFlattenFolders(_ref) {
   var currentTitlePath = allItemFolders == null || (_allItemFolders$find = allItemFolders.find(function (folder) {
     return folder.id === (currentSection == null ? void 0 : currentSection.id);
   })) == null ? void 0 : _allItemFolders$find.titles;
+  var currentFolders = useMemo(function () {
+    return currentSection ? childFolders : allItemFolders;
+  }, [allItemFolders, childFolders, currentSection]);
   return {
     allFolders: allItemFolders,
     childFolders: childFolders,
     parentFolder: parentFolder,
+    currentFolders: currentFolders,
+    currentSectionHasFolders: !!(childFolders != null && childFolders.length),
     currentPath: currentTitlePath
   };
 };

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

@@ -4,7 +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, ITEMS_PER_PAGE, ITEMS_PER_SECTION, ITEMS_PER_SECTION_IN_SEARCH, GET_ITEM_KEY, ITEM_SIZE, SECTION_HEADER_HEIGHT } from '../constants';
-import { isItems, isWithOutSections } from '../utils';
+import { isItems, isItemsConfig, isWithOutSections } from '../utils';
 import { matchesSearchQuery, getSectionActionItems, getActionItems, getRecentItems, getFolderItems, getItems } from './useItemsInSections.utils';
 import { useFlattenFolders } from './useFlattenFolders';
 var getSectionHeight = function getSectionHeight(itemsCount, withTitle) {
@@ -40,13 +40,13 @@ export var useItemsInSections = function useItemsInSections(_ref) {
       currentSection: currentSection,
       sections: sections
     }),
-    childFolders = _useFlattenFolders.childFolders,
+    currentSectionHasFolders = _useFlattenFolders.currentSectionHasFolders,
+    currentFolders = _useFlattenFolders.currentFolders,
     parentFolder = _useFlattenFolders.parentFolder,
-    allFolders = _useFlattenFolders.allFolders,
     currentPath = _useFlattenFolders.currentPath;
   var loadedPage = useRef(FIRST_PAGE);
   var sectionTotals = useRef({});
-  var isFixedItemsList = isItems(items);
+  var isFixedItemsList = isItems(items) || isItemsConfig(items);
   var _useState3 = useState(),
     contentHeight = _useState3[0],
     setContentHeight = _useState3[1];
@@ -70,12 +70,13 @@ export var useItemsInSections = function useItemsInSections(_ref) {
     setIsLoadedAll = _useState9[1];
   var _useState10 = useState(function () {
       if (isFixedItemsList) {
+        var fixedItems = isItemsConfig(items) ? items.items : items;
         if (searchQuery) {
-          return items.filter(function (item) {
+          return fixedItems.filter(function (item) {
             return item.text && matchesSearchQuery(item.text, searchQuery);
           });
         }
-        return items;
+        return fixedItems;
       }
       return [];
     }),
@@ -92,45 +93,40 @@ export var useItemsInSections = function useItemsInSections(_ref) {
     }));
   }, [hasSections, sections]);
   var itemsLimitPerSection = useMemo(function () {
-    if (isFixedItemsList) return searchQuery ? ITEMS_PER_SECTION : ITEMS_PER_SECTION_IN_SEARCH;
-    return items.limitPerSection || (searchQuery ? ITEMS_PER_SECTION : ITEMS_PER_SECTION_IN_SEARCH);
+    var _items$limitPerSectio2;
+    var fallbackLimit = searchQuery ? ITEMS_PER_SECTION_IN_SEARCH : ITEMS_PER_SECTION;
+    if (isFixedItemsList) {
+      var _items$limitPerSectio;
+      return isItemsConfig(items) ? (_items$limitPerSectio = items.limitPerSection) != null ? _items$limitPerSectio : fallbackLimit : fallbackLimit;
+    }
+    return (_items$limitPerSectio2 = items.limitPerSection) != null ? _items$limitPerSectio2 : fallbackLimit;
   }, [isFixedItemsList, searchQuery, items]);
-  var currentSectionHasFolders = !!(childFolders != null && childFolders.length);
   var _useMemo = useMemo(function () {
       if (hasSectionsAndFolders) {
         if (hasCurrentSection) {
           if (!currentSectionHasFolders) {
             return {
-              listRenderingMode: RENDER_MODES.LIST_ITEMS,
-              titlePathIndex: 1
+              listRenderingMode: RENDER_MODES.LIST_ITEMS
             };
           }
           return {
-            listRenderingMode: RENDER_MODES.LIST_ITEMS_IN_SECTIONS,
-            titlePathIndex: 1
+            listRenderingMode: RENDER_MODES.LIST_ITEMS_IN_SECTIONS
           };
         }
         return {
-          listRenderingMode: hasSearchQuery ? RENDER_MODES.LIST_ITEMS_IN_SECTIONS : RENDER_MODES.LIST_FOLDERS_IN_SECTIONS,
-          titlePathIndex: 1
+          listRenderingMode: hasSearchQuery ? RENDER_MODES.LIST_ITEMS_IN_SECTIONS : RENDER_MODES.LIST_FOLDERS_IN_SECTIONS
         };
       }
-      if (hasSections && (!hasCurrentSection || hasSearchQuery)) {
+      if (hasSections && !hasCurrentSection) {
         return {
-          listRenderingMode: RENDER_MODES.LIST_ITEMS_IN_SECTIONS,
-          titlePathIndex: 0
+          listRenderingMode: RENDER_MODES.LIST_ITEMS_IN_SECTIONS
         };
       }
       return {
-        listRenderingMode: RENDER_MODES.LIST_ITEMS,
-        titlePathIndex: 0
+        listRenderingMode: RENDER_MODES.LIST_ITEMS
       };
     }, [hasCurrentSection, hasSections, hasSearchQuery, hasSectionsAndFolders, currentSectionHasFolders]),
-    listRenderingMode = _useMemo.listRenderingMode,
-    titlePathIndex = _useMemo.titlePathIndex;
-  var flattenedFolders = useMemo(function () {
-    return currentSection ? childFolders : allFolders;
-  }, [allFolders, childFolders, currentSection]);
+    listRenderingMode = _useMemo.listRenderingMode;
   var globalActionsLength = (actions == null ? void 0 : actions.filter(function (action) {
     return !action.sectionId;
   }).length) || 0;
@@ -260,11 +256,11 @@ export var useItemsInSections = function useItemsInSections(_ref) {
           return _context.abrupt("return");
         case 22:
           fetchedItems = [];
-          requests = listRenderingMode === RENDER_MODES.LIST_FOLDERS_IN_SECTIONS ? [Promise.resolve()] : flattenedFolders == null ? void 0 : flattenedFolders.map(function (folder) {
+          requests = listRenderingMode === RENDER_MODES.LIST_FOLDERS_IN_SECTIONS ? [Promise.resolve()] : currentFolders == null ? void 0 : currentFolders.map(function (folder) {
             return items.loadItems({
               page: FIRST_PAGE,
               searchQuery: searchQuery,
-              limit: (items.limitPerSection || ITEMS_PER_SECTION) + +!!searchQuery,
+              limit: (items.limitPerSection || ITEMS_PER_SECTION) + 1,
               sectionId: folder.id
             }).then(function (_ref3) {
               var sectionItems = _ref3.items,
@@ -313,22 +309,26 @@ export var useItemsInSections = function useItemsInSections(_ref) {
           return _context.stop();
       }
     }, _callee, null, [[5, 16], [24, 41]]);
-  })), [currentSection, isFixedItemsList, flattenedFolders, listRenderingMode, isLoading, items, listActions, searchQuery]);
+  })), [currentSection, isFixedItemsList, currentFolders, listRenderingMode, isLoading, items, listActions, searchQuery]);
   useEffect(function () {
     if (listActions) {
       return;
     }
     if (isFixedItemsList) {
+      var allItems = isItemsConfig(items) ? items.items : items;
+      var itemsInSection = currentSection && !currentSectionHasFolders ? allItems.filter(function (item) {
+        return item.sectionId === currentSection.id;
+      }) : allItems;
       if (searchQuery) {
-        var matchingItems = items.filter(function (item) {
+        var matchingItems = itemsInSection.filter(function (item) {
           return item.text && matchesSearchQuery(item.text, searchQuery);
         });
         setCurrentItems(matchingItems);
         return;
       }
-      setCurrentItems(items);
+      setCurrentItems(itemsInSection);
     }
-  }, [isFixedItemsList, isLoading, isLoadingError, currentItemsLength, items, listActions, searchQuery]);
+  }, [isFixedItemsList, isLoading, currentSection, isLoadingError, currentSectionHasFolders, currentItemsLength, items, listActions, searchQuery]);
   useEffect(function () {
     loadedPage.current = FIRST_PAGE;
     setIsLoadedAll(false);
@@ -418,14 +418,13 @@ export var useItemsInSections = function useItemsInSections(_ref) {
       sections: sections,
       handleSectionChange: handleSectionChange
     }) : [];
-    var listItems = flattenedFolders ? flattenedFolders.flatMap(function (folder) {
-      var _folder$titles;
+    var listItems = currentFolders ? currentFolders.flatMap(function (folder) {
       var itemsInFolder = currentItems.filter(function (item) {
         return item.sectionId === folder.id;
       });
       return getItems({
         items: itemsInFolder,
-        titlePath: (_folder$titles = folder.titles) == null ? void 0 : _folder$titles.slice(titlePathIndex),
+        titlePath: folder.titles,
         texts: texts,
         searchQuery: searchQuery,
         maxItems: itemsLimitPerSection,
@@ -454,9 +453,9 @@ export var useItemsInSections = function useItemsInSections(_ref) {
       default:
         return [].concat(composedList, listItems);
     }
-  }, [listActions, currentSection, actions, texts, searchQuery, recents, currentItems, showItemsSectionLabel, sections, flattenedFolders, itemsLimitPerSection, listRenderingMode, titlePathIndex, isSelected, handleItemSelect, handleSectionChange]);
+  }, [listActions, currentSection, actions, texts, searchQuery, recents, currentItems, showItemsSectionLabel, sections, currentFolders, itemsLimitPerSection, listRenderingMode, isSelected, handleItemSelect, handleSectionChange]);
   return {
-    currentSection: currentSection,
+    currentSection: !listActions ? currentSection : undefined,
     currentPath: currentPath,
     goBack: goBack,
     resetCurrentSection: resetCurrentSection,

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

@@ -98,9 +98,10 @@ export var getItems = function getItems(_ref4) {
     return getListItem(item, isSelected, searchQuery, handleItemSelect, getInformationCardTooltip(item));
   })) : [];
   if (maxItems) {
-    var hasMore = results.splice(maxItems, Infinity, getShowMoreItem(texts.showMoreResultsLabel, showMoreOnClick));
-    if (!hasMore.length) {
-      results.pop();
+    var maxItemsWithTitle = maxItems + (sectionTitle.length ? 1 : 0);
+    var hasMore = results.splice(maxItemsWithTitle, Infinity);
+    if (hasMore.length) {
+      results.push(getShowMoreItem(texts.showMoreResultsLabel, showMoreOnClick));
     }
   }
   return results;

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

@@ -41,7 +41,7 @@ export var useListHeight = function useListHeight(_ref) {
     outerWrapperHeight = '100%';
     listWrapperHeight = measuredHeight - offsetSpace;
   } else if (heightConfig === 'fitContent' && calculatedContentHeight) {
-    listWrapperHeight = Math.min(calculatedContentHeight, outerHeight) + 2 * LIST_INNER_PADDING;
+    listWrapperHeight = calculatedContentHeight + 2 * LIST_INNER_PADDING;
     outerWrapperHeight = listWrapperHeight + offsetSpace + "px";
   } else {
     listWrapperHeight = outerHeight - offsetSpace;

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

@@ -1,6 +1,7 @@
 import { ListItemProps } from '@synerise/ds-list-item';
 import { TitleListItemProps } from '../ItemPickerList.types';
-import { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, ItemLoaderConfig } from '../../ItemPickerNew/ItemPickerNew.types';
+import { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders, ItemLoaderConfig, ItemsConfig } from '../../ItemPickerNew/ItemPickerNew.types';
 export declare const isTitle: (item: TitleListItemProps | ListItemProps) => item is TitleListItemProps;
-export declare const isItems: <ItemType extends BaseItemType>(items: ItemLoaderConfig<ItemType> | ItemType[]) => items is ItemType[];
+export declare const isItems: <ItemType extends BaseItemType>(items: ItemsConfig<ItemType> | ItemLoaderConfig<ItemType> | ItemType[]) => items is ItemType[];
+export declare const isItemsConfig: <ItemType extends BaseItemType>(items: ItemsConfig<ItemType> | ItemLoaderConfig<ItemType> | ItemType[]) => items is ItemsConfig<ItemType>;
 export declare const isWithOutSections: <SectionType extends BaseSectionTypeWithFolders<BaseSectionType> | undefined>(sections?: SectionType[] | undefined) => sections is undefined;

package/dist/components/ItemPickerList/utils/typeguards.utils.js

@@ -7,6 +7,12 @@ export var isItems = function isItems(items) {
   }
   return false;
 };
+export var isItemsConfig = function isItemsConfig(items) {
+  if ('items' in items && Array.isArray(items.items)) {
+    return true;
+  }
+  return false;
+};
 export var isWithOutSections = function isWithOutSections(sections) {
   return sections === undefined;
 };

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { BaseItemType, BaseSectionType, ItemPickerProps } from './ItemPickerNew.types';
-export declare const ItemPickerNew: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, errorMessage, disabled, tooltip, ...rest }: ItemPickerProps<ItemType, SectionType>) => React.JSX.Element;
+export declare const ItemPickerNew: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, errorMessage, errorText, disabled, tooltip, tooltipConfig, ...rest }: ItemPickerProps<ItemType, SectionType>) => React.JSX.Element;

package/dist/components/ItemPickerNew/ItemPickerNew.js

@@ -1,11 +1,10 @@
-var _excluded = ["onFocus", "onBlur", "selectedItem", "onChange", "dropdownProps", "texts", "triggerProps", "renderTrigger", "placeholder", "placeholderIcon", "label", "description", "error", "errorMessage", "disabled", "tooltip"];
+var _excluded = ["onFocus", "onBlur", "selectedItem", "onChange", "dropdownProps", "texts", "triggerProps", "renderTrigger", "placeholder", "placeholderIcon", "label", "description", "error", "errorMessage", "errorText", "disabled", "tooltip", "tooltipConfig"];
 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 React, { useEffect, useMemo, useRef, useState } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
-import { Label } from '@synerise/ds-input';
-import { Description } from '@synerise/ds-typography';
 import { useOnClickOutside } from '@synerise/ds-utils';
+import FormField from '@synerise/ds-form-field';
 import Trigger from '../ItemPickerTrigger/Trigger';
 import { useDefaultTexts } from '../../hooks/useDefaultTexts';
 import * as S from '../../ItemPicker.styles';
@@ -25,8 +24,10 @@ export var ItemPickerNew = function ItemPickerNew(_ref) {
     description = _ref.description,
     error = _ref.error,
     errorMessage = _ref.errorMessage,
+    errorText = _ref.errorText,
     disabled = _ref.disabled,
     tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var overlayRef = useRef(null);
   useOnClickOutside(overlayRef, function () {
@@ -83,10 +84,13 @@ export var ItemPickerNew = function ItemPickerNew(_ref) {
   return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
     className: "ds-items-picker",
     disabled: disabled
-  }, label && /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(FormField, {
     label: label,
-    tooltip: tooltip
-  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    tooltip: tooltip,
+    tooltipConfig: tooltipConfig,
+    errorText: errorText || errorMessage,
+    description: description
+  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     overlayStyle: {
       width: '400px'
     }
@@ -101,5 +105,5 @@ export var ItemPickerNew = function ItemPickerNew(_ref) {
       onItemSelect: handleItemSelect,
       containerRef: overlayRef
     }))
-  }), trigger), error && errorMessage && /*#__PURE__*/React.createElement(S.Error, null, errorMessage), description && /*#__PURE__*/React.createElement(Description, null, description));
+  }), trigger)));
 };

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

@@ -3,6 +3,7 @@ import type { ListItemProps } from '@synerise/ds-list-item';
 import type { InformationCardProps } from '@synerise/ds-information-card';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
 import type { DropdownProps } from '@synerise/ds-dropdown';
+import type { FormFieldCommonProps } from '@synerise/ds-form-field';
 import type { ItemPickerListProps, ItemPickerListTexts } from '../ItemPickerList/ItemPickerList.types';
 import type { ItemPickerTriggerProps, ItemPickerTriggerTexts } from '../ItemPickerTrigger/Trigger.types';
 type HeightConfig = {
@@ -39,6 +40,10 @@ export type ItemLoaderConfig<ItemType extends BaseItemType> = {
     limitPerSection?: number;
     loadItems: (props: LoaderProps) => Promise<ItemLoaderResponse<ItemType>>;
 };
+export type ItemsConfig<ItemType extends BaseItemType> = {
+    limitPerSection?: number;
+    items: ItemType[];
+};
 type RedirectActionType = {
     actionType: 'redirect';
 };
@@ -63,15 +68,15 @@ export type ItemPickerProps<ItemType extends BaseItemType, SectionType extends B
         withChangeButton?: ItemPickerTriggerProps['withChangeButton'];
         withClearConfirmation?: ItemPickerTriggerProps['withClearConfirmation'];
     };
-    label?: ReactNode;
-    description?: ReactNode;
-    errorMessage?: ReactNode;
+    /**
+     * @deprecated - use errorText prop instead
+     */
+    errorMessage?: FormFieldCommonProps['errorText'];
     error?: boolean;
     disabled?: boolean;
-    tooltip?: ReactNode;
     onChange?: (item: ItemType) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     dropdownProps?: Partial<DropdownProps>;
-} & Pick<ItemPickerListProps<ItemType, SectionType>, 'items' | 'actions' | 'recents' | 'sections' | 'isLoading' | 'onRefresh' | 'onSectionChange' | 'containerHeight' | 'showItemsSectionLabel' | 'noResultsIcon' | 'emptyListIcon' | 'selectedItem' | 'getItemHeight' | 'scrollbarProps' | 'searchBarProps' | 'includeFooter' | 'includeSearchBar'>> & Partial<Pick<ItemPickerTriggerProps, 'placeholder' | 'placeholderIcon' | 'onClear'>>;
+} & 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 {};

package/dist/hooks/useDefaultTexts.js

@@ -14,7 +14,7 @@ export var useDefaultTexts = function useDefaultTexts(texts) {
           }, "/")
         },
         id: "DS.ITEM-PICKER-DROPDOWN.SEARCH-PLACEHOLDER",
-        defaultMessage: "Search for object or type {shortCutKey} to show actions "
+        defaultMessage: "Search for object or type {shortCutKey} to show actions"
       }),
       yes: intl.formatMessage({
         id: 'DS.ITEM-PICKER.YES-TEXT',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,26 +34,25 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.0.4",
-    "@synerise/ds-avatar": "^1.0.4",
-    "@synerise/ds-button": "^1.1.3",
-    "@synerise/ds-dropdown": "^1.0.4",
-    "@synerise/ds-empty-states": "^1.0.4",
+    "@synerise/ds-alert": "^1.0.6",
+    "@synerise/ds-avatar": "^1.0.6",
+    "@synerise/ds-button": "^1.1.5",
+    "@synerise/ds-dropdown": "^1.0.6",
+    "@synerise/ds-empty-states": "^1.0.6",
     "@synerise/ds-flag": "^1.0.0",
-    "@synerise/ds-icon": "^1.3.0",
-    "@synerise/ds-information-card": "^1.0.6",
-    "@synerise/ds-input": "^1.0.4",
-    "@synerise/ds-list-item": "^1.0.4",
+    "@synerise/ds-form-field": "^1.1.1",
+    "@synerise/ds-icon": "^1.4.1",
+    "@synerise/ds-information-card": "^1.0.8",
+    "@synerise/ds-list-item": "^1.0.6",
     "@synerise/ds-loader": "^1.0.1",
-    "@synerise/ds-popconfirm": "^1.0.4",
-    "@synerise/ds-result": "^1.0.4",
-    "@synerise/ds-scrollbar": "^1.0.4",
-    "@synerise/ds-search": "^1.1.1",
-    "@synerise/ds-search-bar": "^1.0.4",
-    "@synerise/ds-short-cuts": "^1.0.4",
-    "@synerise/ds-skeleton": "^1.0.4",
-    "@synerise/ds-tooltip": "^1.1.3",
-    "@synerise/ds-typography": "^1.0.4",
+    "@synerise/ds-popconfirm": "^1.0.6",
+    "@synerise/ds-result": "^1.0.6",
+    "@synerise/ds-scrollbar": "^1.0.6",
+    "@synerise/ds-search": "^1.1.3",
+    "@synerise/ds-search-bar": "^1.1.1",
+    "@synerise/ds-short-cuts": "^1.0.6",
+    "@synerise/ds-skeleton": "^1.0.6",
+    "@synerise/ds-tooltip": "^1.1.5",
     "@synerise/ds-utils": "^1.0.1",
     "lodash": "^4.17.21",
     "react-window": "^1.8.5",
@@ -65,5 +64,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "7586f8946fc312eae130021f8ae4ad4b9455e8d4"
+  "gitHead": "fc601270d3c84a5a52b62473a01f1b3c1c7014a7"
 }