@synerise/ds-item-picker 0.11.63 → 0.12.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.12.0...@synerise/ds-item-picker@0.12.1) (2024-07-15)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
+
+
+
+
+# [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.11.63...@synerise/ds-item-picker@0.12.0) (2024-07-05)
+
+
+### Features
+
+* **item-picker:** swapped Menu.Item for ListItem ([cb90ba7](https://github.com/Synerise/synerise-design/commit/cb90ba7532bd091b44f62f9bd7394e789c16597e))
+
+
+
+
+
 ## [0.11.63](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.11.62...@synerise/ds-item-picker@0.11.63) (2024-07-02)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/dist/ItemPicker.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ItemPickerProps } from './ItemPicker.types';
 declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ItemPickerProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;

package/dist/ItemPicker.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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 * as React from 'react';
+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';
@@ -69,11 +69,11 @@ var ItemPicker = function ItemPicker(_ref) {
       withClearConfirmation = _ref.withClearConfirmation,
       scrollbarProps = _ref.scrollbarProps;
 
-  var _React$useState = React.useState(false),
-      dropdownOpened = _React$useState[0],
-      setDropdownOpened = _React$useState[1];
+  var _useState = useState(false),
+      dropdownOpened = _useState[0],
+      setDropdownOpened = _useState[1];
 
-  var clearSearchBarValue = React.useRef();
+  var clearSearchBarValue = useRef();
 
   var onVisibilityChange = function onVisibilityChange(state) {
     setDropdownOpened(state);
@@ -91,15 +91,15 @@ var ItemPicker = function ItemPicker(_ref) {
     }
   };
 
-  var openDropdown = React.useCallback(function () {
+  var openDropdown = useCallback(function () {
     setDropdownOpened(true);
     typeof onFocus === 'function' && onFocus();
   }, [setDropdownOpened, onFocus]);
-  var closeDropdown = React.useCallback(function () {
+  var closeDropdown = useCallback(function () {
     setDropdownOpened(false);
     typeof onBlur === 'function' && onBlur();
   }, [setDropdownOpened, onBlur]);
-  var dropdownOverlay = React.useMemo(function () {
+  var dropdownOverlay = useMemo(function () {
     return /*#__PURE__*/React.createElement(ItemPickerDropdown, {
       searchBarProps: searchBarProps,
       clearSearchQuery: clearSearchBarValue.current,
@@ -116,7 +116,7 @@ var ItemPicker = function ItemPicker(_ref) {
       scrollbarProps: scrollbarProps
     });
   }, [searchBarProps, onChange, dataSource, searchPlaceholder, closeDropdown, noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, scrollbarProps]);
-  var renderTrigger = React.useMemo(function () {
+  var renderTrigger = useMemo(function () {
     return /*#__PURE__*/React.createElement(Trigger, {
       clear: clear,
       selected: selectedItem,

package/dist/ItemPicker.types.d.ts

@@ -1,29 +1,29 @@
-import * as React from 'react';
-import { IntlShape } from 'react-intl';
-import { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
-import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.types';
-import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
-import { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
+import type { ReactNode } from 'react';
+import type { IntlShape } from 'react-intl';
+import type { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
+import type { DropdownProps } from '@synerise/ds-dropdown';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
 export type ItemPickerSize = 'small' | 'large';
 export type ItemPickerProps = {
-    dataSource: MenuItemProps[];
+    dataSource: ListItemProps[];
     intl: IntlShape;
-    onChange: (item: MenuItemProps) => void;
+    onChange: (item: ListItemProps) => void;
     onClear?: () => void;
-    placeholder: string | React.ReactNode;
-    changeButtonLabel?: string | React.ReactNode;
-    clear?: string | React.ReactNode;
+    placeholder: ReactNode;
+    changeButtonLabel?: ReactNode;
+    clear?: ReactNode;
     clearConfirmTitle?: string;
     closeOnBottomAction?: boolean;
-    description?: string | React.ReactNode;
+    description?: ReactNode;
     disabled?: boolean;
     dropdownBottomAction?: React.ReactNode;
     dropdownProps?: Partial<DropdownProps>;
     dropdownRowHeight?: number;
     dropdownVisibleRows?: number;
     error?: boolean;
-    errorMessage?: string | React.ReactNode;
-    label?: string | React.ReactNode;
+    errorMessage?: ReactNode;
+    label?: ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
     noResults?: string;
@@ -31,9 +31,9 @@ export type ItemPickerProps = {
     placeholderIcon?: React.ReactNode;
     searchPlaceholder?: string;
     searchBarProps?: Partial<SearchBarProps>;
-    selectedItem?: MenuItemProps | undefined;
+    selectedItem?: ListItemProps | undefined;
     size?: ItemPickerSize;
-    tooltip?: string | React.ReactNode;
+    tooltip?: ReactNode;
     withClearConfirmation?: boolean;
     yesText?: string;
     scrollbarProps?: ScrollbarAdditionalProps;

package/dist/ItemPickerDropdown/ItemPickerDropdown.d.ts

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

package/dist/ItemPickerDropdown/ItemPickerDropdown.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || 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 * as React from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import SearchBar from '@synerise/ds-search-bar';
-import Menu from '@synerise/ds-menu';
+import ListItem from '@synerise/ds-list-item';
 import Result from '@synerise/ds-result';
 import Icon, { SearchM } from '@synerise/ds-icon';
 import { SearchItems } from '@synerise/ds-search/dist/Elements';
@@ -29,15 +29,15 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
   var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
   var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
 
-  var _React$useState = React.useState(''),
-      searchQuery = _React$useState[0],
-      setSearchQuery = _React$useState[1];
+  var _useState = useState(''),
+      searchQuery = _useState[0],
+      setSearchQuery = _useState[1];
 
-  var _React$useState2 = React.useState(0),
-      scrollTop = _React$useState2[0],
-      setScrollTop = _React$useState2[1];
+  var _useState2 = useState(0),
+      scrollTop = _useState2[0],
+      setScrollTop = _useState2[1];
 
-  React.useEffect(function () {
+  useEffect(function () {
     if (clearSearchQuery && clearSearchQuery > 0) {
       setSearchQuery('');
     }
@@ -53,7 +53,7 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
     onChange(item);
   };
 
-  var filteredDataSource = React.useMemo(function () {
+  var filteredDataSource = useMemo(function () {
     return searchQuery ? dataSource.filter(function (item) {
       return item.text && String(item.text).toLowerCase().includes(searchQuery.toLowerCase());
     }) : dataSource;
@@ -66,7 +66,9 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
     return dropdownBottomAction && /*#__PURE__*/React.createElement(S.DropdownFooter, null, bottomAction);
   };
 
-  return /*#__PURE__*/React.createElement(S.DropdownWrapper, null, /*#__PURE__*/React.createElement(SearchBar, _extends({
+  return /*#__PURE__*/React.createElement(S.DropdownWrapper, {
+    "data-testid": "ds-item-picker-dropdown"
+  }, /*#__PURE__*/React.createElement(SearchBar, _extends({
     iconLeft: /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(SearchM, null)
     }),
@@ -77,14 +79,14 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
       return setSearchQuery('');
     },
     autofocus: isDropdownOpened
-  }, searchBarProps)), /*#__PURE__*/React.createElement(S.DSMenu, null, (filteredDataSource == null ? void 0 : filteredDataSource.length) === 0 && /*#__PURE__*/React.createElement(Result, {
+  }, 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(e) {
-      return setScrollTop(e.currentTarget.scrollTop);
+    onScroll: function onScroll(event) {
+      return setScrollTop(event.currentTarget.scrollTop);
     },
     style: {
       paddingRight: '8px'
@@ -93,7 +95,7 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
     data: filteredDataSource,
     highlight: (_searchBarProps$value = searchBarProps == null ? void 0 : searchBarProps.value) != null ? _searchBarProps$value : searchQuery,
     itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+      return /*#__PURE__*/React.createElement(ListItem, _extends({
         key: item == null ? void 0 : item.text
       }, item));
     },
@@ -107,7 +109,8 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
       scrollTop: scrollTop
     } // @ts-ignore
     ,
-    width: "100%"
+    width: "100%",
+    renderInMenu: false
   }))), renderBottomAction());
 };
 

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import Menu from '@synerise/ds-menu';
 import { ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
 export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSMenu: import("styled-components").StyledComponent<typeof Menu, 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, import("@synerise/ds-scrollbar").ScrollbarAdditionalProps & {
     children?: import("react").ReactNode;
 }, never>;

package/dist/ItemPickerDropdown/ItemPickerDropdown.style.js

@@ -1,14 +1,16 @@
 import styled from 'styled-components';
-import Menu from '@synerise/ds-menu';
 import Scrollbar from '@synerise/ds-scrollbar';
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "ItemPickerDropdownstyle__DropdownWrapper",
   componentId: "jxq36p-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
-export var DSMenu = styled(Menu).withConfig({
-  displayName: "ItemPickerDropdownstyle__DSMenu",
+export var ListWrapper = styled.div.withConfig({
+  displayName: "ItemPickerDropdownstyle__ListWrapper",
   componentId: "jxq36p-1"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px 0 8px 8px;"]);
+})(["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: "jxq36p-2"

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

@@ -1,19 +1,20 @@
-/// <reference types="react" />
-import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.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 interface Props {
-    onChange: (item: MenuItemProps) => void;
+export type ItemPickerDropdownProps = {
+    onChange: (item: ListItemProps) => void;
     placeholder: string;
     clearSearchQuery?: number;
-    dataSource: MenuItemProps[];
+    dataSource: ListItemProps[];
     closeDropdown: () => void;
     noResults: string;
     dropdownVisibleRows?: number;
     dropdownRowHeight?: number;
-    dropdownBottomAction?: React.ReactNode;
+    dropdownBottomAction?: ReactNode;
     closeOnBottomAction?: boolean;
     isDropdownOpened: boolean;
     searchBarProps?: Partial<SearchBarProps>;
     scrollbarProps?: ScrollbarAdditionalProps;
-}
+};
+export type Props = ItemPickerDropdownProps;

package/dist/ItemPickerTrigger/Trigger.types.d.ts

@@ -1,22 +1,23 @@
-import * as React from 'react';
-import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.types';
+import { ReactNode } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
 import { ItemPickerSize } from '../ItemPicker.types';
-export interface Props {
+export type ItemPickerTriggerProps = {
     openDropdown: () => void;
     closeDropdown: () => void;
     size: ItemPickerSize;
-    clear: string | React.ReactNode;
+    clear: ReactNode;
     onClear?: () => void;
     opened: boolean;
-    placeholder: string | React.ReactNode;
-    placeholderIcon?: React.ReactNode;
+    placeholder: ReactNode;
+    placeholderIcon?: ReactNode;
     error?: boolean;
     disabled?: boolean;
-    selected?: MenuItemProps;
-    changeButtonLabel?: string | React.ReactNode;
+    selected?: ListItemProps;
+    changeButtonLabel?: ReactNode;
     withChangeButton?: boolean;
     clearConfirmTitle: string;
     yesText: string;
     noText: string;
     withClearConfirmation: boolean;
-}
+};
+export type Props = ItemPickerTriggerProps;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from './ItemPicker';
+export type { ItemPickerProps } from './ItemPicker.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "0.11.63",
+  "version": "0.12.1",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,31 +33,24 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.1",
-    "@synerise/ds-dropdown": "^0.18.3",
-    "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-input": "^0.23.0",
-    "@synerise/ds-menu": "^0.19.3",
-    "@synerise/ds-popconfirm": "^0.10.40",
-    "@synerise/ds-result": "^0.6.58",
-    "@synerise/ds-scrollbar": "^0.11.2",
-    "@synerise/ds-search": "^0.8.95",
-    "@synerise/ds-search-bar": "^0.6.78",
-    "@synerise/ds-tooltip": "^0.14.31",
-    "@synerise/ds-typography": "^0.15.0",
+    "@synerise/ds-button": "^0.21.3",
+    "@synerise/ds-dropdown": "^0.18.5",
+    "@synerise/ds-icon": "^0.64.1",
+    "@synerise/ds-input": "^0.23.2",
+    "@synerise/ds-list-item": "^0.4.1",
+    "@synerise/ds-popconfirm": "^0.10.42",
+    "@synerise/ds-result": "^0.6.60",
+    "@synerise/ds-scrollbar": "^0.11.4",
+    "@synerise/ds-search": "^0.9.1",
+    "@synerise/ds-search-bar": "^0.6.80",
+    "@synerise/ds-tooltip": "^0.14.33",
+    "@synerise/ds-typography": "^0.15.1",
     "react-intl": "3.12.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@synerise/ds-avatar": "^0.16.6",
-    "@synerise/ds-flag": "^0.5.0",
-    "@synerise/ds-utils": "^0.27.0",
-    "@testing-library/jest-dom": "5.1.1",
-    "@testing-library/react": "10.0.1"
-  },
-  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
+  "gitHead": "6f4996380356c1e5cb9a9d8b553069ad9cea7c27"
 }