@synerise/ds-item-picker 0.12.0 → 0.12.2

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/ItemPickerTrigger/Trigger.js +7 -6
  3. package/dist/ItemPickerTrigger/Trigger.styles.d.ts +3 -0
  4. package/dist/ItemPickerTrigger/Trigger.styles.js +22 -10
  5. package/package.json +13 -13
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.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@0.12.1...@synerise/ds-item-picker@0.12.2) (2024-07-26)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **item-picker:** display angle icon when vale selected ([320b3b0](https://github.com/Synerise/synerise-design/commit/320b3b055afaefc1070643b5d4c3241c2d6b4997))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-item-picker
20
+
21
+
22
+
23
+
24
+
6
25
  # [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)
7
26
 
8
27
 
package/dist/ItemPickerTrigger/Trigger.js CHANGED
@@ -32,10 +32,10 @@ var Trigger = function Trigger(_ref) {
32
32
  var renderClear = React.useMemo(function () {
33
33
  var tooltip = /*#__PURE__*/React.createElement(Tooltip, {
34
34
  title: clear
35
- }, /*#__PURE__*/React.createElement(Icon, {
35
+ }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
36
36
  component: /*#__PURE__*/React.createElement(Close3S, null),
37
37
  color: theme.palette['red-600']
38
- }));
38
+ })));
39
39
 
40
40
  if (selected) {
41
41
  if (withClearConfirmation) {
@@ -62,12 +62,12 @@ var Trigger = function Trigger(_ref) {
62
62
  return null;
63
63
  }, [clear, selected, withClearConfirmation, handleClear, clearConfirmTitle, yesText, noText]);
64
64
  var renderAngleIcon = React.useMemo(function () {
65
- return !selected && size === 'small' && /*#__PURE__*/React.createElement(Icon, {
65
+ return size === 'small' && /*#__PURE__*/React.createElement(S.AngleIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
66
66
  "data-testid": "angle-icon",
67
67
  component: /*#__PURE__*/React.createElement(AngleDownS, null),
68
68
  color: theme.palette['grey-600']
69
- });
70
- }, [size, selected]);
69
+ }));
70
+ }, [size]);
71
71
  var handleChangeButtonClick = React.useCallback(function (event) {
72
72
  event.stopPropagation();
73
73
  openDropdown();
@@ -90,7 +90,8 @@ var Trigger = function Trigger(_ref) {
90
90
  disabled: disabled,
91
91
  error: error,
92
92
  onClick: handleOpen,
93
- selected: Boolean(selected)
93
+ selected: Boolean(selected),
94
+ clearable: Boolean(onClear && renderClear)
94
95
  }, /*#__PURE__*/React.createElement(S.Trigger, {
95
96
  size: size
96
97
  }, selected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Value, null, selected.prefixel && /*#__PURE__*/React.createElement(S.Prefix, {
package/dist/ItemPickerTrigger/Trigger.styles.d.ts CHANGED
@@ -5,7 +5,10 @@ type TriggerWrapperProps = {
5
5
  error?: boolean;
6
6
  size: ItemPickerSize;
7
7
  selected: boolean;
8
+ clearable: boolean;
8
9
  };
10
+ export declare const ClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
11
+ export declare const AngleIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
12
  export declare const ClearWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
13
  export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
11
14
  size: ItemPickerSize;
package/dist/ItemPickerTrigger/Trigger.styles.js CHANGED
@@ -20,13 +20,21 @@ var getFocusStyles = function getFocusStyles(props) {
20
20
  return "border: 1px dashed " + props.theme.palette['blue-600'] + ";";
21
21
  };
22
22
 
23
+ export var ClearIconWrapper = styled.div.withConfig({
24
+ displayName: "Triggerstyles__ClearIconWrapper",
25
+ componentId: "av8hmu-0"
26
+ })([""]);
27
+ export var AngleIconWrapper = styled.div.withConfig({
28
+ displayName: "Triggerstyles__AngleIconWrapper",
29
+ componentId: "av8hmu-1"
30
+ })([""]);
23
31
  export var ClearWrapper = styled.div.withConfig({
24
32
  displayName: "Triggerstyles__ClearWrapper",
25
- componentId: "av8hmu-0"
33
+ componentId: "av8hmu-2"
26
34
  })(["position:relative;display:flex;cursor:pointer;"]);
27
35
  export var IconWrapper = styled.div.withConfig({
28
36
  displayName: "Triggerstyles__IconWrapper",
29
- componentId: "av8hmu-1"
37
+ componentId: "av8hmu-3"
30
38
  })(["top:", ";right:", ";"], function (props) {
31
39
  return props.size === 'small' ? '4px' : '12px';
32
40
  }, function (props) {
@@ -34,11 +42,11 @@ export var IconWrapper = styled.div.withConfig({
34
42
  });
35
43
  export var Prefix = styled.div.withConfig({
36
44
  displayName: "Triggerstyles__Prefix",
37
- componentId: "av8hmu-2"
45
+ componentId: "av8hmu-4"
38
46
  })(["width:24px;height:24px;margin-right:8px;display:flex;align-items:center;justify-content:center;"]);
39
47
  export var Placeholder = styled.div.withConfig({
40
48
  displayName: "Triggerstyles__Placeholder",
41
- componentId: "av8hmu-3"
49
+ componentId: "av8hmu-5"
42
50
  })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}&:hover{color:", ";", "{svg{fill:", ";color:", ";}}}"], function (props) {
43
51
  return props.theme.palette['grey-500'];
44
52
  }, Prefix, function (props) {
@@ -54,7 +62,7 @@ export var Placeholder = styled.div.withConfig({
54
62
  });
55
63
  export var Value = styled.div.withConfig({
56
64
  displayName: "Triggerstyles__Value",
57
- componentId: "av8hmu-4"
65
+ componentId: "av8hmu-6"
58
66
  })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";max-width:100%;overflow:hidden;padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}"], function (props) {
59
67
  return props.theme.palette['grey-800'];
60
68
  }, Prefix, function (props) {
@@ -64,7 +72,7 @@ export var Value = styled.div.withConfig({
64
72
  });
65
73
  export var Trigger = styled.div.withConfig({
66
74
  displayName: "Triggerstyles__Trigger",
67
- componentId: "av8hmu-5"
75
+ componentId: "av8hmu-7"
68
76
  })(["max-width:100%;width:100%;overflow:hidden;border-radius:3px;height:", ";display:flex;align-items:center;justify-content:flex-start;position:relative;transition:all 0.3s ease;font-weight:", ";"], function (props) {
69
77
  return props.size === 'small' ? '32px' : '48px';
70
78
  }, function (props) {
@@ -72,8 +80,8 @@ export var Trigger = styled.div.withConfig({
72
80
  });
73
81
  export var TriggerWrapper = styled.div.withConfig({
74
82
  displayName: "Triggerstyles__TriggerWrapper",
75
- componentId: "av8hmu-6"
76
- })(["width:100%;display:flex;cursor:", ";pointer-events:", ";flex-direction:row;align-items:center;justify-content:space-between;position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " &:hover{", ";}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], function (props) {
83
+ componentId: "av8hmu-8"
84
+ })(["width:100%;display:flex;cursor:", ";pointer-events:", ";flex-direction:row;align-items:center;justify-content:space-between;position:relative;border-radius:3px;transition:all 0.3s ease;padding ", ";background-color:", ";", " ", " &:hover{", ";", "}&:focus{background-color:", ";", ";}&&{", ";", " ", ";", ";}"], function (props) {
77
85
  if (props.disabled) return 'not-allowed';
78
86
  if (props.selected) return 'default';
79
87
  return 'pointer';
@@ -88,8 +96,12 @@ export var TriggerWrapper = styled.div.withConfig({
88
96
  return props.theme.palette.white;
89
97
  }, function (props) {
90
98
  return getDefaultStyles(props);
99
+ }, function (props) {
100
+ return props.clearable && props.size === 'small' && "\n " + AngleIconWrapper + " {\n display: block; \n }\n " + ClearIconWrapper + " {\n display: none; \n }\n ";
91
101
  }, function (props) {
92
102
  return getHoverStyles(props);
103
+ }, function (props) {
104
+ return props.clearable && props.size === 'small' && "\n " + AngleIconWrapper + " {\n display: none; \n }\n " + ClearIconWrapper + " {\n display: block; \n }\n ";
93
105
  }, function (props) {
94
106
  return props.theme.palette['blue-050'];
95
107
  }, function (props) {
@@ -105,9 +117,9 @@ export var TriggerWrapper = styled.div.withConfig({
105
117
  });
106
118
  export var ChangeButtonWrapper = styled.div.withConfig({
107
119
  displayName: "Triggerstyles__ChangeButtonWrapper",
108
- componentId: "av8hmu-7"
120
+ componentId: "av8hmu-9"
109
121
  })(["margin:0 4px 0 8px;"]);
110
122
  export var ValueText = styled.span.withConfig({
111
123
  displayName: "Triggerstyles__ValueText",
112
- componentId: "av8hmu-8"
124
+ componentId: "av8hmu-10"
113
125
  })(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-picker",
3
- "version": "0.12.0",
3
+ "version": "0.12.2",
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.21.2",
37
- "@synerise/ds-dropdown": "^0.18.4",
38
- "@synerise/ds-icon": "^0.64.0",
39
- "@synerise/ds-input": "^0.23.1",
40
- "@synerise/ds-list-item": "^0.4.0",
41
- "@synerise/ds-popconfirm": "^0.10.41",
42
- "@synerise/ds-result": "^0.6.59",
43
- "@synerise/ds-scrollbar": "^0.11.3",
44
- "@synerise/ds-search": "^0.9.0",
45
- "@synerise/ds-search-bar": "^0.6.79",
46
- "@synerise/ds-tooltip": "^0.14.32",
36
+ "@synerise/ds-button": "^0.21.4",
37
+ "@synerise/ds-dropdown": "^0.18.6",
38
+ "@synerise/ds-icon": "^0.64.1",
39
+ "@synerise/ds-input": "^0.23.3",
40
+ "@synerise/ds-list-item": "^0.4.2",
41
+ "@synerise/ds-popconfirm": "^0.10.43",
42
+ "@synerise/ds-result": "^0.6.61",
43
+ "@synerise/ds-scrollbar": "^0.11.4",
44
+ "@synerise/ds-search": "^0.9.2",
45
+ "@synerise/ds-search-bar": "^0.6.81",
46
+ "@synerise/ds-tooltip": "^0.14.34",
47
47
  "@synerise/ds-typography": "^0.15.1",
48
48
  "react-intl": "3.12.0"
49
49
  },
@@ -52,5 +52,5 @@
52
52
  "react": ">=16.9.0 <= 17.0.2",
53
53
  "styled-components": "5.0.1"
54
54
  },
55
- "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
55
+ "gitHead": "4e55972a1ad60990a53ba6559dc2b200ae24556f"
56
56
  }