@synerise/ds-item-picker 1.16.2 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +2 -3
  3. package/dist/components/ItemPickerList/ItemPickerList.d.ts +1 -1
  4. package/dist/components/ItemPickerList/ItemPickerList.js +11 -2
  5. package/dist/components/ItemPickerList/components/EmptyListMessage.d.ts +8 -3
  6. package/dist/components/ItemPickerList/components/EmptyListMessage.js +20 -3
  7. package/dist/components/ItemPickerNew/ItemPickerNew.js +4 -1
  8. package/dist/components/ItemPickerNew/ItemPickerNew.types.d.ts +6 -4
  9. package/dist/components/ItemPickerNew/types/itemPickerListTexts.types.d.ts +1 -1
  10. package/dist/hooks/useDefaultTexts.js +4 -0
  11. package/package.json +23 -23
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.16.2...@synerise/ds-item-picker@1.17.0) (2026-03-20)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **item-picker:** close dropdown when selectedItem is set via prop ([5c491ce](https://github.com/Synerise/synerise-design/commit/5c491ce56e8d0e75c37b745d3a6987ffa1903044))
11
+
12
+ ### Features
13
+
14
+ - **item-picker:** empty state default and custom ([a3b9af1](https://github.com/Synerise/synerise-design/commit/a3b9af1c0fc1e4a626da266199c456ef0aad67b1))
15
+
6
16
  ## [1.16.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.16.1...@synerise/ds-item-picker@1.16.2) (2026-03-10)
7
17
 
8
18
  ### Bug Fixes
package/README.md CHANGED
@@ -35,7 +35,6 @@ import ItemPicker from '@synerise/ds-item-picker'
35
35
  errorMessage={''}
36
36
  size={'small'}
37
37
  changeButtonLabel={'Change'}
38
- onChangeButtonClick={() => {}}
39
38
  />
40
39
 
41
40
  ```
@@ -55,7 +54,7 @@ import ItemPicker from '@synerise/ds-item-picker'
55
54
  | dropdownBottomAction? | Dropdown bottom action | React.ReactNode | - |
56
55
  | closeOnBottomAction? | Close dropdown when bottom action has been clicked | boolean | false |
57
56
  | placeholder | Placeholder text | string, React.ReactNode | - |
58
- | clear | Clear button tooltip | string, React.ReactNode | 'Remove' |
57
+ | clear | Clear button tooltip | string, React.ReactNode | 'Clear' |
59
58
  | searchPlaceholder | Placeholder of SearchBar in dropdown | string | 'Search' |
60
59
  | onClear | Callback executed when clear icon is clicked | () => void | - |
61
60
  | onChange | Callback executed when item from dropdown is clicked | (item: [MenuItemProps](https://design.synerise.com/docs/components/menu#menuitemprops)) => void | - |
@@ -72,7 +71,7 @@ import ItemPicker from '@synerise/ds-item-picker'
72
71
  | disabled? | Whether the component is disabled | boolean | - |
73
72
  | changeButtonLabel? | Label of change button, available only when size='large' | string, React.ReactNode | 'Change' |
74
73
  | withClearConfirmation | Shows Popconfirm on the clear icon click | boolean | - |
75
- | clearConfirmTitle | Title of Popconfirm | string | 'Are you sure to remove this selection?' |
74
+ | clearConfirmTitle | Title of Popconfirm | string | 'Please confirm' |
76
75
  | yesText | Label of confirm button | string | 'Yes' |
77
76
  | noText | Label of cancel button | string | 'No' |
78
77
  | noResults | No search results info | string | 'No results' |
package/dist/components/ItemPickerList/ItemPickerList.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { type ItemPickerListProps } from '../ItemPickerNew/ItemPickerNew.types';
3
3
  import type { BaseItemType, BaseSectionType } from '../ItemPickerNew/types/baseItemSectionType.types';
4
4
  import { type ItemPickerListRef } from './ItemPickerList.types';
5
- 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;
5
+ 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, emptyListIcon, noResultsIcon, emptyStateComponent, noResultsComponent, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
6
6
  type ItemPickerListType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerListProps<ItemType, SectionType> & {
7
7
  ref?: ItemPickerListRef;
8
8
  }) => ReturnType<typeof ItemPickerListInner>;
package/dist/components/ItemPickerList/ItemPickerList.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["items", "recents", "sections", "actions", "texts", "isLoading", "selectedItem", "scrollbarProps", "searchBarProps", "showItemsSectionLabel", "onItemSelect", "onRefresh", "containerHeight", "isVisible", "onSectionChange", "containerRef", "includeFooter", "includeSearchBar", "onLoadedData", "isDropdown"];
1
+ var _excluded = ["items", "recents", "sections", "actions", "texts", "isLoading", "selectedItem", "scrollbarProps", "searchBarProps", "showItemsSectionLabel", "onItemSelect", "onRefresh", "containerHeight", "isVisible", "onSectionChange", "containerRef", "includeFooter", "includeSearchBar", "onLoadedData", "isDropdown", "emptyListIcon", "noResultsIcon", "emptyStateComponent", "noResultsComponent"];
2
2
  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); }
3
3
  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; }
4
4
  import debounce from 'lodash.debounce';
@@ -41,6 +41,10 @@ var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
41
41
  includeSearchBar = _ref$includeSearchBar === void 0 ? true : _ref$includeSearchBar,
42
42
  onLoadedData = _ref.onLoadedData,
43
43
  isDropdown = _ref.isDropdown,
44
+ emptyListIcon = _ref.emptyListIcon,
45
+ noResultsIcon = _ref.noResultsIcon,
46
+ emptyStateComponent = _ref.emptyStateComponent,
47
+ noResultsComponent = _ref.noResultsComponent,
44
48
  htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
45
49
  var theme = useTheme();
46
50
  var _useState = useState(''),
@@ -232,7 +236,12 @@ var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
232
236
  hasCurrentSection: isSection,
233
237
  texts: allTexts,
234
238
  isActionSection: isActionSection,
235
- currentSection: currentSection
239
+ currentSection: currentSection,
240
+ searchQuery: searchQuery,
241
+ emptyListIcon: emptyListIcon,
242
+ noResultsIcon: noResultsIcon,
243
+ emptyStateComponent: emptyStateComponent,
244
+ noResultsComponent: noResultsComponent
236
245
  }) : /*#__PURE__*/React.createElement(S.StyledScrollbar, _extends({
237
246
  withSectionHeader: isSection,
238
247
  maxHeight: listHeight,
package/dist/components/ItemPickerList/components/EmptyListMessage.d.ts CHANGED
@@ -1,13 +1,18 @@
1
- import React from 'react';
1
+ import React, { type ReactElement, type ReactNode } from 'react';
2
2
  import { type BaseSectionType } from '../../ItemPickerNew/types/baseItemSectionType.types';
3
3
  import { type ItemPickerListTexts } from '../../ItemPickerNew/types/itemPickerListTexts.types';
4
4
  type EmptyListMessageProps = {
5
- texts: Pick<ItemPickerListTexts, 'noResultsInSection' | 'noResults' | 'noItems' | 'noActions' | 'searchAllFoldersButtonLabel'>;
5
+ texts: Pick<ItemPickerListTexts, 'noResultsInSection' | 'noResults' | 'noItems' | 'noActions' | 'emptyStateLabel' | 'searchAllFoldersButtonLabel'>;
6
6
  hasCurrentSection?: boolean;
7
7
  listActions: boolean;
8
8
  isActionSection: boolean;
9
9
  buttonOnClick: () => void;
10
10
  currentSection: BaseSectionType | undefined;
11
+ searchQuery: string;
12
+ emptyListIcon?: ReactElement;
13
+ noResultsIcon?: ReactElement;
14
+ emptyStateComponent?: ReactNode;
15
+ noResultsComponent?: ReactNode;
11
16
  };
12
- export declare const EmptyListMessage: ({ texts, listActions, isActionSection, hasCurrentSection, buttonOnClick, currentSection, }: EmptyListMessageProps) => React.JSX.Element;
17
+ export declare const EmptyListMessage: ({ texts, listActions, isActionSection, hasCurrentSection, buttonOnClick, currentSection, searchQuery, emptyListIcon, noResultsIcon, emptyStateComponent, noResultsComponent, }: EmptyListMessageProps) => React.JSX.Element;
13
18
  export {};
package/dist/components/ItemPickerList/components/EmptyListMessage.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import Button from '@synerise/ds-button';
3
- import { SearchNoResultsL } from '@synerise/ds-icon';
3
+ import { NoData, SearchNoResultsL } from '@synerise/ds-icon';
4
4
  import * as S from '../ItemPickerList.styles';
5
5
  export var EmptyListMessage = function EmptyListMessage(_ref) {
6
6
  var texts = _ref.texts,
@@ -8,7 +8,12 @@ export var EmptyListMessage = function EmptyListMessage(_ref) {
8
8
  isActionSection = _ref.isActionSection,
9
9
  hasCurrentSection = _ref.hasCurrentSection,
10
10
  buttonOnClick = _ref.buttonOnClick,
11
- currentSection = _ref.currentSection;
11
+ currentSection = _ref.currentSection,
12
+ searchQuery = _ref.searchQuery,
13
+ emptyListIcon = _ref.emptyListIcon,
14
+ noResultsIcon = _ref.noResultsIcon,
15
+ emptyStateComponent = _ref.emptyStateComponent,
16
+ noResultsComponent = _ref.noResultsComponent;
12
17
  if (listActions) {
13
18
  return /*#__PURE__*/React.createElement(S.EmptyStates, {
14
19
  customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
@@ -26,8 +31,20 @@ export var EmptyListMessage = function EmptyListMessage(_ref) {
26
31
  }, (currentSection == null || (_currentSection$texts2 = currentSection.texts) == null ? void 0 : _currentSection$texts2.searchAllFoldersButtonLabel) || texts.searchAllFoldersButtonLabel)
27
32
  });
28
33
  }
34
+ if (!searchQuery) {
35
+ if (emptyStateComponent) {
36
+ return /*#__PURE__*/React.createElement(React.Fragment, null, emptyStateComponent);
37
+ }
38
+ return /*#__PURE__*/React.createElement(S.EmptyStates, {
39
+ customIcon: emptyListIcon || /*#__PURE__*/React.createElement(NoData, null),
40
+ label: texts.emptyStateLabel
41
+ });
42
+ }
43
+ if (noResultsComponent) {
44
+ return /*#__PURE__*/React.createElement(React.Fragment, null, noResultsComponent);
45
+ }
29
46
  return /*#__PURE__*/React.createElement(S.EmptyStates, {
30
- customIcon: /*#__PURE__*/React.createElement(SearchNoResultsL, null),
47
+ customIcon: noResultsIcon || /*#__PURE__*/React.createElement(SearchNoResultsL, null),
31
48
  label: texts.noResults
32
49
  });
33
50
  };
package/dist/components/ItemPickerNew/ItemPickerNew.js CHANGED
@@ -55,7 +55,10 @@ var ItemPickerNewInner = function ItemPickerNewInner(_ref, forwardedRef) {
55
55
  closeDropdown();
56
56
  };
57
57
  useEffect(function () {
58
- return setSelected(selectedItem);
58
+ setSelected(selectedItem);
59
+ if (selectedItem) {
60
+ setVisible(false);
61
+ }
59
62
  }, [selectedItem]);
60
63
  var trigger = useMemo(function () {
61
64
  return renderTrigger ? renderTrigger({
package/dist/components/ItemPickerNew/ItemPickerNew.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type ItemSelectHandler } from 'components/ItemPickerList/ItemPickerList.types';
2
- import type { ReactNode, Ref } from 'react';
2
+ import type { ReactElement, ReactNode, Ref } from 'react';
3
3
  import type { DropdownSharedProps } from '@synerise/ds-dropdown';
4
4
  import type { FormFieldCommonProps } from '@synerise/ds-form-field';
5
5
  import type { InformationCardTooltipProps } from '@synerise/ds-information-card';
@@ -68,15 +68,17 @@ export type ItemPickerProps<ItemType extends BaseItemType, SectionType extends B
68
68
  onBlur?: () => void;
69
69
  onLoadedData?: OnLoadedData;
70
70
  dropdownProps?: Partial<Omit<DropdownSharedProps, 'children' | 'overlay' | 'disabled'>>;
71
- } & 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'>>;
71
+ } & Pick<ItemPickerListProps<ItemType, SectionType>, 'items' | 'actions' | 'recents' | 'sections' | 'isLoading' | 'onRefresh' | 'onSectionChange' | 'containerHeight' | 'showItemsSectionLabel' | 'noResultsIcon' | 'emptyListIcon' | 'emptyStateComponent' | 'noResultsComponent' | 'selectedItem' | 'getItemHeight' | 'scrollbarProps' | 'searchBarProps' | 'includeFooter' | 'includeSearchBar'>> & FormFieldCommonProps & Partial<Pick<ItemPickerTriggerProps, 'placeholder' | 'placeholderIcon' | 'onClear'>>;
72
72
  export type ItemPickerListProps<ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined> = WithHTMLAttributes<HTMLDivElement, {
73
73
  recents?: ItemType[];
74
74
  actions?: Action[];
75
75
  texts?: Partial<ItemPickerListTexts>;
76
76
  containerHeight?: ContainerHeightType;
77
77
  showItemsSectionLabel?: boolean;
78
- noResultsIcon?: ReactNode;
79
- emptyListIcon?: ReactNode;
78
+ noResultsIcon?: ReactElement;
79
+ emptyListIcon?: ReactElement;
80
+ emptyStateComponent?: ReactNode;
81
+ noResultsComponent?: ReactNode;
80
82
  onItemSelect: ItemSelectHandler<ItemType, SectionType>;
81
83
  onSectionChange?: SectionType extends BaseSectionType ? (section?: BaseSectionTypeWithFolders<SectionType>) => void : undefined;
82
84
  selectedItem?: ItemType;
package/dist/components/ItemPickerNew/types/itemPickerListTexts.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type ReactNode } from 'react';
2
- type TextsAsReactNode = 'basicSearchPlaceholder' | 'searchPlaceholder' | 'refreshButtonLabel' | 'showMoreResultsLabel' | 'noItems' | 'noResults' | 'noResultsInSection' | 'searchAllFoldersButtonLabel' | 'recentsSectionLabel' | 'actionsSectionLabel' | 'resultsSectionLabel' | 'noActions' | 'itemsSectionLabel' | 'infiniteScrollLoadingMore' | 'infiniteScrollLoadingError' | 'errorMessageTitle' | 'errorMessageDetails' | 'backTooltip' | 'clearSearchTooltip' | 'infiniteScrollAllLoaded';
2
+ type TextsAsReactNode = 'basicSearchPlaceholder' | 'searchPlaceholder' | 'refreshButtonLabel' | 'showMoreResultsLabel' | 'noItems' | 'noResults' | 'noResultsInSection' | 'searchAllFoldersButtonLabel' | 'recentsSectionLabel' | 'actionsSectionLabel' | 'resultsSectionLabel' | 'noActions' | 'emptyStateLabel' | 'itemsSectionLabel' | 'infiniteScrollLoadingMore' | 'infiniteScrollLoadingError' | 'errorMessageTitle' | 'errorMessageDetails' | 'backTooltip' | 'clearSearchTooltip' | 'infiniteScrollAllLoaded';
3
3
  export type ItemPickerListTexts = {
4
4
  [key in TextsAsReactNode]: ReactNode;
5
5
  };
package/dist/hooks/useDefaultTexts.js CHANGED
@@ -48,6 +48,10 @@ export var useDefaultTexts = function useDefaultTexts(texts) {
48
48
  id: 'DS.ITEM-PICKER-DROPDOWN.NO-ITEMS',
49
49
  defaultMessage: 'No items'
50
50
  }),
51
+ emptyStateLabel: intl.formatMessage({
52
+ id: 'DS.ITEM-PICKER-DROPDOWN.EMPTY-STATE',
53
+ defaultMessage: 'No items'
54
+ }),
51
55
  noResults: intl.formatMessage({
52
56
  id: 'DS.ITEM-PICKER-DROPDOWN.NO-SEARCH-RESULTS',
53
57
  defaultMessage: 'No results found'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-picker",
3
- "version": "1.16.2",
3
+ "version": "1.17.0",
4
4
  "description": "ItemPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,27 +35,27 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-alert": "^1.1.43",
39
- "@synerise/ds-avatar": "^1.3.3",
40
- "@synerise/ds-button": "^1.5.16",
41
- "@synerise/ds-dropdown": "^1.3.0",
42
- "@synerise/ds-empty-states": "^1.0.34",
43
- "@synerise/ds-flag": "^1.0.7",
44
- "@synerise/ds-form-field": "^1.3.8",
45
- "@synerise/ds-icon": "^1.14.1",
46
- "@synerise/ds-information-card": "^1.6.3",
47
- "@synerise/ds-list-item": "^1.4.8",
48
- "@synerise/ds-loader": "^1.0.12",
49
- "@synerise/ds-popconfirm": "^1.3.8",
50
- "@synerise/ds-result": "^1.0.47",
51
- "@synerise/ds-scrollbar": "^1.2.15",
52
- "@synerise/ds-search": "^1.5.8",
53
- "@synerise/ds-search-bar": "^1.4.18",
54
- "@synerise/ds-short-cuts": "^1.0.40",
55
- "@synerise/ds-skeleton": "^1.0.43",
56
- "@synerise/ds-tooltip": "^1.4.8",
57
- "@synerise/ds-typography": "^1.1.11",
58
- "@synerise/ds-utils": "^1.6.0",
38
+ "@synerise/ds-alert": "^1.1.44",
39
+ "@synerise/ds-avatar": "^1.3.4",
40
+ "@synerise/ds-button": "^1.5.17",
41
+ "@synerise/ds-dropdown": "^1.3.1",
42
+ "@synerise/ds-empty-states": "^1.0.35",
43
+ "@synerise/ds-flag": "^1.0.8",
44
+ "@synerise/ds-form-field": "^1.3.9",
45
+ "@synerise/ds-icon": "^1.15.0",
46
+ "@synerise/ds-information-card": "^1.6.4",
47
+ "@synerise/ds-list-item": "^1.4.9",
48
+ "@synerise/ds-loader": "^1.0.13",
49
+ "@synerise/ds-popconfirm": "^1.3.9",
50
+ "@synerise/ds-result": "^1.0.48",
51
+ "@synerise/ds-scrollbar": "^1.2.16",
52
+ "@synerise/ds-search": "^1.5.9",
53
+ "@synerise/ds-search-bar": "^1.4.19",
54
+ "@synerise/ds-short-cuts": "^1.0.41",
55
+ "@synerise/ds-skeleton": "^1.0.44",
56
+ "@synerise/ds-tooltip": "^1.4.9",
57
+ "@synerise/ds-typography": "^1.1.12",
58
+ "@synerise/ds-utils": "^1.7.0",
59
59
  "lodash.debounce": "^4.0.8",
60
60
  "react-window": "^1.8.11",
61
61
  "uuid": "^8.3.2"
@@ -69,5 +69,5 @@
69
69
  "react-intl": ">=3.12.0 <= 6.8",
70
70
  "styled-components": "^5.3.3"
71
71
  },
72
- "gitHead": "db04e33a219c7e1926f0f4816f2bfcf1bee9fc48"
72
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
73
73
  }