@synerise/ds-item-picker 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.0.0...@synerise/ds-item-picker@1.0.1) (2025-03-18)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
+
+
+
+
 ## [0.16.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.16.2...@synerise/ds-item-picker@0.16.3) (2025-03-10)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/ItemPicker.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ItemPickerProps } from './ItemPicker.types';
-declare const _default: React.FC<import("react-intl").WithIntlProps<ItemPickerProps>> & {
-    WrappedComponent: React.ComponentType<ItemPickerProps>;
-};
-export default _default;
+import { ItemPickerProps } from './components/ItemPickerLegacy/ItemPickerLegacy.types';
+import type { BaseItemType, BaseSectionType, ItemPickerProps as ItemPickerPropsNew } from './components/ItemPickerNew/ItemPickerNew.types';
+declare const ItemPicker: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>(props: ItemPickerProps<import("@synerise/ds-list-item").ListItemProps> | ItemPickerPropsNew<ItemType, SectionType>) => React.JSX.Element;
+export default ItemPicker;

package/dist/ItemPicker.js

@@ -1,149 +1,18 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useState, useCallback, useMemo, useRef } from 'react';
-import Label from '@synerise/ds-input/dist/Label/Label';
-import { Description } from '@synerise/ds-typography';
-import Dropdown from '@synerise/ds-dropdown';
-import { injectIntl } from 'react-intl';
-import * as S from './ItemPicker.styles';
-import ItemPickerDropdown from './ItemPickerDropdown/ItemPickerDropdown';
-import Trigger from './ItemPickerTrigger/Trigger';
-var ItemPicker = function ItemPicker(_ref) {
-  var dataSource = _ref.dataSource,
-    intl = _ref.intl,
-    onChange = _ref.onChange,
-    onClear = _ref.onClear,
-    placeholder = _ref.placeholder,
-    _ref$changeButtonLabe = _ref.changeButtonLabel,
-    changeButtonLabel = _ref$changeButtonLabe === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.CHANGE'
-    }) : _ref$changeButtonLabe,
-    _ref$clear = _ref.clear,
-    clear = _ref$clear === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.CLEAR'
-    }) : _ref$clear,
-    _ref$clearConfirmTitl = _ref.clearConfirmTitle,
-    clearConfirmTitle = _ref$clearConfirmTitl === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.CLEAR-CONFIRM'
-    }) : _ref$clearConfirmTitl,
-    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,
-    _ref$noResults = _ref.noResults,
-    noResults = _ref$noResults === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.NO-RESULTS',
-      defaultMessage: 'No results'
-    }) : _ref$noResults,
-    _ref$noText = _ref.noText,
-    noText = _ref$noText === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.NO-TEXT',
-      defaultMessage: 'No'
-    }) : _ref$noText,
-    placeholderIcon = _ref.placeholderIcon,
-    _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.SEARCH',
-      defaultMessage: 'Search'
-    }) : _ref$searchPlaceholde,
-    searchBarProps = _ref.searchBarProps,
-    hideSearchBar = _ref.hideSearchBar,
-    selectedItem = _ref.selectedItem,
-    tooltip = _ref.tooltip,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    _ref$yesText = _ref.yesText,
-    yesText = _ref$yesText === void 0 ? intl.formatMessage({
-      id: 'DS.ITEM-PICKER.YES-TEXT',
-      defaultMessage: 'Yes'
-    }) : _ref$yesText,
-    withClearConfirmation = _ref.withClearConfirmation,
-    scrollbarProps = _ref.scrollbarProps,
-    informationCardTooltipProps = _ref.informationCardTooltipProps;
-  var _useState = useState(false),
-    dropdownOpened = _useState[0],
-    setDropdownOpened = _useState[1];
-  var clearSearchBarValue = useRef();
-  var onVisibilityChange = function onVisibilityChange(state) {
-    setDropdownOpened(state);
-    if (state && typeof onFocus === 'function') {
-      onFocus();
-    }
-    if (!state) {
-      clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
-      if (typeof onBlur === 'function') {
-        onBlur();
-      }
-    }
-  };
-  var openDropdown = useCallback(function () {
-    setDropdownOpened(true);
-    typeof onFocus === 'function' && onFocus();
-  }, [setDropdownOpened, onFocus]);
-  var closeDropdown = useCallback(function () {
-    setDropdownOpened(false);
-    typeof onBlur === 'function' && onBlur();
-  }, [setDropdownOpened, onBlur]);
-  var dropdownOverlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(ItemPickerDropdown, {
-      hideSearchBar: hideSearchBar,
-      searchBarProps: searchBarProps,
-      clearSearchQuery: clearSearchBarValue.current,
-      onChange: onChange,
-      dataSource: dataSource,
-      placeholder: searchPlaceholder,
-      closeDropdown: closeDropdown,
-      noResults: noResults,
-      dropdownVisibleRows: dropdownVisibleRows,
-      dropdownRowHeight: dropdownRowHeight,
-      dropdownBottomAction: dropdownBottomAction,
-      closeOnBottomAction: closeOnBottomAction,
-      isDropdownOpened: dropdownOpened,
-      scrollbarProps: scrollbarProps
-    });
-  }, [searchBarProps, onChange, dataSource, searchPlaceholder, closeDropdown, noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, scrollbarProps, hideSearchBar]);
-  var renderTrigger = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Trigger, {
-      clear: clear,
-      selected: selectedItem,
-      onClear: onClear,
-      opened: dropdownOpened,
-      placeholder: placeholder,
-      placeholderIcon: placeholderIcon,
-      error: error,
-      disabled: disabled,
-      openDropdown: openDropdown,
-      closeDropdown: closeDropdown,
-      size: size,
-      changeButtonLabel: changeButtonLabel,
-      withChangeButton: !withClearConfirmation,
-      clearConfirmTitle: clearConfirmTitle,
-      yesText: yesText,
-      noText: noText,
-      withClearConfirmation: Boolean(withClearConfirmation),
-      informationCardTooltipProps: informationCardTooltipProps
-    });
-  }, [clear, selectedItem, onClear, dropdownOpened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel, withClearConfirmation, clearConfirmTitle, yesText, noText, informationCardTooltipProps]);
-  return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
-    className: "ds-items-picker",
-    disabled: disabled
-  }, label && /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    tooltip: tooltip
-  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
-    visible: dropdownOpened,
-    disabled: disabled,
-    trigger: ['click'],
-    overlay: dropdownOverlay,
-    onVisibleChange: onVisibilityChange
-  }, dropdownProps), renderTrigger), error && errorMessage && /*#__PURE__*/React.createElement(S.Error, null, errorMessage), description && /*#__PURE__*/React.createElement(Description, null, description));
+import React from 'react';
+import { ItemPickerNew } from './components/ItemPickerNew/ItemPickerNew';
+import ItemPickerLegacy from './components/ItemPickerLegacy/ItemPickerLegacy';
+var isNewItemPicker = function isNewItemPicker(props) {
+  return 'isNewVersion' in props && props.isNewVersion;
 };
-export default injectIntl(ItemPicker);
+var ItemPicker = function ItemPicker(props) {
+  if (isNewItemPicker(props)) {
+    return /*#__PURE__*/React.createElement(ItemPickerNew, _extends({
+      key: "ds-item-picker"
+    }, props));
+  }
+  return /*#__PURE__*/React.createElement(ItemPickerLegacy, _extends({
+    key: "ds-item-picker-legacy"
+  }, props));
+};
+export default ItemPicker;

package/dist/{ItemPickerDropdown → components/ItemPickerDropdown}/ItemPickerDropdown.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ItemPickerDropdownProps } from './ItemPickerDropdown.types';
+import type { 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/{ItemPickerDropdown → components/ItemPickerDropdown}/ItemPickerDropdown.style.js

@@ -3,26 +3,26 @@ import Scrollbar from '@synerise/ds-scrollbar';
 import DSListItem from '@synerise/ds-list-item';
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__DropdownWrapper",
-  componentId: "sc-jxq36p-0"
+  componentId: "sc-1y4j72s-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
 export var ListItem = styled(DSListItem).withConfig({
   displayName: "ItemPickerDropdownstyle__ListItem",
-  componentId: "sc-jxq36p-1"
+  componentId: "sc-1y4j72s-1"
 })(["min-width:auto;"]);
 export var ListWrapper = styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__ListWrapper",
-  componentId: "sc-jxq36p-2"
+  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({
   displayName: "ItemPickerDropdownstyle__StyledScrollbar",
-  componentId: "sc-jxq36p-3"
+  componentId: "sc-1y4j72s-3"
 })(["&&{.scrollbar-container{padding-right:8px;}}"]);
 export var DropdownFooter = styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__DropdownFooter",
-  componentId: "sc-jxq36p-4"
+  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) {
@@ -30,5 +30,5 @@ export var DropdownFooter = styled.div.withConfig({
 });
 export var BottomActionWrapper = styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__BottomActionWrapper",
-  componentId: "sc-jxq36p-5"
+  componentId: "sc-1y4j72s-5"
 })([""]);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ItemPickerProps } from './ItemPickerLegacy.types';
+/**
+ * @deprecated - use new ItemPicker
+ */
+declare 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, size, yesText, withClearConfirmation, scrollbarProps, informationCardTooltipProps, hideSearchBar, }: ItemPickerProps) => React.JSX.Element;
+export default ItemPickerLegacy;

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js

@@ -0,0 +1,157 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { Label } from '@synerise/ds-input';
+import { Description } from '@synerise/ds-typography';
+import Dropdown from '@synerise/ds-dropdown';
+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,
+    _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) {
+    setDropdownOpened(state);
+    if (state && typeof onFocus === 'function') {
+      onFocus();
+    }
+    if (!state) {
+      clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
+      if (typeof onBlur === 'function') {
+        onBlur();
+      }
+    }
+  };
+  var openDropdown = useCallback(function () {
+    setDropdownOpened(true);
+    typeof onFocus === 'function' && onFocus();
+  }, [setDropdownOpened, onFocus]);
+  var closeDropdown = useCallback(function () {
+    setDropdownOpened(false);
+    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
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    tooltip: tooltip
+  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    visible: dropdownOpened,
+    disabled: disabled,
+    trigger: ['click'],
+    overlay: dropdownOverlay,
+    onVisibleChange: onVisibilityChange
+  }, dropdownProps), renderTrigger), error && errorMessage && /*#__PURE__*/React.createElement(S.Error, null, errorMessage), description && /*#__PURE__*/React.createElement(Description, null, description));
+};
+export default ItemPickerLegacy;

package/dist/{ItemPicker.types.d.ts → components/ItemPickerLegacy/ItemPickerLegacy.types.d.ts}

@@ -1,15 +1,15 @@
 import type { ReactNode } from 'react';
 import type { IntlShape } from 'react-intl';
-import type { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
+import type { SearchBarProps } from '@synerise/ds-search-bar';
 import type { DropdownProps } from '@synerise/ds-dropdown';
 import type { InformationCardTooltipProps } from '@synerise/ds-information-card';
 import type { ListItemProps } from '@synerise/ds-list-item';
 import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
 export type ItemPickerSize = 'small' | 'large';
-export type ItemPickerProps = {
-    dataSource: ListItemProps[];
-    intl: IntlShape;
-    onChange: (item: ListItemProps) => void;
+export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
+    dataSource: ItemType[];
+    intl?: IntlShape;
+    onChange: (item: ItemType) => void;
     onClear?: () => void;
     placeholder: ReactNode;
     changeButtonLabel?: ReactNode;
@@ -32,8 +32,8 @@ export type ItemPickerProps = {
     placeholderIcon?: ReactNode;
     searchPlaceholder?: string;
     searchBarProps?: Partial<SearchBarProps>;
+    selectedItem?: ItemType | undefined;
     hideSearchBar?: boolean;
-    selectedItem?: ListItemProps | undefined;
     size?: ItemPickerSize;
     tooltip?: ReactNode;
     informationCardTooltipProps?: Omit<InformationCardTooltipProps, 'children'>;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { BaseItemType, BaseSectionType } from '../ItemPickerNew/ItemPickerNew.types';
+import type { ItemPickerListProps } from './ItemPickerList.types';
+export declare const ItemPickerList: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, recents, sections, actions, texts, isLoading, selectedItem, scrollbarProps, searchBarProps, showItemsSectionLabel, onItemSelect, onRefresh, containerHeight, isVisible, onSectionChange, containerRef: forwardedRef, includeFooter, includeSearchBar, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>) => React.JSX.Element;
+export default ItemPickerList;