@synerise/ds-item-picker 0.13.2 → 0.13.4

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 (6) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/ItemPicker.js +59 -69
  3. package/dist/ItemPickerDropdown/ItemPickerDropdown.js +18 -29
  4. package/dist/ItemPickerTrigger/Trigger.js +16 -21
  5. package/dist/ItemPickerTrigger/Trigger.styles.js +0 -5
  6. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.13.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.3...@synerise/ds-item-picker@0.13.4) (2024-11-28)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-item-picker
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.13.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.2...@synerise/ds-item-picker@0.13.3) (2024-11-22)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-item-picker
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.13.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.13.1...@synerise/ds-item-picker@0.13.2) (2024-11-21)
7
23
 
8
24
 
package/dist/ItemPicker.js CHANGED
@@ -1,5 +1,4 @@
1
1
  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); }
2
-
3
2
  import React, { useState, useCallback, useMemo, useRef } from 'react';
4
3
  import Label from '@synerise/ds-input/dist/Label/Label';
5
4
  import { Description } from '@synerise/ds-typography';
@@ -8,89 +7,81 @@ import { injectIntl } from 'react-intl';
8
7
  import * as S from './ItemPicker.styles';
9
8
  import ItemPickerDropdown from './ItemPickerDropdown/ItemPickerDropdown';
10
9
  import Trigger from './ItemPickerTrigger/Trigger';
11
-
12
10
  var ItemPicker = function ItemPicker(_ref) {
13
11
  var dataSource = _ref.dataSource,
14
- intl = _ref.intl,
15
- onChange = _ref.onChange,
16
- onClear = _ref.onClear,
17
- placeholder = _ref.placeholder,
18
- _ref$changeButtonLabe = _ref.changeButtonLabel,
19
- changeButtonLabel = _ref$changeButtonLabe === void 0 ? intl.formatMessage({
20
- id: 'DS.ITEM-PICKER.CHANGE'
21
- }) : _ref$changeButtonLabe,
22
- _ref$clear = _ref.clear,
23
- clear = _ref$clear === void 0 ? intl.formatMessage({
24
- id: 'DS.ITEM-PICKER.CLEAR'
25
- }) : _ref$clear,
26
- _ref$clearConfirmTitl = _ref.clearConfirmTitle,
27
- clearConfirmTitle = _ref$clearConfirmTitl === void 0 ? intl.formatMessage({
28
- id: 'DS.ITEM-PICKER.CLEAR-CONFIRM'
29
- }) : _ref$clearConfirmTitl,
30
- closeOnBottomAction = _ref.closeOnBottomAction,
31
- description = _ref.description,
32
- disabled = _ref.disabled,
33
- dropdownBottomAction = _ref.dropdownBottomAction,
34
- _ref$dropdownProps = _ref.dropdownProps,
35
- dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
36
- dropdownRowHeight = _ref.dropdownRowHeight,
37
- dropdownVisibleRows = _ref.dropdownVisibleRows,
38
- error = _ref.error,
39
- errorMessage = _ref.errorMessage,
40
- label = _ref.label,
41
- onBlur = _ref.onBlur,
42
- onFocus = _ref.onFocus,
43
- _ref$noResults = _ref.noResults,
44
- noResults = _ref$noResults === void 0 ? intl.formatMessage({
45
- id: 'DS.ITEM-PICKER.NO-RESULTS',
46
- defaultMessage: 'No results'
47
- }) : _ref$noResults,
48
- _ref$noText = _ref.noText,
49
- noText = _ref$noText === void 0 ? intl.formatMessage({
50
- id: 'DS.ITEM-PICKER.NO-TEXT',
51
- defaultMessage: 'No'
52
- }) : _ref$noText,
53
- placeholderIcon = _ref.placeholderIcon,
54
- _ref$searchPlaceholde = _ref.searchPlaceholder,
55
- searchPlaceholder = _ref$searchPlaceholde === void 0 ? intl.formatMessage({
56
- id: 'DS.ITEM-PICKER.SEARCH',
57
- defaultMessage: 'Search'
58
- }) : _ref$searchPlaceholde,
59
- searchBarProps = _ref.searchBarProps,
60
- selectedItem = _ref.selectedItem,
61
- tooltip = _ref.tooltip,
62
- _ref$size = _ref.size,
63
- size = _ref$size === void 0 ? 'small' : _ref$size,
64
- _ref$yesText = _ref.yesText,
65
- yesText = _ref$yesText === void 0 ? intl.formatMessage({
66
- id: 'DS.ITEM-PICKER.YES-TEXT',
67
- defaultMessage: 'Yes'
68
- }) : _ref$yesText,
69
- withClearConfirmation = _ref.withClearConfirmation,
70
- scrollbarProps = _ref.scrollbarProps;
71
-
12
+ intl = _ref.intl,
13
+ onChange = _ref.onChange,
14
+ onClear = _ref.onClear,
15
+ placeholder = _ref.placeholder,
16
+ _ref$changeButtonLabe = _ref.changeButtonLabel,
17
+ changeButtonLabel = _ref$changeButtonLabe === void 0 ? intl.formatMessage({
18
+ id: 'DS.ITEM-PICKER.CHANGE'
19
+ }) : _ref$changeButtonLabe,
20
+ _ref$clear = _ref.clear,
21
+ clear = _ref$clear === void 0 ? intl.formatMessage({
22
+ id: 'DS.ITEM-PICKER.CLEAR'
23
+ }) : _ref$clear,
24
+ _ref$clearConfirmTitl = _ref.clearConfirmTitle,
25
+ clearConfirmTitle = _ref$clearConfirmTitl === void 0 ? intl.formatMessage({
26
+ id: 'DS.ITEM-PICKER.CLEAR-CONFIRM'
27
+ }) : _ref$clearConfirmTitl,
28
+ closeOnBottomAction = _ref.closeOnBottomAction,
29
+ description = _ref.description,
30
+ disabled = _ref.disabled,
31
+ dropdownBottomAction = _ref.dropdownBottomAction,
32
+ _ref$dropdownProps = _ref.dropdownProps,
33
+ dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
34
+ dropdownRowHeight = _ref.dropdownRowHeight,
35
+ dropdownVisibleRows = _ref.dropdownVisibleRows,
36
+ error = _ref.error,
37
+ errorMessage = _ref.errorMessage,
38
+ label = _ref.label,
39
+ onBlur = _ref.onBlur,
40
+ onFocus = _ref.onFocus,
41
+ _ref$noResults = _ref.noResults,
42
+ noResults = _ref$noResults === void 0 ? intl.formatMessage({
43
+ id: 'DS.ITEM-PICKER.NO-RESULTS',
44
+ defaultMessage: 'No results'
45
+ }) : _ref$noResults,
46
+ _ref$noText = _ref.noText,
47
+ noText = _ref$noText === void 0 ? intl.formatMessage({
48
+ id: 'DS.ITEM-PICKER.NO-TEXT',
49
+ defaultMessage: 'No'
50
+ }) : _ref$noText,
51
+ placeholderIcon = _ref.placeholderIcon,
52
+ _ref$searchPlaceholde = _ref.searchPlaceholder,
53
+ searchPlaceholder = _ref$searchPlaceholde === void 0 ? intl.formatMessage({
54
+ id: 'DS.ITEM-PICKER.SEARCH',
55
+ defaultMessage: 'Search'
56
+ }) : _ref$searchPlaceholde,
57
+ searchBarProps = _ref.searchBarProps,
58
+ selectedItem = _ref.selectedItem,
59
+ tooltip = _ref.tooltip,
60
+ _ref$size = _ref.size,
61
+ size = _ref$size === void 0 ? 'small' : _ref$size,
62
+ _ref$yesText = _ref.yesText,
63
+ yesText = _ref$yesText === void 0 ? intl.formatMessage({
64
+ id: 'DS.ITEM-PICKER.YES-TEXT',
65
+ defaultMessage: 'Yes'
66
+ }) : _ref$yesText,
67
+ withClearConfirmation = _ref.withClearConfirmation,
68
+ scrollbarProps = _ref.scrollbarProps;
72
69
  var _useState = useState(false),
73
- dropdownOpened = _useState[0],
74
- setDropdownOpened = _useState[1];
75
-
70
+ dropdownOpened = _useState[0],
71
+ setDropdownOpened = _useState[1];
76
72
  var clearSearchBarValue = useRef();
77
-
78
73
  var onVisibilityChange = function onVisibilityChange(state) {
79
74
  setDropdownOpened(state);
80
-
81
75
  if (state && typeof onFocus === 'function') {
82
76
  onFocus();
83
77
  }
84
-
85
78
  if (!state) {
86
79
  clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
87
-
88
80
  if (typeof onBlur === 'function') {
89
81
  onBlur();
90
82
  }
91
83
  }
92
84
  };
93
-
94
85
  var openDropdown = useCallback(function () {
95
86
  setDropdownOpened(true);
96
87
  typeof onFocus === 'function' && onFocus();
@@ -151,5 +142,4 @@ var ItemPicker = function ItemPicker(_ref) {
151
142
  onVisibleChange: onVisibilityChange
152
143
  }, dropdownProps), renderTrigger), error && errorMessage && /*#__PURE__*/React.createElement(S.Error, null, errorMessage), description && /*#__PURE__*/React.createElement(Description, null, description));
153
144
  };
154
-
155
145
  export default injectIntl(ItemPicker);
package/dist/ItemPickerDropdown/ItemPickerDropdown.js CHANGED
@@ -1,5 +1,4 @@
1
1
  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); }
2
-
3
2
  import React, { useState, useMemo, useEffect } from 'react';
4
3
  import SearchBar from '@synerise/ds-search-bar';
5
4
  import ListItem from '@synerise/ds-list-item';
@@ -9,63 +8,53 @@ import { SearchItems } from '@synerise/ds-search/dist/Elements';
9
8
  import * as S from './ItemPickerDropdown.style';
10
9
  var DEFAULT_ROW_HEIGHT = 32;
11
10
  var DEFAULT_VISIBLE_ROWS = 10;
12
-
13
11
  var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
14
12
  var _searchBarProps$value;
15
-
16
13
  var onChange = _ref.onChange,
17
- placeholder = _ref.placeholder,
18
- dataSource = _ref.dataSource,
19
- closeDropdown = _ref.closeDropdown,
20
- noResults = _ref.noResults,
21
- dropdownVisibleRows = _ref.dropdownVisibleRows,
22
- dropdownRowHeight = _ref.dropdownRowHeight,
23
- dropdownBottomAction = _ref.dropdownBottomAction,
24
- closeOnBottomAction = _ref.closeOnBottomAction,
25
- isDropdownOpened = _ref.isDropdownOpened,
26
- searchBarProps = _ref.searchBarProps,
27
- scrollbarProps = _ref.scrollbarProps,
28
- clearSearchQuery = _ref.clearSearchQuery;
14
+ placeholder = _ref.placeholder,
15
+ dataSource = _ref.dataSource,
16
+ closeDropdown = _ref.closeDropdown,
17
+ noResults = _ref.noResults,
18
+ dropdownVisibleRows = _ref.dropdownVisibleRows,
19
+ dropdownRowHeight = _ref.dropdownRowHeight,
20
+ dropdownBottomAction = _ref.dropdownBottomAction,
21
+ closeOnBottomAction = _ref.closeOnBottomAction,
22
+ isDropdownOpened = _ref.isDropdownOpened,
23
+ searchBarProps = _ref.searchBarProps,
24
+ scrollbarProps = _ref.scrollbarProps,
25
+ clearSearchQuery = _ref.clearSearchQuery;
29
26
  var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
30
27
  var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
31
-
32
28
  var _useState = useState(''),
33
- searchQuery = _useState[0],
34
- setSearchQuery = _useState[1];
35
-
29
+ searchQuery = _useState[0],
30
+ setSearchQuery = _useState[1];
36
31
  var _useState2 = useState(0),
37
- scrollTop = _useState2[0],
38
- setScrollTop = _useState2[1];
39
-
32
+ scrollTop = _useState2[0],
33
+ setScrollTop = _useState2[1];
40
34
  useEffect(function () {
41
35
  if (clearSearchQuery && clearSearchQuery > 0) {
42
36
  setSearchQuery('');
43
37
  }
44
38
  }, [clearSearchQuery]);
45
-
46
39
  var handleClose = function handleClose() {
47
40
  setSearchQuery('');
48
41
  closeDropdown();
49
42
  };
50
-
51
43
  var handleChange = function handleChange(item) {
52
44
  handleClose();
53
45
  onChange(item);
54
46
  };
55
-
56
47
  var filteredDataSource = useMemo(function () {
57
48
  return searchQuery ? dataSource.filter(function (item) {
58
49
  return item.text && String(item.text).toLowerCase().includes(searchQuery.toLowerCase());
59
50
  }) : dataSource;
60
51
  }, [searchQuery, dataSource]);
61
-
62
52
  var renderBottomAction = function renderBottomAction() {
63
53
  var bottomAction = !closeOnBottomAction ? dropdownBottomAction : /*#__PURE__*/React.createElement(S.BottomActionWrapper, {
64
54
  onClick: handleClose
65
55
  }, dropdownBottomAction);
66
56
  return dropdownBottomAction && /*#__PURE__*/React.createElement(S.DropdownFooter, null, bottomAction);
67
57
  };
68
-
69
58
  return /*#__PURE__*/React.createElement(S.DropdownWrapper, {
70
59
  "data-testid": "ds-item-picker-dropdown"
71
60
  }, /*#__PURE__*/React.createElement(SearchBar, _extends({
@@ -107,11 +96,11 @@ var ItemPickerDropdown = function ItemPickerDropdown(_ref) {
107
96
  visibleRows: rowCount,
108
97
  listProps: {
109
98
  scrollTop: scrollTop
110
- } // @ts-ignore
99
+ }
100
+ // @ts-ignore
111
101
  ,
112
102
  width: "100%",
113
103
  renderInMenu: false
114
104
  }))), renderBottomAction());
115
105
  };
116
-
117
106
  export default ItemPickerDropdown;
package/dist/ItemPickerTrigger/Trigger.js CHANGED
@@ -5,25 +5,24 @@ import Tooltip from '@synerise/ds-tooltip';
5
5
  import Button from '@synerise/ds-button';
6
6
  import Popconfirm from '@synerise/ds-popconfirm';
7
7
  import * as S from './Trigger.styles';
8
-
9
8
  var Trigger = function Trigger(_ref) {
10
9
  var selected = _ref.selected,
11
- clear = _ref.clear,
12
- onClear = _ref.onClear,
13
- opened = _ref.opened,
14
- placeholder = _ref.placeholder,
15
- placeholderIcon = _ref.placeholderIcon,
16
- error = _ref.error,
17
- disabled = _ref.disabled,
18
- openDropdown = _ref.openDropdown,
19
- closeDropdown = _ref.closeDropdown,
20
- size = _ref.size,
21
- changeButtonLabel = _ref.changeButtonLabel,
22
- withChangeButton = _ref.withChangeButton,
23
- clearConfirmTitle = _ref.clearConfirmTitle,
24
- yesText = _ref.yesText,
25
- noText = _ref.noText,
26
- withClearConfirmation = _ref.withClearConfirmation;
10
+ clear = _ref.clear,
11
+ onClear = _ref.onClear,
12
+ opened = _ref.opened,
13
+ placeholder = _ref.placeholder,
14
+ placeholderIcon = _ref.placeholderIcon,
15
+ error = _ref.error,
16
+ disabled = _ref.disabled,
17
+ openDropdown = _ref.openDropdown,
18
+ closeDropdown = _ref.closeDropdown,
19
+ size = _ref.size,
20
+ changeButtonLabel = _ref.changeButtonLabel,
21
+ withChangeButton = _ref.withChangeButton,
22
+ clearConfirmTitle = _ref.clearConfirmTitle,
23
+ yesText = _ref.yesText,
24
+ noText = _ref.noText,
25
+ withClearConfirmation = _ref.withClearConfirmation;
27
26
  var handleClear = React.useCallback(function (event) {
28
27
  event.stopPropagation();
29
28
  closeDropdown();
@@ -36,7 +35,6 @@ var Trigger = function Trigger(_ref) {
36
35
  component: /*#__PURE__*/React.createElement(Close3S, null),
37
36
  color: theme.palette['red-600']
38
37
  })));
39
-
40
38
  if (selected) {
41
39
  if (withClearConfirmation) {
42
40
  return /*#__PURE__*/React.createElement(Popconfirm, {
@@ -52,13 +50,11 @@ var Trigger = function Trigger(_ref) {
52
50
  })
53
51
  }, tooltip);
54
52
  }
55
-
56
53
  return /*#__PURE__*/React.createElement(S.ClearWrapper, {
57
54
  onClick: handleClear,
58
55
  "data-testid": "clear-icon"
59
56
  }, tooltip);
60
57
  }
61
-
62
58
  return null;
63
59
  }, [clear, selected, withClearConfirmation, handleClear, clearConfirmTitle, yesText, noText]);
64
60
  var renderAngleIcon = React.useMemo(function () {
@@ -106,5 +102,4 @@ var Trigger = function Trigger(_ref) {
106
102
  size: size
107
103
  }, onClear && renderClear, renderAngleIcon));
108
104
  };
109
-
110
105
  export default Trigger;
package/dist/ItemPickerTrigger/Trigger.styles.js CHANGED
@@ -1,25 +1,20 @@
1
1
  import styled, { css } from 'styled-components';
2
-
3
2
  var getDefaultStyles = function getDefaultStyles(props) {
4
3
  if (props.size === 'small') return "box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-400'] + ";";
5
4
  return "border: 1px dashed " + props.theme.palette['grey-400'] + ";";
6
5
  };
7
-
8
6
  var getHoverStyles = function getHoverStyles(props) {
9
7
  if (props.size === 'small') return "box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-500'] + ";";
10
8
  return "border: 1px dashed " + props.theme.palette['grey-500'] + ";";
11
9
  };
12
-
13
10
  var getErrorStyles = function getErrorStyles(props) {
14
11
  if (props.size === 'small') return "box-shadow: inset 0 0 0 1px " + props.theme.palette['red-600'] + ";";
15
12
  return "border: 1px dashed " + props.theme.palette['red-600'] + ";";
16
13
  };
17
-
18
14
  var getFocusStyles = function getFocusStyles(props) {
19
15
  if (props.size === 'small') return "box-shadow: inset 0 0 0 2px " + props.theme.palette['blue-600'] + ";";
20
16
  return "border: 1px dashed " + props.theme.palette['blue-600'] + ";";
21
17
  };
22
-
23
18
  export var ClearIconWrapper = styled.div.withConfig({
24
19
  displayName: "Triggerstyles__ClearIconWrapper",
25
20
  componentId: "av8hmu-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-picker",
3
- "version": "0.13.2",
3
+ "version": "0.13.4",
4
4
  "description": "ItemPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,20 +34,20 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-avatar": "^0.17.21",
38
- "@synerise/ds-button": "^0.21.19",
39
- "@synerise/ds-dropdown": "^0.18.24",
37
+ "@synerise/ds-avatar": "^0.17.22",
38
+ "@synerise/ds-button": "^0.21.20",
39
+ "@synerise/ds-dropdown": "^0.18.25",
40
40
  "@synerise/ds-flag": "^0.5.3",
41
- "@synerise/ds-icon": "^0.67.0",
42
- "@synerise/ds-input": "^0.24.14",
43
- "@synerise/ds-list-item": "^0.4.19",
44
- "@synerise/ds-popconfirm": "^0.10.60",
45
- "@synerise/ds-result": "^0.7.14",
46
- "@synerise/ds-scrollbar": "^0.11.19",
47
- "@synerise/ds-search": "^0.9.19",
48
- "@synerise/ds-search-bar": "^0.7.2",
49
- "@synerise/ds-tooltip": "^0.14.49",
50
- "@synerise/ds-typography": "^0.16.6",
41
+ "@synerise/ds-icon": "^0.67.1",
42
+ "@synerise/ds-input": "^0.24.15",
43
+ "@synerise/ds-list-item": "^0.5.0",
44
+ "@synerise/ds-popconfirm": "^0.10.62",
45
+ "@synerise/ds-result": "^0.7.15",
46
+ "@synerise/ds-scrollbar": "^0.11.20",
47
+ "@synerise/ds-search": "^0.9.20",
48
+ "@synerise/ds-search-bar": "^0.7.3",
49
+ "@synerise/ds-tooltip": "^0.14.50",
50
+ "@synerise/ds-typography": "^0.16.7",
51
51
  "@synerise/ds-utils": "^0.31.2"
52
52
  },
53
53
  "peerDependencies": {
@@ -56,5 +56,5 @@
56
56
  "react-intl": ">=3.12.0 <= 6.8",
57
57
  "styled-components": "5.0.1"
58
58
  },
59
- "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
59
+ "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
60
60
  }