@synerise/ds-item-picker 1.16.2 → 1.17.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.17.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.17.0...@synerise/ds-item-picker@1.17.1) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
+# [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)
+
+### Bug Fixes
+
+- **item-picker:** close dropdown when selectedItem is set via prop ([5c491ce](https://github.com/Synerise/synerise-design/commit/5c491ce56e8d0e75c37b745d3a6987ffa1903044))
+
+### Features
+
+- **item-picker:** empty state default and custom ([a3b9af1](https://github.com/Synerise/synerise-design/commit/a3b9af1c0fc1e4a626da266199c456ef0aad67b1))
+
 ## [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)
 
 ### Bug Fixes

package/README.md

@@ -35,7 +35,6 @@ import ItemPicker from '@synerise/ds-item-picker'
   errorMessage={''}
   size={'small'}
   changeButtonLabel={'Change'}
-  onChangeButtonClick={() => {}}
 />
 
 ```
@@ -55,7 +54,7 @@ import ItemPicker from '@synerise/ds-item-picker'
 | dropdownBottomAction?       | Dropdown bottom action                                   | React.ReactNode                                                                                 | -                                        |
 | closeOnBottomAction?        | Close dropdown when bottom action has been clicked       | boolean                                                                                         | false                                    |
 | placeholder                 | Placeholder text                                         | string, React.ReactNode                                                                         | -                                        |
-| clear                       | Clear button tooltip                                     | string, React.ReactNode                                                                         | 'Remove'                                 |
+| clear                       | Clear button tooltip                                     | string, React.ReactNode                                                                         | 'Clear'                                  |
 | searchPlaceholder           | Placeholder of SearchBar in dropdown                     | string                                                                                          | 'Search'                                 |
 | onClear                     | Callback executed when clear icon is clicked             | () => void                                                                                      | -                                        |
 | 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'
 | disabled?                   | Whether the component is disabled                        | boolean                                                                                         | -                                        |
 | changeButtonLabel?          | Label of change button, available only when size='large' | string, React.ReactNode                                                                         | 'Change'                                 |
 | withClearConfirmation       | Shows Popconfirm on the clear icon click                 | boolean                                                                                         | -                                        |
-| clearConfirmTitle           | Title of Popconfirm                                      | string                                                                                          | 'Are you sure to remove this selection?' |
+| clearConfirmTitle           | Title of Popconfirm                                      | string                                                                                          | 'Please confirm'                         |
 | yesText                     | Label of confirm button                                  | string                                                                                          | 'Yes'                                    |
 | noText                      | Label of cancel button                                   | string                                                                                          | 'No'                                     |
 | noResults                   | No search results info                                   | string                                                                                          | 'No results'                             |

package/dist/ItemPicker.d.ts

@@ -1,8 +1,8 @@
-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';
+import { default as React } from 'react';
+import { ItemPickerProps } from './components/ItemPickerLegacy/ItemPickerLegacy.types';
+import { ItemPickerListRef } from './components/ItemPickerList/ItemPickerList.types';
+import { ItemPickerProps as ItemPickerPropsNew } from './components/ItemPickerNew/ItemPickerNew.types';
+import { BaseItemType, BaseSectionType } from './components/ItemPickerNew/types/baseItemSectionType.types';
 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;

package/dist/ItemPicker.js

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

package/dist/ItemPicker.styles.d.ts

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

package/dist/ItemPicker.styles.js

@@ -1,5 +1,8 @@
-import styled from 'styled-components';
-export var ItemPickerWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const ItemPickerWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemPickerstyles__ItemPickerWrapper",
   componentId: "sc-1dxa5ip-0"
-})(["position:relative;"]);
+})(["position:relative;"]);
+export {
+  ItemPickerWrapper
+};

package/dist/components/ItemPickerDropdown/ItemPickerDropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { ItemPickerDropdownProps } from './ItemPickerDropdown.types';
+import { default as React } from 'react';
+import { ItemPickerDropdownProps } from './ItemPickerDropdown.types';
 declare const ItemPickerDropdown: ({ onChange, placeholder, dataSource, closeDropdown, noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, isDropdownOpened, searchBarProps, hideSearchBar, scrollbarProps, clearSearchQuery, }: ItemPickerDropdownProps) => React.JSX.Element;
 export default ItemPickerDropdown;

package/dist/components/ItemPickerDropdown/ItemPickerDropdown.js

@@ -1,47 +1,42 @@
-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, { useEffect, useMemo, useRef, useState } from 'react';
-import Icon, { SearchM } from '@synerise/ds-icon';
-import Result from '@synerise/ds-result';
-import SearchBar from '@synerise/ds-search-bar';
-import { SearchItems } from '@synerise/ds-search/dist/Elements';
-import { useKeyboardShortcuts } from '@synerise/ds-utils';
-import * as S from './ItemPickerDropdown.style';
-var DEFAULT_ROW_HEIGHT = 32;
-var DEFAULT_VISIBLE_ROWS = 10;
-var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
-  var _searchBarProps$value;
-  var onChange = _ref.onChange,
-    placeholder = _ref.placeholder,
-    dataSource = _ref.dataSource,
-    closeDropdown = _ref.closeDropdown,
-    noResults = _ref.noResults,
-    dropdownVisibleRows = _ref.dropdownVisibleRows,
-    dropdownRowHeight = _ref.dropdownRowHeight,
-    dropdownBottomAction = _ref.dropdownBottomAction,
-    closeOnBottomAction = _ref.closeOnBottomAction,
-    isDropdownOpened = _ref.isDropdownOpened,
-    searchBarProps = _ref.searchBarProps,
-    hideSearchBar = _ref.hideSearchBar,
-    scrollbarProps = _ref.scrollbarProps,
-    clearSearchQuery = _ref.clearSearchQuery;
-  var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
-  var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var _useState2 = useState(0),
-    scrollTop = _useState2[0],
-    setScrollTop = _useState2[1];
-  var containerRef = useRef(null);
-  useEffect(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import Icon, { SearchM } from "@synerise/ds-icon";
+import Result from "@synerise/ds-result";
+import SearchBar from "@synerise/ds-search-bar";
+import { SearchItems } from "@synerise/ds-search/dist/Elements";
+import { useKeyboardShortcuts } from "@synerise/ds-utils";
+import { DropdownWrapper, ListWrapper, StyledScrollbar, ListItem, DropdownFooter, BottomActionWrapper } from "./ItemPickerDropdown.style.js";
+const DEFAULT_ROW_HEIGHT = 32;
+const DEFAULT_VISIBLE_ROWS = 10;
+const ItemPickerDropdown = ({
+  onChange,
+  placeholder,
+  dataSource,
+  closeDropdown,
+  noResults,
+  dropdownVisibleRows,
+  dropdownRowHeight,
+  dropdownBottomAction,
+  closeOnBottomAction,
+  isDropdownOpened,
+  searchBarProps,
+  hideSearchBar,
+  scrollbarProps,
+  clearSearchQuery
+}) => {
+  const rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
+  const rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef(null);
+  useEffect(() => {
     if (clearSearchQuery && clearSearchQuery > 0) {
-      setSearchQuery('');
+      setSearchQuery("");
     }
   }, [clearSearchQuery]);
   useKeyboardShortcuts({
-    Escape: function Escape(event) {
-      var _containerRef$current;
-      if (!((_containerRef$current = containerRef.current) != null && _containerRef$current.offsetParent)) {
+    Escape: (event) => {
+      if (!containerRef.current?.offsetParent) {
         return;
       }
       if (!searchQuery) {
@@ -51,70 +46,34 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
       }
     }
   });
-  var handleClose = function handleClose() {
-    setSearchQuery('');
+  const handleClose = () => {
+    setSearchQuery("");
     closeDropdown();
   };
-  var handleChange = function handleChange(item) {
+  const handleChange = (item) => {
     handleClose();
     onChange(item);
   };
-  var filteredDataSource = useMemo(function () {
-    return searchQuery ? dataSource.filter(function (item) {
-      return item.text && String(item.text).toLowerCase().includes(searchQuery.toLowerCase());
-    }) : dataSource;
+  const filteredDataSource = useMemo(() => {
+    return searchQuery ? dataSource.filter((item) => item.text && String(item.text).toLowerCase().includes(searchQuery.toLowerCase())) : dataSource;
   }, [searchQuery, dataSource]);
-  var renderBottomAction = function renderBottomAction() {
-    var bottomAction = !closeOnBottomAction ? dropdownBottomAction : /*#__PURE__*/React.createElement(S.BottomActionWrapper, {
-      onClick: handleClose
-    }, dropdownBottomAction);
-    return dropdownBottomAction && /*#__PURE__*/React.createElement(S.DropdownFooter, null, bottomAction);
+  const renderBottomAction = () => {
+    const bottomAction = !closeOnBottomAction ? dropdownBottomAction : /* @__PURE__ */ jsx(BottomActionWrapper, { onClick: handleClose, children: dropdownBottomAction });
+    return dropdownBottomAction && /* @__PURE__ */ jsx(DropdownFooter, { children: bottomAction });
   };
-  return /*#__PURE__*/React.createElement(S.DropdownWrapper, {
-    ref: containerRef,
-    "data-testid": "ds-item-picker-dropdown"
-  }, hideSearchBar !== true && /*#__PURE__*/React.createElement(SearchBar, _extends({
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null)
-    }),
-    onSearchChange: setSearchQuery,
-    placeholder: placeholder,
-    value: searchQuery,
-    onClearInput: function onClearInput() {
-      return setSearchQuery('');
-    },
-    autofocus: isDropdownOpened
-  }, searchBarProps)), /*#__PURE__*/React.createElement(S.ListWrapper, null, (filteredDataSource == null ? void 0 : filteredDataSource.length) === 0 && /*#__PURE__*/React.createElement(Result, {
-    type: "no-results",
-    description: noResults
-  }), /*#__PURE__*/React.createElement(S.StyledScrollbar, _extends({
-    maxHeight: rowCount * rowHeight,
-    absolute: true,
-    onScroll: function onScroll(event) {
-      return setScrollTop(event.currentTarget.scrollTop);
-    },
-    style: {
-      paddingRight: '8px'
-    }
-  }, scrollbarProps), /*#__PURE__*/React.createElement(SearchItems, {
-    data: filteredDataSource,
-    highlight: (_searchBarProps$value = searchBarProps == null ? void 0 : searchBarProps.value) != null ? _searchBarProps$value : searchQuery,
-    itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(S.ListItem, _extends({
-        key: item == null ? void 0 : item.text
-      }, item));
-    },
-    onItemClick: function onItemClick(i) {
-      return handleChange(i);
-    },
-    rowHeight: rowHeight,
-    height: rowCount * rowHeight,
-    visibleRows: rowCount,
-    listProps: {
-      scrollTop: scrollTop
-    },
-    width: "100%",
-    renderInMenu: false
-  }))), renderBottomAction());
+  return /* @__PURE__ */ jsxs(DropdownWrapper, { ref: containerRef, "data-testid": "ds-item-picker-dropdown", children: [
+    hideSearchBar !== true && /* @__PURE__ */ jsx(SearchBar, { iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}) }), onSearchChange: setSearchQuery, placeholder, value: searchQuery, onClearInput: () => setSearchQuery(""), autofocus: isDropdownOpened, ...searchBarProps }),
+    /* @__PURE__ */ jsxs(ListWrapper, { children: [
+      filteredDataSource?.length === 0 && /* @__PURE__ */ jsx(Result, { type: "no-results", description: noResults }),
+      /* @__PURE__ */ jsx(StyledScrollbar, { maxHeight: rowCount * rowHeight, absolute: true, onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), style: {
+        paddingRight: "8px"
+      }, ...scrollbarProps, children: /* @__PURE__ */ jsx(SearchItems, { data: filteredDataSource, highlight: searchBarProps?.value ?? searchQuery, itemRender: (item) => /* @__PURE__ */ jsx(ListItem, { ...item }, item?.text), onItemClick: (i) => handleChange(i), rowHeight, height: rowCount * rowHeight, visibleRows: rowCount, listProps: {
+        scrollTop
+      }, width: "100%", renderInMenu: false }) })
+    ] }),
+    renderBottomAction()
+  ] });
+};
+export {
+  ItemPickerDropdown as default
 };
-export default ItemPickerDropdown;

package/dist/components/ItemPickerDropdown/ItemPickerDropdown.style.d.ts

@@ -1,8 +1,8 @@
-import { type StyledListItem } from '@synerise/ds-list-item';
-import { type ScrollbarProps } from '@synerise/ds-scrollbar';
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { StyledListItem } from '@synerise/ds-list-item';
+import { ScrollbarProps } from '@synerise/ds-scrollbar';
+export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ListItem: StyledListItem;
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
-export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BottomActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollbar: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
+export declare const DropdownFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BottomActionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/ItemPickerDropdown/ItemPickerDropdown.style.js

@@ -1,34 +1,37 @@
-import styled from 'styled-components';
-import DSListItem from '@synerise/ds-list-item';
-import Scrollbar from '@synerise/ds-scrollbar';
-export var DropdownWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import DSListItem from "@synerise/ds-list-item";
+import Scrollbar from "@synerise/ds-scrollbar";
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__DropdownWrapper",
   componentId: "sc-1y4j72s-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
-export var ListItem = styled(DSListItem).withConfig({
+const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
   displayName: "ItemPickerDropdownstyle__ListItem",
   componentId: "sc-1y4j72s-1"
 })(["min-width:auto;"]);
-export var ListWrapper = styled.div.withConfig({
+const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__ListWrapper",
   componentId: "sc-1y4j72s-2"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px 0 8px 8px;background:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.white;
-});
-export var StyledScrollbar = styled(Scrollbar).withConfig({
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px 0 8px 8px;background:", ";"], ({
+  theme
+}) => theme.palette.white);
+const StyledScrollbar = /* @__PURE__ */ styled(Scrollbar).withConfig({
   displayName: "ItemPickerDropdownstyle__StyledScrollbar",
   componentId: "sc-1y4j72s-3"
 })(["&&{.scrollbar-container{padding-right:8px;}}"]);
-export var DropdownFooter = styled.div.withConfig({
+const DropdownFooter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__DropdownFooter",
   componentId: "sc-1y4j72s-4"
-})(["background-color:", ";height:52px;display:flex;align-items:center;border-top:1px solid ", ";cursor:default;margin:0;padding:0 8px;"], function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['grey-100'];
-});
-export var BottomActionWrapper = styled.div.withConfig({
+})(["background-color:", ";height:52px;display:flex;align-items:center;border-top:1px solid ", ";cursor:default;margin:0;padding:0 8px;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-100"]);
+const BottomActionWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__BottomActionWrapper",
   componentId: "sc-1y4j72s-5"
-})([""]);
+})([""]);
+export {
+  BottomActionWrapper,
+  DropdownFooter,
+  DropdownWrapper,
+  ListItem,
+  ListWrapper,
+  StyledScrollbar
+};

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

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
-import { type ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
-import { type SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
+import { ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
+import { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
 export type ItemPickerDropdownProps = {
     onChange: (item: ListItemProps) => void;
     placeholder: string;

package/dist/components/ItemPickerDropdown/ItemPickerDropdown.types.js

@@ -1 +1 @@
-export {};
+

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type ItemPickerProps } from './ItemPickerLegacy.types';
+import { default as React } from 'react';
+import { ItemPickerProps } from './ItemPickerLegacy.types';
 /**
  * @deprecated - use new ItemPicker
  */