@synerise/ds-item-picker 0.11.32 → 0.11.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/ItemPicker.js +9 -2
  3. package/dist/ItemPickerDropdown/ItemPickerDropdown.js +22 -7
  4. package/dist/ItemPickerDropdown/ItemPickerDropdown.types.d.ts +1 -0
  5. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.11.34](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.11.33...@synerise/ds-item-picker@0.11.34) (2024-01-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **item-picker:** clears search bar when dropdown closes ([abacddf](https://github.com/Synerise/synerise-design/commit/abacddfbc8a4628ab3f5e3cc1be5201173559292))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.11.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.11.32...@synerise/ds-item-picker@0.11.33) (2023-12-13)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-item-picker
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.11.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.11.31...@synerise/ds-item-picker@0.11.32) (2023-12-11)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-item-picker
package/dist/ItemPicker.js CHANGED
@@ -73,6 +73,8 @@ var ItemPicker = function ItemPicker(_ref) {
73
73
  dropdownOpened = _React$useState[0],
74
74
  setDropdownOpened = _React$useState[1];
75
75
 
76
+ var clearSearchBarValue = React.useRef();
77
+
76
78
  var onVisibilityChange = function onVisibilityChange(state) {
77
79
  setDropdownOpened(state);
78
80
 
@@ -80,8 +82,12 @@ var ItemPicker = function ItemPicker(_ref) {
80
82
  onFocus();
81
83
  }
82
84
 
83
- if (!state && typeof onBlur === 'function') {
84
- onBlur();
85
+ if (!state) {
86
+ clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
87
+
88
+ if (typeof onBlur === 'function') {
89
+ onBlur();
90
+ }
85
91
  }
86
92
  };
87
93
 
@@ -96,6 +102,7 @@ var ItemPicker = function ItemPicker(_ref) {
96
102
  var dropdownOverlay = React.useMemo(function () {
97
103
  return /*#__PURE__*/React.createElement(ItemPickerDropdown, {
98
104
  searchBarProps: searchBarProps,
105
+ clearSearchQuery: clearSearchBarValue.current,
99
106
  onChange: onChange,
100
107
  dataSource: dataSource,
101
108
  placeholder: searchPlaceholder,
package/dist/ItemPickerDropdown/ItemPickerDropdown.js CHANGED
@@ -24,7 +24,8 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
24
24
  closeOnBottomAction = _ref.closeOnBottomAction,
25
25
  isDropdownOpened = _ref.isDropdownOpened,
26
26
  searchBarProps = _ref.searchBarProps,
27
- scrollbarProps = _ref.scrollbarProps;
27
+ scrollbarProps = _ref.scrollbarProps,
28
+ clearSearchQuery = _ref.clearSearchQuery;
28
29
  var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
29
30
  var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
30
31
 
@@ -36,21 +37,35 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
36
37
  scrollTop = _React$useState2[0],
37
38
  setScrollTop = _React$useState2[1];
38
39
 
39
- var handleChange = React.useCallback(function (item) {
40
+ React.useEffect(function () {
41
+ if (clearSearchQuery && clearSearchQuery > 0) {
42
+ setSearchQuery('');
43
+ }
44
+ }, [clearSearchQuery]);
45
+
46
+ var handleClose = function handleClose() {
47
+ setSearchQuery('');
40
48
  closeDropdown();
49
+ };
50
+
51
+ var handleChange = function handleChange(item) {
52
+ handleClose();
41
53
  onChange(item);
42
- }, [onChange, closeDropdown]);
54
+ };
55
+
43
56
  var filteredDataSource = React.useMemo(function () {
44
57
  return searchQuery ? dataSource.filter(function (item) {
45
58
  return item.text && String(item.text).toLowerCase().includes(searchQuery.toLowerCase());
46
59
  }) : dataSource;
47
60
  }, [searchQuery, dataSource]);
48
- var renderBottomAction = React.useMemo(function () {
61
+
62
+ var renderBottomAction = function renderBottomAction() {
49
63
  var bottomAction = !closeOnBottomAction ? dropdownBottomAction : /*#__PURE__*/React.createElement(S.BottomActionWrapper, {
50
- onClick: closeDropdown
64
+ onClick: handleClose
51
65
  }, dropdownBottomAction);
52
66
  return dropdownBottomAction && /*#__PURE__*/React.createElement(S.DropdownFooter, null, bottomAction);
53
- }, [closeOnBottomAction, dropdownBottomAction, closeDropdown]);
67
+ };
68
+
54
69
  return /*#__PURE__*/React.createElement(S.DropdownWrapper, null, /*#__PURE__*/React.createElement(SearchBar, _extends({
55
70
  iconLeft: /*#__PURE__*/React.createElement(Icon, {
56
71
  component: /*#__PURE__*/React.createElement(SearchM, null)
@@ -93,7 +108,7 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
93
108
  } // @ts-ignore
94
109
  ,
95
110
  width: "100%"
96
- }))), renderBottomAction);
111
+ }))), renderBottomAction());
97
112
  };
98
113
 
99
114
  export default ItemPickerDropdown;
package/dist/ItemPickerDropdown/ItemPickerDropdown.types.d.ts CHANGED
@@ -5,6 +5,7 @@ import { SearchBarProps } from '@synerise/ds-search-bar/dist/SearchBar.types';
5
5
  export interface Props {
6
6
  onChange: (item: MenuItemProps) => void;
7
7
  placeholder: string;
8
+ clearSearchQuery?: number;
8
9
  dataSource: MenuItemProps[];
9
10
  closeDropdown: () => void;
10
11
  noResults: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-picker",
3
- "version": "0.11.32",
3
+ "version": "0.11.34",
4
4
  "description": "ItemPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,17 +33,17 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-button": "^0.18.8",
37
- "@synerise/ds-dropdown": "^0.17.90",
38
- "@synerise/ds-icon": "^0.58.8",
39
- "@synerise/ds-input": "^0.19.11",
40
- "@synerise/ds-menu": "^0.18.7",
41
- "@synerise/ds-popconfirm": "^0.10.21",
42
- "@synerise/ds-result": "^0.6.39",
43
- "@synerise/ds-scrollbar": "^0.6.14",
44
- "@synerise/ds-search": "^0.8.74",
45
- "@synerise/ds-search-bar": "^0.6.53",
46
- "@synerise/ds-tooltip": "^0.14.12",
36
+ "@synerise/ds-button": "^0.18.10",
37
+ "@synerise/ds-dropdown": "^0.17.92",
38
+ "@synerise/ds-icon": "^0.59.0",
39
+ "@synerise/ds-input": "^0.19.13",
40
+ "@synerise/ds-menu": "^0.18.9",
41
+ "@synerise/ds-popconfirm": "^0.10.23",
42
+ "@synerise/ds-result": "^0.6.41",
43
+ "@synerise/ds-scrollbar": "^0.7.1",
44
+ "@synerise/ds-search": "^0.8.76",
45
+ "@synerise/ds-search-bar": "^0.6.55",
46
+ "@synerise/ds-tooltip": "^0.14.14",
47
47
  "@synerise/ds-typography": "^0.14.1",
48
48
  "react-intl": "3.12.0"
49
49
  },
@@ -53,11 +53,11 @@
53
53
  "styled-components": "5.0.1"
54
54
  },
55
55
  "devDependencies": {
56
- "@synerise/ds-avatar": "^0.15.15",
56
+ "@synerise/ds-avatar": "^0.15.17",
57
57
  "@synerise/ds-flag": "^0.4.3",
58
- "@synerise/ds-utils": "^0.24.22",
58
+ "@synerise/ds-utils": "^0.24.23",
59
59
  "@testing-library/jest-dom": "5.1.1",
60
60
  "@testing-library/react": "10.0.1"
61
61
  },
62
- "gitHead": "5ab278e69cd049334216bc9867cca2ce6a5fc218"
62
+ "gitHead": "ba51e38beff83b8adba409f09311131f429ada01"
63
63
  }