@synerise/ds-item-picker 1.17.0 → 1.17.2

package/dist/components/ItemPickerList/ItemPickerList.js

@@ -1,283 +1,237 @@
-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"];
-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.debounce';
-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';
-import Icon, { ArrowLeftM } from '@synerise/ds-icon';
-import { ListContextProvider, itemSizes } from '@synerise/ds-list-item';
-import { Text } from '@synerise/ds-typography';
-import { focusWithArrowKeys, useCombinedRefs, useKeyboardShortcuts, useScrollContain } from '@synerise/ds-utils';
-import { useDefaultTexts } from '../../hooks/useDefaultTexts';
-import * as S from './ItemPickerList.styles';
-import { EmptyListMessage, ErrorMessage, ItemPickerListFooter, ItemPickerListRow, ItemPickerListSkeleton } from './components';
-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';
-var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
-  var items = _ref.items,
-    recents = _ref.recents,
-    sections = _ref.sections,
-    actions = _ref.actions,
-    texts = _ref.texts,
-    isLoading = _ref.isLoading,
-    selectedItem = _ref.selectedItem,
-    scrollbarProps = _ref.scrollbarProps,
-    searchBarProps = _ref.searchBarProps,
-    _ref$showItemsSection = _ref.showItemsSectionLabel,
-    showItemsSectionLabel = _ref$showItemsSection === void 0 ? true : _ref$showItemsSection,
-    onItemSelect = _ref.onItemSelect,
-    onRefresh = _ref.onRefresh,
-    containerHeight = _ref.containerHeight,
-    isVisible = _ref.isVisible,
-    onSectionChange = _ref.onSectionChange,
-    containerRefProp = _ref.containerRef,
-    _ref$includeFooter = _ref.includeFooter,
-    includeFooter = _ref$includeFooter === void 0 ? true : _ref$includeFooter,
-    _ref$includeSearchBar = _ref.includeSearchBar,
-    includeSearchBar = _ref$includeSearchBar === void 0 ? true : _ref$includeSearchBar,
-    onLoadedData = _ref.onLoadedData,
-    isDropdown = _ref.isDropdown,
-    emptyListIcon = _ref.emptyListIcon,
-    noResultsIcon = _ref.noResultsIcon,
-    emptyStateComponent = _ref.emptyStateComponent,
-    noResultsComponent = _ref.noResultsComponent,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var listRef = useRef(null);
-  var scrollBarRef = useRef(null);
-  var containerRef = useRef(null);
-  var refs = [containerRef];
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import debounce from "lodash.debounce";
+import { forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle, useEffect } from "react";
+import { v4 } from "uuid";
+import { useTheme } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { ArrowLeftM } from "@synerise/ds-icon";
+import { itemSizes, ListContextProvider } from "@synerise/ds-list-item";
+import { Text } from "@synerise/ds-typography";
+import { useCombinedRefs, useScrollContain, useKeyboardShortcuts, focusWithArrowKeys } from "@synerise/ds-utils";
+import { useDefaultTexts } from "../../hooks/useDefaultTexts.js";
+import { StyledScrollbar, ScrollContent, StyledList, ListContainer, ListWrapper } from "./ItemPickerList.styles.js";
+import { EmptyListMessage } from "./components/EmptyListMessage.js";
+import { ErrorMessage } from "./components/ErrorMessage.js";
+import "@synerise/ds-alert";
+import { ItemPickerListFooter } from "./components/ItemPickerListFooter.js";
+import { ItemPickerListRow } from "./components/ItemPickerListRow.js";
+import { ItemPickerListSkeleton } from "./components/ItemPickerListSkeleton.js";
+import { ListSearchInput } from "./components/ListSearchInput.js";
+import { ITEM_SIZE, LIST_STYLE, SECTION_HEADER_HEIGHT, LIST_INNER_PADDING } from "./constants.js";
+import { useItemsInSections } from "./hooks/useItemsInSections.js";
+import { useListHeight } from "./hooks/useListHeight.js";
+import { isTitle } from "./utils/typeguards.utils.js";
+import { isNavKey } from "./utils/isNavKey.js";
+import { findSectionById } from "./utils/findSectionById.js";
+const ItemPickerListInner = ({
+  items,
+  recents,
+  sections,
+  actions,
+  texts,
+  isLoading,
+  selectedItem,
+  scrollbarProps,
+  searchBarProps,
+  showItemsSectionLabel = true,
+  onItemSelect,
+  onRefresh,
+  containerHeight,
+  isVisible,
+  onSectionChange,
+  containerRef: containerRefProp,
+  includeFooter = true,
+  includeSearchBar = true,
+  onLoadedData,
+  isDropdown,
+  emptyListIcon,
+  noResultsIcon,
+  emptyStateComponent,
+  noResultsComponent,
+  ...htmlAttributes
+}, forwardedRef) => {
+  const theme = useTheme();
+  const [searchQuery, setSearchQuery] = useState("");
+  const listRef = useRef(null);
+  const scrollBarRef = useRef(null);
+  const containerRef = useRef(null);
+  const refs = [containerRef];
   if (containerRefProp) {
     refs.push(containerRefProp);
   }
-  var combinedScrollRef = useCombinedRefs.apply(void 0, refs);
-  var inputRef = useRef(null);
-  var changeLocalSearchQueryRef = useRef(null);
-  var scrollContainRef = useScrollContain();
-  var allTexts = useDefaultTexts(texts);
-  var changeSearchQuery = useCallback(function (query) {
-    changeLocalSearchQueryRef.current == null || changeLocalSearchQueryRef.current(query);
+  const combinedScrollRef = useCombinedRefs(...refs);
+  const inputRef = useRef(null);
+  const changeLocalSearchQueryRef = useRef(null);
+  const scrollContainRef = useScrollContain();
+  const allTexts = useDefaultTexts(texts);
+  const changeSearchQuery = useCallback((query) => {
+    changeLocalSearchQueryRef.current?.(query);
     setSearchQuery(query);
   }, []);
-  var debouncedSearchQueryChange = useRef(debounce(function (query) {
+  const debouncedSearchQueryChange = useRef(debounce((query) => {
     changeSearchQuery(query);
   }, 300)).current;
-  var classNames = useMemo(function () {
-    return "ds-item-picker-dropdown ds-item-picker-dropdown-" + uuid();
-  }, []);
-  var handleItemSelect = function handleItemSelect(item) {
-    var section = findSectionById(sections, item.sectionId);
-    onItemSelect == null || onItemSelect(item, section);
+  const classNames = useMemo(() => `ds-item-picker-dropdown ds-item-picker-dropdown-${v4()}`, []);
+  const handleItemSelect = (item) => {
+    const section = findSectionById(sections, item.sectionId);
+    onItemSelect?.(item, section);
   };
-  var _useItemsInSections = useItemsInSections({
-      items: items,
-      texts: allTexts,
-      selectedItem: selectedItem,
-      sections: sections,
-      recents: recents,
-      actions: actions,
-      searchQuery: searchQuery,
-      handleItemSelect: handleItemSelect,
-      onSectionChange: onSectionChange,
-      showItemsSectionLabel: showItemsSectionLabel,
-      changeSearchQuery: changeSearchQuery,
-      onLoadedData: onLoadedData
-    }),
-    currentSection = _useItemsInSections.currentSection,
-    resetCurrentSection = _useItemsInSections.resetCurrentSection,
-    currentPath = _useItemsInSections.currentPath,
-    goBack = _useItemsInSections.goBack,
-    mergedItemsList = _useItemsInSections.mergedItemsList,
-    isLoadingMore = _useItemsInSections.isLoadingMore,
-    isLoadingMoreError = _useItemsInSections.isLoadingMoreError,
-    isLoadingItems = _useItemsInSections.isLoading,
-    isLoadedAll = _useItemsInSections.isLoadedAll,
-    isLoadingError = _useItemsInSections.isLoadingError,
-    handleScrollEndReach = _useItemsInSections.handleScrollEndReach,
-    refreshItems = _useItemsInSections.refreshItems,
-    refreshEnabled = _useItemsInSections.refreshEnabled,
-    contentHeight = _useItemsInSections.contentHeight,
-    searchByParamConfig = _useItemsInSections.searchByParamConfig,
-    setSearchByParamConfig = _useItemsInSections.setSearchByParamConfig,
-    searchByAction = _useItemsInSections.searchByAction,
-    listActions = _useItemsInSections.listActions,
-    searchInAction = _useItemsInSections.searchInAction,
-    searchInItem = _useItemsInSections.searchInItem,
-    canPerformListActions = _useItemsInSections.canPerformListActions,
-    reloadActiveSection = _useItemsInSections.reloadActiveSection,
-    activeSectionId = _useItemsInSections.activeSectionId;
-  useImperativeHandle(forwardedRef, function () {
+  const {
+    currentSection,
+    resetCurrentSection,
+    currentPath,
+    goBack,
+    mergedItemsList,
+    isLoadingMore,
+    isLoadingMoreError,
+    isLoading: isLoadingItems,
+    isLoadedAll,
+    isLoadingError,
+    handleScrollEndReach,
+    refreshItems,
+    refreshEnabled,
+    contentHeight,
+    searchByParamConfig,
+    setSearchByParamConfig,
+    searchByAction,
+    listActions,
+    searchInAction,
+    searchInItem,
+    canPerformListActions,
+    reloadActiveSection,
+    activeSectionId
+  } = useItemsInSections({
+    items,
+    texts: allTexts,
+    selectedItem,
+    sections,
+    recents,
+    actions,
+    searchQuery,
+    handleItemSelect,
+    onSectionChange,
+    showItemsSectionLabel,
+    changeSearchQuery,
+    onLoadedData
+  });
+  useImperativeHandle(forwardedRef, () => {
     return {
-      currentSection: currentSection,
-      activeSectionId: activeSectionId,
-      reloadActiveSection: reloadActiveSection
+      currentSection,
+      activeSectionId,
+      reloadActiveSection
     };
   }, [activeSectionId, currentSection, reloadActiveSection]);
-  var handleScroll = useCallback(function (_ref2) {
-    var currentTarget = _ref2.currentTarget;
-    var scrollTop = currentTarget.scrollTop,
-      scrollHeight = currentTarget.scrollHeight,
-      clientHeight = currentTarget.clientHeight;
+  const handleScroll = useCallback(({
+    currentTarget
+  }) => {
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight
+    } = currentTarget;
     if (listRef.current) {
       listRef.current.scrollTo(scrollTop);
     }
     if (isDropdown && !isVisible) {
       return;
     }
-    var max = scrollHeight - clientHeight;
+    const max = scrollHeight - clientHeight;
     if (scrollTop >= max - 20) {
       handleScrollEndReach();
     }
   }, [handleScrollEndReach, isDropdown, isVisible]);
-  var focusSearchInput = useCallback(function () {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+  const focusSearchInput = useCallback(() => {
+    inputRef.current?.focus();
   }, []);
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = (event) => {
     if (isNavKey(event)) {
-      focusWithArrowKeys(event, classNames.split(' ')[1], function () {
+      focusWithArrowKeys(event, classNames.split(" ")[1], () => {
         focusSearchInput();
       });
     }
   };
-  var getItemSize = useCallback(function (index) {
-    var item = mergedItemsList && mergedItemsList[index];
+  const getItemSize = useCallback((index) => {
+    const item = mergedItemsList && mergedItemsList[index];
     if (isTitle(item)) {
       return ITEM_SIZE.title;
     }
     return ITEM_SIZE[item.size || itemSizes.DEFAULT];
   }, [mergedItemsList]);
-  var itemData = useMemo(function () {
-    return {
-      dataSource: mergedItemsList,
-      classNames: classNames,
-      getItemSize: getItemSize,
-      texts: allTexts,
-      infiniteScroll: {
-        isLoading: isLoadingMore,
-        hasMore: !isLoadedAll,
-        hasError: isLoadingMoreError
-      }
-    };
-  }, [mergedItemsList, classNames, getItemSize, allTexts, isLoadingMore, isLoadedAll, isLoadingMoreError]);
-  var handleRefresh = onRefresh || refreshItems ? function () {
-    changeSearchQuery('');
-    setSearchByParamConfig(undefined);
+  const itemData = useMemo(() => ({
+    dataSource: mergedItemsList,
+    classNames,
+    getItemSize,
+    texts: allTexts,
+    infiniteScroll: {
+      isLoading: isLoadingMore,
+      hasMore: !isLoadedAll,
+      hasError: isLoadingMoreError
+    }
+  }), [mergedItemsList, classNames, getItemSize, allTexts, isLoadingMore, isLoadedAll, isLoadingMoreError]);
+  const handleRefresh = onRefresh || refreshItems ? () => {
+    changeSearchQuery("");
+    setSearchByParamConfig(void 0);
     resetCurrentSection();
     onRefresh && onRefresh();
     if (refreshItems) {
       refreshItems();
     }
-  } : undefined;
-  var _ref3 = useListHeight({
-      heightConfig: containerHeight,
-      calculatedContentHeight: contentHeight,
-      containerRef: combinedScrollRef,
-      includeFooter: includeFooter && !!handleRefresh,
-      includeSearchBar: includeSearchBar
-    }) || 0,
-    outerWrapperHeight = _ref3.outerWrapperHeight,
-    listWrapperHeight = _ref3.listWrapperHeight,
-    offsetSpace = _ref3.offsetSpace;
-  var isActionSection = Boolean(searchByAction || searchInAction || searchInItem);
-  var isSection = Boolean(currentSection || isActionSection);
-  var listHeight = (isSection ? listWrapperHeight - SECTION_HEADER_HEIGHT : listWrapperHeight) - LIST_INNER_PADDING;
-  var clearSearchQuery = function clearSearchQuery() {
-    changeSearchQuery('');
+  } : void 0;
+  const {
+    outerWrapperHeight,
+    listWrapperHeight,
+    offsetSpace
+  } = useListHeight({
+    heightConfig: containerHeight,
+    calculatedContentHeight: contentHeight,
+    containerRef: combinedScrollRef,
+    includeFooter: includeFooter && !!handleRefresh,
+    includeSearchBar
+  }) || 0;
+  const isActionSection = Boolean(searchByAction || searchInAction || searchInItem);
+  const isSection = Boolean(currentSection || isActionSection);
+  const listHeight = (isSection ? listWrapperHeight - SECTION_HEADER_HEIGHT : listWrapperHeight) - LIST_INNER_PADDING;
+  const clearSearchQuery = () => {
+    changeSearchQuery("");
   };
-  var showMessage = !isLoading && !isLoadingItems && ((mergedItemsList == null ? void 0 : mergedItemsList.length) === 0 || isLoadingError);
-  var listContent = useMemo(function () {
+  const showMessage = !isLoading && !isLoadingItems && (mergedItemsList?.length === 0 || isLoadingError);
+  const listContent = useMemo(() => {
     if (isLoadingError) {
-      return /*#__PURE__*/React.createElement(ErrorMessage, {
-        texts: allTexts
-      });
+      return /* @__PURE__ */ jsx(ErrorMessage, { texts: allTexts });
     }
     if (isLoading || isLoadingItems) {
-      return /*#__PURE__*/React.createElement(ItemPickerListSkeleton, {
-        wrapperHeight: listWrapperHeight
-      });
+      return /* @__PURE__ */ jsx(ItemPickerListSkeleton, { wrapperHeight: listWrapperHeight });
     }
-    var getSectionLabel = function getSectionLabel() {
-      var itemsPath = currentPath || [currentSection == null ? void 0 : currentSection.text];
-      var searchByActionLabel = (searchByAction == null ? void 0 : searchByAction.sectionTitle) || (searchByAction == null ? void 0 : searchByAction.text);
-      var searchInActionLabel = searchInAction == null ? void 0 : searchInAction.text;
-      var searchInItemLabel = searchInItem && "" + (searchInAction == null ? void 0 : searchInAction.renderSearchInValueText(searchInItem));
-      var labelParts = [].concat(itemsPath, [searchInActionLabel, searchInItemLabel, searchByActionLabel]).filter(Boolean).join(' - ');
-      return /*#__PURE__*/React.createElement(Text, {
-        ellipsis: {
-          tooltip: labelParts
-        }
-      }, labelParts);
+    const getSectionLabel = () => {
+      const itemsPath = currentPath || [currentSection?.text];
+      const searchByActionLabel = searchByAction?.sectionTitle || searchByAction?.text;
+      const searchInActionLabel = searchInAction?.text;
+      const searchInItemLabel = searchInItem && `${searchInAction?.renderSearchInValueText(searchInItem)}`;
+      const labelParts = [...itemsPath, searchInActionLabel, searchInItemLabel, searchByActionLabel].filter(Boolean).join(" - ");
+      return /* @__PURE__ */ jsx(Text, { ellipsis: {
+        tooltip: labelParts
+      }, children: labelParts });
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isSection && /*#__PURE__*/React.createElement(Dropdown.BackAction, {
-      tooltipProps: {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isSection && /* @__PURE__ */ jsx(Dropdown.BackAction, { tooltipProps: {
         title: allTexts.backTooltip,
-        shortCuts: ['⌘', /*#__PURE__*/React.createElement(Icon, {
-          key: "hint-arrow-left",
-          size: 18,
-          color: theme.palette.white,
-          component: /*#__PURE__*/React.createElement(ArrowLeftM, null)
-        })]
-      },
-      label: getSectionLabel(),
-      onClick: goBack
-    }), (mergedItemsList == null ? void 0 : mergedItemsList.length) === 0 ? /*#__PURE__*/React.createElement(EmptyListMessage, {
-      buttonOnClick: function buttonOnClick() {
-        return resetCurrentSection();
-      },
-      listActions: listActions,
-      hasCurrentSection: isSection,
-      texts: allTexts,
-      isActionSection: isActionSection,
-      currentSection: currentSection,
-      searchQuery: searchQuery,
-      emptyListIcon: emptyListIcon,
-      noResultsIcon: noResultsIcon,
-      emptyStateComponent: emptyStateComponent,
-      noResultsComponent: noResultsComponent
-    }) : /*#__PURE__*/React.createElement(S.StyledScrollbar, _extends({
-      withSectionHeader: isSection,
-      maxHeight: listHeight,
-      "data-maxheight": listHeight,
-      onScroll: handleScroll,
-      absolute: true,
-      withDnd: false,
-      ref: scrollBarRef
-    }, scrollbarProps), /*#__PURE__*/React.createElement(S.ScrollContent, null, /*#__PURE__*/React.createElement(ListContextProvider, null, /*#__PURE__*/React.createElement(S.StyledList, {
-      width: "100%",
-      "data-listheight": listHeight,
-      height: listHeight,
-      maxHeight: listHeight,
-      itemCount: mergedItemsList.length,
-      itemSize: getItemSize,
-      itemData: itemData,
-      style: LIST_STYLE,
-      ref: listRef
-    }, function (props) {
-      return ItemPickerListRow(props);
-    })))));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        shortCuts: ["⌘", /* @__PURE__ */ jsx(Icon, { size: 18, color: theme.palette.white, component: /* @__PURE__ */ jsx(ArrowLeftM, {}) }, "hint-arrow-left")]
+      }, label: getSectionLabel(), onClick: goBack }),
+      mergedItemsList?.length === 0 ? /* @__PURE__ */ jsx(EmptyListMessage, { buttonOnClick: () => resetCurrentSection(), listActions, hasCurrentSection: isSection, texts: allTexts, isActionSection, currentSection, searchQuery, emptyListIcon, noResultsIcon, emptyStateComponent, noResultsComponent }) : /* @__PURE__ */ jsx(StyledScrollbar, { withSectionHeader: isSection, maxHeight: listHeight, "data-maxheight": listHeight, onScroll: handleScroll, absolute: true, withDnd: false, ref: scrollBarRef, ...scrollbarProps, children: /* @__PURE__ */ jsx(ScrollContent, { children: /* @__PURE__ */ jsx(ListContextProvider, { children: /* @__PURE__ */ jsx(StyledList, { width: "100%", "data-listheight": listHeight, height: listHeight, maxHeight: listHeight, itemCount: mergedItemsList.length, itemSize: getItemSize, itemData, style: LIST_STYLE, ref: listRef, children: (props) => ItemPickerListRow(props) }) }) }) })
+    ] });
   }, [allTexts, currentSection, currentPath, getItemSize, handleScroll, isLoading, isLoadingError, isLoadingItems, itemData, listHeight, goBack, mergedItemsList.length, scrollbarProps, searchQuery, listWrapperHeight]);
-  useEffect(function () {
+  useEffect(() => {
     setTimeout(focusSearchInput, 0);
   }, [isLoading, isLoadingItems, isLoadingMore, focusSearchInput]);
-  useEffect(function () {
+  useEffect(() => {
     if (isVisible) {
       resetCurrentSection();
       clearSearchQuery();
-      setSearchByParamConfig(undefined);
+      setSearchByParamConfig(void 0);
       setTimeout(focusSearchInput, 0);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isVisible, focusSearchInput]);
-  useEffect(function () {
+  useEffect(() => {
     if (scrollBarRef.current && listRef.current) {
       scrollBarRef.current.scrollTo({
         top: 0
@@ -286,16 +240,15 @@ var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
       setTimeout(focusSearchInput, 0);
     }
   }, [searchByAction, searchByParamConfig, searchInAction, searchInItem, currentSection, focusSearchInput]);
-  useEffect(function () {
+  useEffect(() => {
     listRef.current && listRef.current.resetAfterIndex(0);
   }, [mergedItemsList]);
   useKeyboardShortcuts({
-    ArrowLeft: function ArrowLeft(event) {
-      var _combinedScrollRef$cu;
-      if (!((_combinedScrollRef$cu = combinedScrollRef.current) != null && _combinedScrollRef$cu.offsetParent)) {
+    ArrowLeft: (event) => {
+      if (!combinedScrollRef.current?.offsetParent) {
         return;
       }
-      var isMetaOrCtrlKey = event.metaKey || event.ctrlKey;
+      const isMetaOrCtrlKey = event.metaKey || event.ctrlKey;
       if (isMetaOrCtrlKey) {
         event.preventDefault();
         event.stopPropagation();
@@ -303,9 +256,8 @@ var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
         return;
       }
     },
-    Escape: function Escape(event) {
-      var _combinedScrollRef$cu2;
-      if (!((_combinedScrollRef$cu2 = combinedScrollRef.current) != null && _combinedScrollRef$cu2.offsetParent)) {
+    Escape: (event) => {
+      if (!combinedScrollRef.current?.offsetParent) {
         return;
       }
       if (searchQuery) {
@@ -317,40 +269,20 @@ var ItemPickerListInner = function ItemPickerListInner(_ref, forwardedRef) {
       if (searchByParamConfig) {
         event.preventDefault();
         event.stopPropagation();
-        setSearchByParamConfig(undefined);
+        setSearchByParamConfig(void 0);
       }
     }
   });
-  var containerHeightMode = !containerHeight || typeof containerHeight === 'object' ? 'preset' : containerHeight;
-  return /*#__PURE__*/React.createElement(S.ListContainer, _extends({
-    "data-testid": "ds-item-picker-dropdown",
-    ref: combinedScrollRef,
-    onKeyDown: handleKeyDown,
-    containerHeightMode: containerHeightMode,
-    wrapperHeight: outerWrapperHeight
-  }, htmlAttributes), includeSearchBar && /*#__PURE__*/React.createElement(ListSearchInput, {
-    clearSearchQuery: clearSearchQuery,
-    searchByParamConfig: searchByParamConfig,
-    setSearchByParamConfig: setSearchByParamConfig,
-    searchBarProps: searchBarProps,
-    debouncedChangeSearchQuery: debouncedSearchQueryChange,
-    inputRef: inputRef,
-    changeLocalSearchQueryRef: changeLocalSearchQueryRef,
-    allTexts: allTexts,
-    canPerformListActions: canPerformListActions
-  }), /*#__PURE__*/React.createElement(S.ListWrapper, {
-    "data-testid": "list-wrapper",
-    ref: scrollContainRef,
-    wrapperHeight: listWrapperHeight,
-    centered: showMessage,
-    offsetSpace: offsetSpace
-  }, listContent), includeFooter && /*#__PURE__*/React.createElement(ItemPickerListFooter, {
-    "data-testid": "footer-wrapper",
-    texts: allTexts,
-    onRefresh: handleRefresh,
-    refreshButtonProps: {
+  const containerHeightMode = !containerHeight || typeof containerHeight === "object" ? "preset" : containerHeight;
+  return /* @__PURE__ */ jsxs(ListContainer, { "data-testid": "ds-item-picker-dropdown", ref: combinedScrollRef, onKeyDown: handleKeyDown, containerHeightMode, wrapperHeight: outerWrapperHeight, ...htmlAttributes, children: [
+    includeSearchBar && /* @__PURE__ */ jsx(ListSearchInput, { clearSearchQuery, searchByParamConfig, setSearchByParamConfig, searchBarProps, debouncedChangeSearchQuery: debouncedSearchQueryChange, inputRef, changeLocalSearchQueryRef, allTexts, canPerformListActions }),
+    /* @__PURE__ */ jsx(ListWrapper, { "data-testid": "list-wrapper", ref: scrollContainRef, wrapperHeight: listWrapperHeight, centered: showMessage, offsetSpace, children: listContent }),
+    includeFooter && /* @__PURE__ */ jsx(ItemPickerListFooter, { "data-testid": "footer-wrapper", texts: allTexts, onRefresh: handleRefresh, refreshButtonProps: {
       disabled: !refreshEnabled
-    }
-  }));
+    } })
+  ] });
+};
+const ItemPickerList = forwardRef(ItemPickerListInner);
+export {
+  ItemPickerList
 };
-export var ItemPickerList = /*#__PURE__*/forwardRef(ItemPickerListInner);

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

@@ -1,31 +1,31 @@
-import { VariableSizeList } from 'react-window';
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {
+import { VariableSizeList } from '../../../../../../config/vitest/__mocks__/reactWindowMock.js';
+export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {
     wrapperHeight?: number;
     centered?: boolean;
     offsetSpace: number;
 }, never>;
-export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const ListContainer: import('styled-components').StyledComponent<"div", any, {
     containerHeightMode?: "fillSpace" | "fitContent" | "preset";
     wrapperHeight: string;
 }, never>;
-export declare const SearchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyStates: import("styled-components").StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import("@synerise/ds-empty-states").EmptyStatesProps) => React.JSX.Element, any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapperRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapperLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScrollContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {
+export declare const SearchWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EmptyStates: import('styled-components').StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import('@synerise/ds-empty-states').EmptyStatesProps) => React.JSX.Element, any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapperRight: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FooterWrapperLeft: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ScrollContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollbar: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(import('@synerise/ds-scrollbar').ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, {
     withSectionHeader?: boolean;
 }, never>;
-export declare const StyledList: import("styled-components").StyledComponent<typeof VariableSizeList, any, {
+export declare const StyledList: import('styled-components').StyledComponent<typeof VariableSizeList, any, {
     maxHeight?: number;
 }, never>;
-export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {}, never>;
-export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const Skeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {}, never>;
+export declare const SkeletonWrapper: import('styled-components').StyledComponent<"div", any, {
     wrapperHeight?: number;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SectionTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InfiniteLoaderItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Loader: import("styled-components").StyledComponent<({ size, label, labelPosition, color, percent, percentFormatter, text, fontSize, mode, className, }: import("@synerise/ds-loader/dist/Loader.types").LoaderProps) => React.JSX.Element, any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SectionTitleWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InfiniteLoaderItemWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Loader: import('styled-components').StyledComponent<({ size, label, labelPosition, color, percent, percentFormatter, text, fontSize, mode, className, }: import('@synerise/ds-loader/dist/Loader.types').LoaderProps) => React.JSX.Element, any, {}, never>;