@synerise/ds-item-picker 1.17.0 → 1.17.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

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
  */

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js

@@ -1,166 +1,103 @@
-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, { useCallback, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Dropdown from '@synerise/ds-dropdown';
-import FormField from '@synerise/ds-form-field';
-import * as S from '../../ItemPicker.styles';
-import ItemPickerDropdown from '../ItemPickerDropdown/ItemPickerDropdown';
-import Trigger from '../ItemPickerTrigger/Trigger';
-/**
- * @deprecated - use new ItemPicker
- */
-
-var ItemPickerLegacy = function ItemPickerLegacy(_ref) {
-  var dataSource = _ref.dataSource,
-    onChange = _ref.onChange,
-    onClear = _ref.onClear,
-    placeholder = _ref.placeholder,
-    changeButtonLabel = _ref.changeButtonLabel,
-    clear = _ref.clear,
-    clearConfirmTitle = _ref.clearConfirmTitle,
-    closeOnBottomAction = _ref.closeOnBottomAction,
-    description = _ref.description,
-    disabled = _ref.disabled,
-    dropdownBottomAction = _ref.dropdownBottomAction,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    dropdownRowHeight = _ref.dropdownRowHeight,
-    dropdownVisibleRows = _ref.dropdownVisibleRows,
-    error = _ref.error,
-    errorMessage = _ref.errorMessage,
-    label = _ref.label,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    noResults = _ref.noResults,
-    noText = _ref.noText,
-    placeholderIcon = _ref.placeholderIcon,
-    searchPlaceholder = _ref.searchPlaceholder,
-    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,
-    withClearConfirmation = _ref.withClearConfirmation,
-    scrollbarProps = _ref.scrollbarProps,
-    informationCardTooltipProps = _ref.informationCardTooltipProps,
-    hideSearchBar = _ref.hideSearchBar;
-  var _useState = useState(false),
-    dropdownOpened = _useState[0],
-    setDropdownOpened = _useState[1];
-  var clearSearchBarValue = useRef();
-  var intl = useIntl();
-  var texts = useMemo(function () {
-    return {
-      changeButtonLabel: changeButtonLabel || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CHANGE-BUTTON'
-      }),
-      clear: clear || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CLEAR'
-      }),
-      clearConfirmTitle: clearConfirmTitle || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CLEAR-CONFIRM'
-      }),
-      noResults: noResults || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.NO-RESULTS',
-        defaultMessage: 'No results'
-      }),
-      noText: noText || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.NO-TEXT',
-        defaultMessage: 'No'
-      }),
-      yesText: yesText || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.YES-TEXT',
-        defaultMessage: 'Yes'
-      }),
-      searchPlaceholder: searchPlaceholder || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.SEARCH',
-        defaultMessage: 'Search'
-      })
-    };
-  }, [changeButtonLabel, clear, clearConfirmTitle, intl, noResults, noText, searchPlaceholder, yesText]);
-  var onVisibilityChange = function onVisibilityChange(state) {
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback } from "react";
+import { useIntl } from "react-intl";
+import Dropdown from "@synerise/ds-dropdown";
+import FormField from "@synerise/ds-form-field";
+import { ItemPickerWrapper } from "../../ItemPicker.styles.js";
+import ItemPickerDropdown from "../ItemPickerDropdown/ItemPickerDropdown.js";
+import Trigger from "../ItemPickerTrigger/Trigger.js";
+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 = "small",
+  yesText,
+  withClearConfirmation,
+  scrollbarProps,
+  informationCardTooltipProps,
+  hideSearchBar
+}) => {
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const clearSearchBarValue = useRef();
+  const intl = useIntl();
+  const texts = useMemo(() => ({
+    changeButtonLabel: changeButtonLabel || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CHANGE-BUTTON"
+    }),
+    clear: clear || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CLEAR"
+    }),
+    clearConfirmTitle: clearConfirmTitle || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CLEAR-CONFIRM"
+    }),
+    noResults: noResults || intl.formatMessage({
+      id: "DS.ITEM-PICKER.NO-RESULTS",
+      defaultMessage: "No results"
+    }),
+    noText: noText || intl.formatMessage({
+      id: "DS.ITEM-PICKER.NO-TEXT",
+      defaultMessage: "No"
+    }),
+    yesText: yesText || intl.formatMessage({
+      id: "DS.ITEM-PICKER.YES-TEXT",
+      defaultMessage: "Yes"
+    }),
+    searchPlaceholder: searchPlaceholder || intl.formatMessage({
+      id: "DS.ITEM-PICKER.SEARCH",
+      defaultMessage: "Search"
+    })
+  }), [changeButtonLabel, clear, clearConfirmTitle, intl, noResults, noText, searchPlaceholder, yesText]);
+  const onVisibilityChange = (state) => {
     setDropdownOpened(state);
-    if (state && typeof onFocus === 'function') {
+    if (state && typeof onFocus === "function") {
       onFocus();
     }
     if (!state) {
       clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
-      if (typeof onBlur === 'function') {
+      if (typeof onBlur === "function") {
         onBlur();
       }
     }
   };
-  var openDropdown = useCallback(function () {
+  const openDropdown = useCallback(() => {
     setDropdownOpened(true);
-    typeof onFocus === 'function' && onFocus();
+    typeof onFocus === "function" && onFocus();
   }, [setDropdownOpened, onFocus]);
-  var closeDropdown = useCallback(function () {
+  const closeDropdown = useCallback(() => {
     setDropdownOpened(false);
-    typeof onBlur === 'function' && onBlur();
+    typeof onBlur === "function" && onBlur();
   }, [setDropdownOpened, onBlur]);
-  var dropdownOverlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(ItemPickerDropdown, {
-      searchBarProps: searchBarProps,
-      clearSearchQuery: clearSearchBarValue.current,
-      onChange: onChange,
-      dataSource: dataSource,
-      placeholder: texts.searchPlaceholder,
-      closeDropdown: closeDropdown,
-      noResults: texts.noResults,
-      dropdownVisibleRows: dropdownVisibleRows,
-      dropdownRowHeight: dropdownRowHeight,
-      dropdownBottomAction: dropdownBottomAction,
-      closeOnBottomAction: closeOnBottomAction,
-      isDropdownOpened: dropdownOpened,
-      scrollbarProps: scrollbarProps,
-      hideSearchBar: hideSearchBar
-    });
-  }, [searchBarProps, onChange, dataSource, texts, closeDropdown, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, hideSearchBar, scrollbarProps]);
-  var renderTrigger = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Trigger, {
-      clear: texts.clear,
-      selected: selectedItem,
-      onClear: onClear,
-      opened: dropdownOpened,
-      placeholder: placeholder,
-      placeholderIcon: placeholderIcon,
-      error: error,
-      disabled: disabled,
-      openDropdown: openDropdown,
-      closeDropdown: closeDropdown,
-      size: size,
-      changeButtonLabel: texts.changeButtonLabel,
-      withChangeButton: !withClearConfirmation,
-      clearConfirmTitle: texts.clearConfirmTitle,
-      yesText: texts.yesText,
-      noText: texts.noText,
-      withClearConfirmation: Boolean(withClearConfirmation),
-      informationCardTooltipProps: informationCardTooltipProps
-    });
-  }, [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
-  return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
-    className: "ds-items-picker",
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(FormField, {
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig,
-    errorText: errorMessage,
-    description: description
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    open: dropdownOpened,
-    disabled: disabled,
-    trigger: ['click'],
-    overlay: dropdownOverlay,
-    onOpenChange: onVisibilityChange,
-    asChild: true,
-    size: "match-trigger"
-  }, dropdownProps, {
-    popoverProps: _extends({
-      testId: 'item-picker-legacy'
-    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
-  }), renderTrigger)));
+  const dropdownOverlay = useMemo(() => /* @__PURE__ */ jsx(ItemPickerDropdown, { searchBarProps, clearSearchQuery: clearSearchBarValue.current, onChange, dataSource, placeholder: texts.searchPlaceholder, closeDropdown, noResults: texts.noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, isDropdownOpened: dropdownOpened, scrollbarProps, hideSearchBar }), [searchBarProps, onChange, dataSource, texts, closeDropdown, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, hideSearchBar, scrollbarProps]);
+  const renderTrigger = useMemo(() => /* @__PURE__ */ jsx(Trigger, { clear: texts.clear, selected: selectedItem, onClear, opened: dropdownOpened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel: texts.changeButtonLabel, withChangeButton: !withClearConfirmation, clearConfirmTitle: texts.clearConfirmTitle, yesText: texts.yesText, noText: texts.noText, withClearConfirmation: Boolean(withClearConfirmation), informationCardTooltipProps }), [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
+  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", disabled, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { open: dropdownOpened, disabled, trigger: ["click"], overlay: dropdownOverlay, onOpenChange: onVisibilityChange, asChild: true, size: "match-trigger", ...dropdownProps, popoverProps: {
+    testId: "item-picker-legacy",
+    ...dropdownProps?.popoverProps
+  }, children: renderTrigger }) }) });
+};
+export {
+  ItemPickerLegacy as default
 };
-export default ItemPickerLegacy;