@synerise/ds-item-picker 1.16.2 → 1.17.1

package/dist/components/ItemPickerList/components/ListSearchInput.js

@@ -1,66 +1,51 @@
-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, useEffect, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { SearchM } from '@synerise/ds-icon';
-import * as S from '../ItemPickerList.styles';
-var CLEAR_TOOLTIP_PROPS = {
-  shortCuts: 'ESC'
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { SearchM } from "@synerise/ds-icon";
+import { SearchWrapper } from "../ItemPickerList.styles.js";
+const CLEAR_TOOLTIP_PROPS = {
+  shortCuts: "ESC"
 };
-export var ListSearchInput = function ListSearchInput(_ref) {
-  var searchByParamConfig = _ref.searchByParamConfig,
-    changeLocalSearchQueryRef = _ref.changeLocalSearchQueryRef,
-    clearSearchQuery = _ref.clearSearchQuery,
-    setSearchByParamConfig = _ref.setSearchByParamConfig,
-    debouncedChangeSearchQuery = _ref.debouncedChangeSearchQuery,
-    searchBarProps = _ref.searchBarProps,
-    allTexts = _ref.allTexts,
-    inputRef = _ref.inputRef,
-    canPerformListActions = _ref.canPerformListActions;
-  var theme = useTheme();
-  var _useState = useState(''),
-    localSearchQuery = _useState[0],
-    setLocalSearchQuery = _useState[1];
-  var handleSearchChange = useCallback(function (value) {
+const ListSearchInput = ({
+  searchByParamConfig,
+  changeLocalSearchQueryRef,
+  clearSearchQuery,
+  setSearchByParamConfig,
+  debouncedChangeSearchQuery,
+  searchBarProps,
+  allTexts,
+  inputRef,
+  canPerformListActions
+}) => {
+  const theme = useTheme();
+  const [localSearchQuery, setLocalSearchQuery] = useState("");
+  const handleSearchChange = useCallback((value) => {
     setLocalSearchQuery(value);
     debouncedChangeSearchQuery(value);
   }, [debouncedChangeSearchQuery]);
-  var handleInputRef = useCallback(function (ref) {
-    var localRef = inputRef;
+  const handleInputRef = useCallback((ref) => {
+    const localRef = inputRef;
     localRef.current = ref.current;
   }, [inputRef]);
-  var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === 'Backspace' && !localSearchQuery) {
-      setSearchByParamConfig(undefined);
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace" && !localSearchQuery) {
+      setSearchByParamConfig(void 0);
     }
   };
-  var handleClearInput = function handleClearInput() {
+  const handleClearInput = () => {
     if (localSearchQuery) {
       clearSearchQuery();
       return;
     }
-    setSearchByParamConfig(undefined);
+    setSearchByParamConfig(void 0);
   };
-  useEffect(function () {
-    var ref = changeLocalSearchQueryRef;
+  useEffect(() => {
+    const ref = changeLocalSearchQueryRef;
     ref.current = setLocalSearchQuery;
   }, [changeLocalSearchQueryRef]);
-  return /*#__PURE__*/React.createElement(S.SearchWrapper, {
-    "data-testid": "search-wrapper"
-  }, /*#__PURE__*/React.createElement(Dropdown.SearchInput, _extends({
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: (searchByParamConfig == null ? void 0 : searchByParamConfig.icon) || /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    }),
-    placeholder: canPerformListActions ? allTexts.searchPlaceholder : allTexts.basicSearchPlaceholder
-  }, searchBarProps, {
-    valuePrefix: searchByParamConfig == null ? void 0 : searchByParamConfig.paramKeyLabel,
-    onKeyDown: handleKeyDown,
-    clearTooltip: allTexts.clearSearchTooltip,
-    clearTooltipProps: CLEAR_TOOLTIP_PROPS,
-    onClearInput: handleClearInput,
-    handleInputRef: handleInputRef,
-    onSearchChange: handleSearchChange,
-    value: localSearchQuery
-  })));
-};
+  return /* @__PURE__ */ jsx(SearchWrapper, { "data-testid": "search-wrapper", children: /* @__PURE__ */ jsx(Dropdown.SearchInput, { iconLeft: /* @__PURE__ */ jsx(Icon, { component: searchByParamConfig?.icon || /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }), placeholder: canPerformListActions ? allTexts.searchPlaceholder : allTexts.basicSearchPlaceholder, ...searchBarProps, valuePrefix: searchByParamConfig?.paramKeyLabel, onKeyDown: handleKeyDown, clearTooltip: allTexts.clearSearchTooltip, clearTooltipProps: CLEAR_TOOLTIP_PROPS, onClearInput: handleClearInput, handleInputRef, onSearchChange: handleSearchChange, value: localSearchQuery }) });
+};
+export {
+  ListSearchInput
+};

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

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 export declare const LoadingItem: ({ label }: {
     label: ReactNode;
 }) => React.JSX.Element;

package/dist/components/ItemPickerList/components/LoadingItem.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Loader } from '../ItemPickerList.styles';
-export var LoadingItem = function LoadingItem(_ref) {
-  var label = _ref.label;
-  return /*#__PURE__*/React.createElement(Loader, {
-    size: "M",
-    label: label
-  });
-};
+import { jsx } from "react/jsx-runtime";
+import { Loader } from "../ItemPickerList.styles.js";
+const LoadingItem = ({
+  label
+}) => {
+  return /* @__PURE__ */ jsx(Loader, { size: "M", label });
+};
+export {
+  LoadingItem
+};

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

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 export declare const NoMoreItem: ({ label }: {
     label: ReactNode;
 }) => React.JSX.Element;

package/dist/components/ItemPickerList/components/NoMoreItem.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import Alert from '@synerise/ds-alert';
-export var NoMoreItem = function NoMoreItem(_ref) {
-  var label = _ref.label;
-  return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
-    type: "info",
-    message: label
-  });
-};
+import { jsx } from "react/jsx-runtime";
+import Alert from "@synerise/ds-alert";
+const NoMoreItem = ({
+  label
+}) => {
+  return /* @__PURE__ */ jsx(Alert.InlineAlert, { type: "info", message: label });
+};
+export {
+  NoMoreItem
+};

package/dist/components/ItemPickerList/components/index.js

@@ -1,6 +1,14 @@
-export * from './EmptyListMessage';
-export * from './ErrorMessage';
-export * from './InfiniteLoaderItem';
-export * from './ItemPickerListFooter';
-export * from './ItemPickerListRow';
-export * from './ItemPickerListSkeleton';
+import { EmptyListMessage } from "./EmptyListMessage.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { InfiniteLoaderItem } from "./InfiniteLoaderItem.js";
+import { ItemPickerListFooter } from "./ItemPickerListFooter.js";
+import { ItemPickerListRow } from "./ItemPickerListRow.js";
+import { ItemPickerListSkeleton } from "./ItemPickerListSkeleton.js";
+export {
+  EmptyListMessage,
+  ErrorMessage,
+  InfiniteLoaderItem,
+  ItemPickerListFooter,
+  ItemPickerListRow,
+  ItemPickerListSkeleton
+};

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

@@ -1,5 +1,5 @@
-import type { CSSProperties } from 'react';
-import type { BaseItemType } from '../ItemPickerNew/types/baseItemSectionType.types';
+import { CSSProperties } from 'react';
+import { BaseItemType } from '../ItemPickerNew/types/baseItemSectionType.types';
 export declare const LIST_STYLE: CSSProperties;
 export declare const ITEM_SIZE: {
     large: number;

package/dist/components/ItemPickerList/constants.js

@@ -1,33 +1,54 @@
-var _ITEM_SIZE;
-import { itemSizes } from '@synerise/ds-list-item';
-export var LIST_STYLE = {
-  overflowX: 'unset',
-  overflowY: 'unset'
+import { itemSizes } from "@synerise/ds-list-item";
+const LIST_STYLE = {
+  overflowX: "unset",
+  overflowY: "unset"
 };
-export var ITEM_SIZE = (_ITEM_SIZE = {}, _ITEM_SIZE[itemSizes.LARGE] = 50, _ITEM_SIZE[itemSizes.DEFAULT] = 32, _ITEM_SIZE.title = 32, _ITEM_SIZE);
-export var DEFAULT_HEIGHT = 420;
-export var DEFAULT_HEIGHT_BELOW_THRESHOLD = 350;
-export var DEFAULT_HEIGHT_THRESHOLD = 800;
-export var SECTION_HEADER_HEIGHT = 53;
-export var SEARCH_BAR_HEIGHT = 53;
-export var FOOTER_HEIGHT = 48;
-export var LIST_INNER_PADDING = 8;
-export var FIRST_PAGE = 0;
-export var SECOND_PAGE = 1;
-export var ITEMS_PER_PAGE = 150;
-export var ITEMS_PER_SECTION = 4;
-export var ITEMS_PER_SECTION_IN_SEARCH = 4;
-export var TITLE_PATH_SEPARATOR = ' - ';
-var counter = 0;
-var keyMap = new WeakMap();
-export var GET_ITEM_KEY = function GET_ITEM_KEY(item) {
-  if (item != null && item.id) {
+const ITEM_SIZE = {
+  [itemSizes.LARGE]: 50,
+  [itemSizes.DEFAULT]: 32,
+  title: 32
+};
+const DEFAULT_HEIGHT = 420;
+const DEFAULT_HEIGHT_BELOW_THRESHOLD = 350;
+const DEFAULT_HEIGHT_THRESHOLD = 800;
+const SECTION_HEADER_HEIGHT = 53;
+const SEARCH_BAR_HEIGHT = 53;
+const FOOTER_HEIGHT = 48;
+const LIST_INNER_PADDING = 8;
+const FIRST_PAGE = 0;
+const SECOND_PAGE = 1;
+const ITEMS_PER_PAGE = 150;
+const ITEMS_PER_SECTION = 4;
+const ITEMS_PER_SECTION_IN_SEARCH = 4;
+const TITLE_PATH_SEPARATOR = " - ";
+let counter = 0;
+const keyMap = /* @__PURE__ */ new WeakMap();
+const GET_ITEM_KEY = (item) => {
+  if (item?.id) {
     return item.id;
   }
-  var key = keyMap.get(item);
+  let key = keyMap.get(item);
   if (!key) {
-    key = "__item_" + counter++;
+    key = `__item_${counter++}`;
     keyMap.set(item, key);
   }
   return key;
-};
+};
+export {
+  DEFAULT_HEIGHT,
+  DEFAULT_HEIGHT_BELOW_THRESHOLD,
+  DEFAULT_HEIGHT_THRESHOLD,
+  FIRST_PAGE,
+  FOOTER_HEIGHT,
+  GET_ITEM_KEY,
+  ITEMS_PER_PAGE,
+  ITEMS_PER_SECTION,
+  ITEMS_PER_SECTION_IN_SEARCH,
+  ITEM_SIZE,
+  LIST_INNER_PADDING,
+  LIST_STYLE,
+  SEARCH_BAR_HEIGHT,
+  SECOND_PAGE,
+  SECTION_HEADER_HEIGHT,
+  TITLE_PATH_SEPARATOR
+};

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

@@ -1,3 +1,8 @@
-export * from './useItemsInSections';
-export * from './useListHeight';
-export * from './useFlattenFolders';
+import { useItemsInSections } from "./useItemsInSections.js";
+import { useListHeight } from "./useListHeight.js";
+import { useFlattenFolders } from "./useFlattenFolders.js";
+export {
+  useFlattenFolders,
+  useItemsInSections,
+  useListHeight
+};

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

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import type { BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
+import { ReactNode } from 'react';
+import { BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
 type NestedFoldersProps<SectionType extends BaseSectionType | undefined> = {
     currentSection?: SectionType extends BaseSectionType ? BaseSectionTypeWithFolders<SectionType> : undefined;
     sections?: SectionType extends BaseSectionType ? BaseSectionTypeWithFolders<SectionType>[] : undefined;

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

@@ -1,81 +1,60 @@
-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 { useMemo } from 'react';
-
-// Concrete return types (use BaseSectionType to keep the return shape assignable)
-
-var _mapParent = function mapParent(item, parent) {
+import { useMemo } from "react";
+const mapParent = (item, parent) => {
   if (item.folders) {
-    return [].concat(item.folders.flatMap(function (f) {
-      return _mapParent(f, item);
-    }), [{
+    return [...item.folders.flatMap((f) => mapParent(f, item)), {
       id: item.id,
-      parent: parent
-    }]);
+      parent
+    }];
   }
   return [{
     id: item.id,
-    parent: parent
+    parent
   }];
 };
-var _getFolders = function getFolders(folder, titles) {
-  var _folder$folders;
-  var newPath = titles ? [].concat(titles, [folder.text]) : [folder.text];
-  if ((_folder$folders = folder.folders) != null && _folder$folders.length) {
-    return folder.folders.flatMap(function (f) {
-      return _getFolders(f, newPath);
-    });
+const getFolders = (folder, titles) => {
+  const newPath = titles ? [...titles, folder.text] : [folder.text];
+  if (folder.folders?.length) {
+    return folder.folders.flatMap((f) => getFolders(f, newPath));
   }
-  return [_extends({}, folder, {
+  return [{
+    ...folder,
     titles: newPath
-  })];
+  }];
 };
-export var useFlattenFolders = function useFlattenFolders(_ref) {
-  var _allItemFolders$find;
-  var currentSection = _ref.currentSection,
-    sections = _ref.sections;
-  var folderParentMap = useMemo(function () {
-    return sections == null ? void 0 : sections.flatMap(function (section) {
-      return section.folders ? section.folders.flatMap(function (f) {
-        return _mapParent(f);
-      }) : [];
-    });
+const useFlattenFolders = ({
+  currentSection,
+  sections
+}) => {
+  const folderParentMap = useMemo(() => {
+    return sections?.flatMap((section) => section.folders ? section.folders.flatMap((f) => mapParent(f)) : []);
   }, [sections]);
-  var titlePathIndex = folderParentMap != null && folderParentMap.length ? 1 : 0;
-  var allItemFolders = useMemo(function () {
-    var mappedFolders = sections == null ? void 0 : sections.flatMap(function (section) {
-      return _getFolders(section);
-    });
-    return mappedFolders == null ? void 0 : mappedFolders.map(function (folder) {
-      var _folder$titles;
-      return _extends({}, folder, {
-        titles: (_folder$titles = folder.titles) == null ? void 0 : _folder$titles.slice(titlePathIndex)
-      });
-    });
+  const titlePathIndex = folderParentMap?.length ? 1 : 0;
+  const allItemFolders = useMemo(() => {
+    const mappedFolders = sections?.flatMap((section) => getFolders(section));
+    return mappedFolders?.map((folder) => ({
+      ...folder,
+      titles: folder.titles?.slice(titlePathIndex)
+    }));
   }, [sections, titlePathIndex]);
-  var childFolders = useMemo(function () {
-    var _currentSection$folde;
-    return currentSection == null || (_currentSection$folde = currentSection.folders) == null ? void 0 : _currentSection$folde.flatMap(function (folder) {
-      return _getFolders(folder);
-    });
+  const childFolders = useMemo(() => {
+    return currentSection?.folders?.flatMap((folder) => getFolders(folder));
   }, [currentSection]);
-  var parentFolder = useMemo(function () {
-    var _folderParentMap$find;
-    return currentSection && (folderParentMap == null || (_folderParentMap$find = folderParentMap.find(function (item) {
-      return item.id === currentSection.id;
-    })) == null ? void 0 : _folderParentMap$find.parent);
+  const parentFolder = useMemo(() => {
+    return currentSection && folderParentMap?.find((item) => item.id === currentSection.id)?.parent;
   }, [currentSection, folderParentMap]);
-  var currentTitlePath = allItemFolders == null || (_allItemFolders$find = allItemFolders.find(function (folder) {
-    return folder.id === (currentSection == null ? void 0 : currentSection.id);
-  })) == null ? void 0 : _allItemFolders$find.titles;
-  var currentFolders = useMemo(function () {
+  const currentTitlePath = allItemFolders?.find((folder) => folder.id === currentSection?.id)?.titles;
+  const currentFolders = useMemo(() => {
     return currentSection ? childFolders : allItemFolders;
   }, [allItemFolders, childFolders, currentSection]);
   return {
     allFolders: allItemFolders,
-    childFolders: childFolders,
-    parentFolder: parentFolder,
-    currentFolders: currentFolders,
-    currentSectionHasFolders: !!(childFolders != null && childFolders.length),
+    childFolders,
+    parentFolder,
+    currentFolders,
+    currentSectionHasFolders: !!childFolders?.length,
     currentPath: currentTitlePath
   };
-};
+};
+export {
+  useFlattenFolders
+};

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

@@ -1,7 +1,7 @@
-import type { ItemPickerListProps, OnLoadedData } from '../../ItemPickerNew/ItemPickerNew.types';
-import type { SearchByAction, SearchByParamConfig, SearchInAction } from '../../ItemPickerNew/types/actions.types';
-import type { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
-import type { ItemPickerListTexts } from '../../ItemPickerNew/types/itemPickerListTexts.types';
+import { ItemPickerListProps, OnLoadedData } from '../../ItemPickerNew/ItemPickerNew.types';
+import { SearchByAction, SearchByParamConfig, SearchInAction } from '../../ItemPickerNew/types/actions.types';
+import { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
+import { ItemPickerListTexts } from '../../ItemPickerNew/types/itemPickerListTexts.types';
 type ItemsInSectionsType<ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined> = {
     items: ItemPickerListProps<ItemType, SectionType>['items'];
     texts: ItemPickerListTexts;
@@ -19,11 +19,11 @@ type ItemsInSectionsType<ItemType extends BaseItemType, SectionType extends Base
 };
 export declare const useItemsInSections: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, texts, selectedItem, sections, recents, actions, searchQuery, handleItemSelect, onSectionChange, getItemKey, showItemsSectionLabel, changeSearchQuery, onLoadedData, }: ItemsInSectionsType<ItemType, SectionType>) => {
     currentSection: BaseSectionType | undefined;
-    currentPath: import("react").ReactNode[] | undefined;
+    currentPath: import('react').ReactNode[] | undefined;
     goBack: () => void;
     resetCurrentSection: () => void;
     setCurrentSection: (section?: SectionType | BaseSectionType) => void;
-    mergedItemsList: (import("@synerise/ds-list-item").ListItemProps | import("../ItemPickerList.types").TitleListItemProps)[];
+    mergedItemsList: (import('@synerise/ds-list-item').ListItemProps | import('../ItemPickerList.types').TitleListItemProps)[];
     isLoading: boolean;
     isLoadingMore: boolean;
     isLoadedAll: boolean;
@@ -35,7 +35,7 @@ export declare const useItemsInSections: <ItemType extends BaseItemType, Section
     refreshEnabled: boolean;
     searchByAction: SearchByAction | undefined;
     searchByParamConfig: SearchByParamConfig | undefined;
-    setSearchByParamConfig: import("react").Dispatch<import("react").SetStateAction<SearchByParamConfig | undefined>>;
+    setSearchByParamConfig: import('react').Dispatch<import('react').SetStateAction<SearchByParamConfig | undefined>>;
     listActions: boolean;
     searchInItem: ItemType | undefined;
     searchInAction: SearchInAction | undefined;