@synerise/ds-item-picker 1.9.19 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.10.0...@synerise/ds-item-picker@1.11.0) (2025-10-31)
+
+
+### Features
+
+* **item-picker:** extend folder item options ([a99df65](https://github.com/Synerise/synerise-design/commit/a99df65c0856521a0bb510a4f94817e20298b2b0))
+
+
+
+
+
+# [1.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.9.19...@synerise/ds-item-picker@1.10.0) (2025-10-29)
+
+
+### Features
+
+* **item-picker:** add useImperativeHandle to enable some api ([0cef717](https://github.com/Synerise/synerise-design/commit/0cef71778c75b412eca946efc825058778d22cc8))
+
+
+
+
+
 ## [1.9.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.9.18...@synerise/ds-item-picker@1.9.19) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/ItemPicker.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { type ItemPickerProps } from './components/ItemPickerLegacy/ItemPickerLegacy.types';
+import { type ItemPickerListRef } from './components/ItemPickerList/ItemPickerList.types';
 import type { ItemPickerProps as ItemPickerPropsNew } from './components/ItemPickerNew/ItemPickerNew.types';
 import type { BaseItemType, BaseSectionType } from './components/ItemPickerNew/types/baseItemSectionType.types';
-declare const ItemPicker: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>(props: ItemPickerProps | ItemPickerPropsNew<ItemType, SectionType>) => React.JSX.Element;
+declare const ItemPickerInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>(props: ItemPickerProps | ItemPickerPropsNew<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
+type ItemPickerType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerProps | (ItemPickerPropsNew<ItemType, SectionType> & {
+    ref?: ItemPickerListRef;
+})) => ReturnType<typeof ItemPickerInner>;
+declare const ItemPicker: ItemPickerType;
 export default ItemPicker;

package/dist/ItemPicker.js

@@ -1,18 +1,21 @@
 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 from 'react';
+import React, { forwardRef } from 'react';
 import ItemPickerLegacy from './components/ItemPickerLegacy/ItemPickerLegacy';
 import { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
 var isNewItemPicker = function isNewItemPicker(props) {
   return 'isNewVersion' in props && props.isNewVersion;
 };
-var ItemPicker = function ItemPicker(props) {
+var ItemPickerInner = function ItemPickerInner(props, forwardedRef) {
   if (isNewItemPicker(props)) {
     return /*#__PURE__*/React.createElement(ItemPickerNew, _extends({
       key: "ds-item-picker"
-    }, props));
+    }, props, {
+      ref: forwardedRef
+    }));
   }
   return /*#__PURE__*/React.createElement(ItemPickerLegacy, _extends({
     key: "ds-item-picker-legacy"
   }, props));
 };
+var ItemPicker = /*#__PURE__*/forwardRef(ItemPickerInner);
 export default ItemPicker;

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { type ItemPickerListProps } from '../ItemPickerNew/ItemPickerNew.types';
 import type { BaseItemType, BaseSectionType } from '../ItemPickerNew/types/baseItemSectionType.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, onLoadedData, isDropdown, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>) => React.JSX.Element;
-export default ItemPickerList;
+import { type ItemPickerListRef } from './ItemPickerList.types';
+declare const ItemPickerListInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, recents, sections, actions, texts, isLoading, selectedItem, scrollbarProps, searchBarProps, showItemsSectionLabel, onItemSelect, onRefresh, containerHeight, isVisible, onSectionChange, containerRef: containerRefProp, includeFooter, includeSearchBar, onLoadedData, isDropdown, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
+type ItemPickerListType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerListProps<ItemType, SectionType> & {
+    ref?: ItemPickerListRef;
+}) => ReturnType<typeof ItemPickerListInner>;
+export declare const ItemPickerList: ItemPickerListType;
+export {};

package/dist/components/ItemPickerList/ItemPickerList.js

@@ -2,7 +2,7 @@ var _excluded = ["items", "recents", "sections", "actions", "texts", "isLoading"
 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';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useTheme } from '@synerise/ds-core';
 import Dropdown from '@synerise/ds-dropdown';
@@ -17,7 +17,7 @@ import { ListSearchInput } from './components/ListSearchInput';
 import { ITEM_SIZE, LIST_INNER_PADDING, LIST_STYLE, SECTION_HEADER_HEIGHT } from './constants';
 import { useItemsInSections, useListHeight } from './hooks';
 import { findSectionById, isNavKey, isTitle } from './utils';
-export var ItemPickerList = function ItemPickerList(_ref) {
+var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
   var items = _ref.items,
     recents = _ref.recents,
     sections = _ref.sections,
@@ -34,7 +34,7 @@ export var ItemPickerList = function ItemPickerList(_ref) {
     containerHeight = _ref.containerHeight,
     isVisible = _ref.isVisible,
     onSectionChange = _ref.onSectionChange,
-    forwardedRef = _ref.containerRef,
+    containerRefProp = _ref.containerRef,
     _ref$includeFooter = _ref.includeFooter,
     includeFooter = _ref$includeFooter === void 0 ? true : _ref$includeFooter,
     _ref$includeSearchBar = _ref.includeSearchBar,
@@ -50,8 +50,8 @@ export var ItemPickerList = function ItemPickerList(_ref) {
   var scrollBarRef = useRef(null);
   var containerRef = useRef(null);
   var refs = [containerRef];
-  if (forwardedRef) {
-    refs.push(forwardedRef);
+  if (containerRefProp) {
+    refs.push(containerRefProp);
   }
   var combinedScrollRef = useCombinedRefs.apply(void 0, refs);
   var inputRef = useRef(null);
@@ -106,7 +106,16 @@ export var ItemPickerList = function ItemPickerList(_ref) {
     listActions = _useItemsInSections.listActions,
     searchInAction = _useItemsInSections.searchInAction,
     searchInItem = _useItemsInSections.searchInItem,
-    canPerformListActions = _useItemsInSections.canPerformListActions;
+    canPerformListActions = _useItemsInSections.canPerformListActions,
+    reloadActiveSection = _useItemsInSections.reloadActiveSection,
+    activeSectionId = _useItemsInSections.activeSectionId;
+  useImperativeHandle(forwardedRef, function () {
+    return {
+      currentSection: currentSection,
+      activeSectionId: activeSectionId,
+      reloadActiveSection: reloadActiveSection
+    };
+  }, [activeSectionId, currentSection, reloadActiveSection]);
   var handleScroll = useCallback(function (_ref2) {
     var currentTarget = _ref2.currentTarget;
     var scrollTop = currentTarget.scrollTop,
@@ -334,4 +343,4 @@ export var ItemPickerList = function ItemPickerList(_ref) {
     }
   }));
 };
-export default ItemPickerList;
+export var ItemPickerList = /*#__PURE__*/forwardRef(ItemPickerListInner);

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

@@ -1,6 +1,13 @@
+import { type Ref } from 'react';
 import { type ListItemProps } from '@synerise/ds-list-item';
 import type { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders } from '../ItemPickerNew/types/baseItemSectionType.types';
 export type ItemSelectHandler<ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined> = SectionType extends BaseSectionType ? (item: ItemType, section?: BaseSectionTypeWithFolders<BaseSectionType>) => void : (item: ItemType) => void;
 export type TitleListItemProps = Omit<ListItemProps, 'type'> & {
     type: 'title';
 };
+export type ItemPickerListAPI = {
+    reloadActiveSection: () => void;
+    currentSection: BaseSectionType | BaseSectionTypeWithFolders<BaseSectionType> | undefined;
+    activeSectionId: string | undefined;
+};
+export type ItemPickerListRef = Ref<ItemPickerListAPI | null>;

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

@@ -15,7 +15,10 @@ export declare const useFlattenFolders: <SectionType extends BaseSectionType | u
             ref?: import("react").LegacyRef<import("@synerise/ds-list-item/dist/ListItem.types").TriggerHandle>;
         }) | undefined;
         prefixel?: ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+        prefixVisibilityTrigger?: "hover" | "default" | undefined;
         renderHoverTooltip?: (() => JSX.Element) | undefined;
+        suffixel?: ReactNode | import("@synerise/ds-list-item/dist/ListItem.types").AddonRenderer;
+        suffixVisibilityTrigger?: "hover" | "default" | undefined;
         timeToHideTooltip?: number | undefined;
         text: string;
         folders?: BaseSectionTypeWithFolders<BaseSectionType>[] | undefined;

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

@@ -39,5 +39,7 @@ export declare const useItemsInSections: <ItemType extends BaseItemType, Section
     searchInItem: ItemType | undefined;
     searchInAction: SearchInAction | undefined;
     canPerformListActions: boolean;
+    reloadActiveSection: () => void;
+    activeSectionId: string | undefined;
 };
 export {};

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

@@ -102,7 +102,7 @@ export var useItemsInSections = function useItemsInSections(_ref) {
     currentItems = _useState15[0],
     setCurrentItems = _useState15[1];
   var isSearchInActionActive = !!searchInAction && !searchInItem;
-  var canPerformListActions = !searchByAction && !searchByParamConfig && !isSearchInActionActive;
+  var canPerformListActions = actions !== undefined && !searchByAction && !searchByParamConfig && !isSearchInActionActive;
   var listActions = searchQuery === '/' && canPerformListActions;
   var hasSearchQuery = !!searchQuery;
   var _resolveSectionId = resolveSectionId({
@@ -593,6 +593,19 @@ export var useItemsInSections = function useItemsInSections(_ref) {
         return [].concat(composedList, listItems);
     }
   }, [listActions, activeSectionId, actions, texts, searchQuery, recents, currentItems, showItemsSectionLabel, sections, currentFolders, itemsLimitPerSection, listRenderingMode, isSelected, handleItemSelect, handleSectionChange, setSearchByParamConfig, searchByAction, searchByParamConfig, changeSearchQuery, handleItemSelectExtended, isSearchInActionActive, searchInItem, isListItemsRenderingMode]);
+  var reloadActiveSection = useCallback(function () {
+    var _abortControllerRef$c2;
+    pageToLoad.current = FIRST_PAGE;
+    metaRef.current = {};
+    setIsLoadedAll(false);
+    setIsLoadingMore(false);
+    sectionTotals.current = {};
+    (_abortControllerRef$c2 = abortControllerRef.current) == null || _abortControllerRef$c2.abort();
+    abortControllerRef.current = new AbortController();
+    if (!listActions) {
+      loadItems();
+    }
+  }, [listActions, loadItems]);
   return {
     currentSection: !listActions ? currentSection : undefined,
     currentPath: currentPath,
@@ -615,6 +628,8 @@ export var useItemsInSections = function useItemsInSections(_ref) {
     listActions: listActions,
     searchInItem: searchInItem,
     searchInAction: searchInAction,
-    canPerformListActions: canPerformListActions
+    canPerformListActions: canPerformListActions,
+    reloadActiveSection: reloadActiveSection,
+    activeSectionId: activeSectionId
   };
 };

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

@@ -4,10 +4,11 @@ import Icon, { ArrowRightCircleM, FolderM } from '@synerise/ds-icon';
 import InformationCard from '@synerise/ds-information-card';
 import { createTitleFromTitlePath } from '../utils';
 export var getFolderItem = function getFolderItem(item, onClick) {
-  return _extends({}, item, {
+  return _extends({
     prefixel: /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(FolderM, null)
-    }),
+    })
+  }, item, {
     onClick: onClick
   });
 };

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

@@ -1,4 +1,10 @@
 import React from 'react';
+import { type ItemPickerListRef } from '../ItemPickerList/ItemPickerList.types';
 import type { ItemPickerProps } from './ItemPickerNew.types';
 import type { BaseItemType, BaseSectionType } from './types/baseItemSectionType.types';
-export declare const ItemPickerNew: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, onClear, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, errorMessage, errorText, disabled, tooltip, tooltipConfig, ...rest }: ItemPickerProps<ItemType, SectionType>) => React.JSX.Element;
+declare const ItemPickerNewInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, onClear, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, errorMessage, errorText, disabled, tooltip, tooltipConfig, ...rest }: ItemPickerProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
+type ItemPickerNewType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerProps<ItemType, SectionType> & {
+    ref?: ItemPickerListRef;
+}) => ReturnType<typeof ItemPickerNewInner>;
+export declare const ItemPickerNew: ItemPickerNewType;
+export {};

package/dist/components/ItemPickerNew/ItemPickerNew.js

@@ -1,14 +1,14 @@
 var _excluded = ["onFocus", "onBlur", "onClear", "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, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import FormField from '@synerise/ds-form-field';
 import * as S from '../../ItemPicker.styles';
 import { useDefaultTexts } from '../../hooks/useDefaultTexts';
 import { ItemPickerList } from '../ItemPickerList/ItemPickerList';
 import Trigger from '../ItemPickerTrigger/Trigger';
-export var ItemPickerNew = function ItemPickerNew(_ref) {
+var ItemPickerNewInner = function ItemPickerNewInner(_ref, forwardedRef) {
   var onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onClear = _ref.onClear,
@@ -102,7 +102,9 @@ export var ItemPickerNew = function ItemPickerNew(_ref) {
       texts: allTexts,
       isVisible: visible,
       selectedItem: selected,
-      onItemSelect: handleItemSelect
+      onItemSelect: handleItemSelect,
+      ref: forwardedRef
     }))
   }), trigger)));
-};
+};
+export var ItemPickerNew = /*#__PURE__*/forwardRef(ItemPickerNewInner);

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

@@ -1,6 +1,6 @@
 import type { InformationCardProps } from '@synerise/ds-information-card';
 import type { ListItemProps } from '@synerise/ds-list-item';
-export type InheritedFromListItem = Pick<ListItemProps, 'id' | 'type' | 'selected' | 'prefixel' | 'highlight' | 'renderHoverTooltip' | 'hoverTooltipProps' | 'timeToHideTooltip'>;
+export type InheritedFromListItem = Pick<ListItemProps, 'id' | 'type' | 'selected' | 'prefixel' | 'prefixVisibilityTrigger' | 'suffixel' | 'suffixVisibilityTrigger' | 'highlight' | 'renderHoverTooltip' | 'hoverTooltipProps' | 'timeToHideTooltip'>;
 export type BaseSectionType = InheritedFromListItem & {
     text: string;
     id: string | number;

package/dist/index.d.ts

@@ -4,7 +4,8 @@ export { default as ItemPickerLegacy } from './components/ItemPickerLegacy/ItemP
 export { default as ItemPickerTrigger } from './components/ItemPickerTrigger/Trigger';
 export { ItemPickerList } from './components/ItemPickerList/ItemPickerList';
 export { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
-export type { ItemSelectHandler } from './components/ItemPickerList/ItemPickerList.types';
+export type { ItemSelectHandler, ItemPickerListAPI, } from './components/ItemPickerList/ItemPickerList.types';
 export type { ItemPickerProps as ItemPickerPropsNew, ItemLoaderConfig, ItemLoaderResponse, LoaderProps, OnLoadedData, ItemPickerListProps, ItemPickerListTexts, } from './components/ItemPickerNew/ItemPickerNew.types';
 export type { BaseSectionTypeWithFolders, BaseItemType, } from './components/ItemPickerNew/types/baseItemSectionType.types';
 export type { Action } from './components/ItemPickerNew/types/actions.types';
+export { findSectionById } from './components/ItemPickerList/utils/findSectionById';

package/dist/index.js

@@ -2,4 +2,5 @@ export { default } from './ItemPicker';
 export { default as ItemPickerLegacy } from './components/ItemPickerLegacy/ItemPickerLegacy';
 export { default as ItemPickerTrigger } from './components/ItemPickerTrigger/Trigger';
 export { ItemPickerList } from './components/ItemPickerList/ItemPickerList';
-export { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
+export { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
+export { findSectionById } from './components/ItemPickerList/utils/findSectionById';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "1.9.19",
+  "version": "1.11.0",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,19 +38,19 @@
     "@synerise/ds-alert": "^1.1.24",
     "@synerise/ds-avatar": "^1.0.26",
     "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-dropdown": "^1.0.33",
+    "@synerise/ds-dropdown": "^1.0.34",
     "@synerise/ds-empty-states": "^1.0.20",
     "@synerise/ds-flag": "^1.0.5",
     "@synerise/ds-form-field": "^1.1.18",
     "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-information-card": "^1.2.2",
+    "@synerise/ds-information-card": "^1.2.3",
     "@synerise/ds-list-item": "^1.1.0",
     "@synerise/ds-loader": "^1.0.10",
     "@synerise/ds-popconfirm": "^1.0.28",
     "@synerise/ds-result": "^1.0.29",
     "@synerise/ds-scrollbar": "^1.1.9",
     "@synerise/ds-search": "^1.3.9",
-    "@synerise/ds-search-bar": "^1.3.18",
+    "@synerise/ds-search-bar": "^1.3.19",
     "@synerise/ds-short-cuts": "^1.0.22",
     "@synerise/ds-skeleton": "^1.0.24",
     "@synerise/ds-tooltip": "^1.2.1",
@@ -65,5 +65,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "73989f3707121812fcd54f3e89e80f6228298689"
 }