@synerise/ds-select 0.14.37 → 0.15.0
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.
- package/CHANGELOG.md +25 -0
- package/README.md +5 -4
- package/dist/Select.js +5 -3
- package/dist/Select.styles.d.ts +1 -0
- package/dist/Select.styles.js +14 -10
- package/dist/Select.types.d.ts +6 -3
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,31 @@
|
|
|
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.15.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@0.14.38...@synerise/ds-select@0.15.0) (2023-03-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **select:** fixes styles ([2913902](https://github.com/synerise/synerise-design/commit/2913902949e99eea558f5a29c317edce54a1fee1))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **input-number:** adds wrapper element for select component ([2a7c8df](https://github.com/synerise/synerise-design/commit/2a7c8df4d939067e4f3ab27bc0d0963e4c199598))
|
|
17
|
+
* **select:** adds tooltipConfig property ([0df3e95](https://github.com/synerise/synerise-design/commit/0df3e95638e58b8aca04653caa83a7086c9eb88e))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [0.14.38](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@0.14.37...@synerise/ds-select@0.14.38) (2023-03-02)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @synerise/ds-select
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
## [0.14.37](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@0.14.36...@synerise/ds-select@0.14.37) (2023-03-02)
|
|
7
32
|
|
|
8
33
|
**Note:** Version bump only for package @synerise/ds-select
|
package/README.md
CHANGED
|
@@ -103,6 +103,7 @@ const { Option, OptGroup } = Select;
|
|
|
103
103
|
| suffixIcon | The custom suffix icon | React.ReactNode | - |
|
|
104
104
|
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[] | |
|
|
105
105
|
| tooltip | Tooltip content | React.ReactNode | - |
|
|
106
|
+
| tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
|
|
106
107
|
| value | Current selected option. | `string` / `string[]` / `number` / `number[]` / `LabeledValue` / `LabeledValue[]` | - |
|
|
107
108
|
|
|
108
109
|
### Option props
|
|
@@ -117,7 +118,7 @@ const { Option, OptGroup } = Select;
|
|
|
117
118
|
|
|
118
119
|
### Option group props
|
|
119
120
|
|
|
120
|
-
| Property | Description | Type
|
|
121
|
-
| -------- | ---------------- |
|
|
122
|
-
| key | Key of an option | string
|
|
123
|
-
| label | Group label | `string | React.Element` | -
|
|
121
|
+
| Property | Description | Type | Default | |
|
|
122
|
+
| -------- | ---------------- | ------- | -------------- | --- |
|
|
123
|
+
| key | Key of an option | string | - | |
|
|
124
|
+
| label | Group label | `string | React.Element` | - |
|
package/dist/Select.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["label", "description", "errorText", "error", "tooltip", "clearTooltip", "prefixel", "suffixel", "style", "listHeight", "className", "getPopupContainer", "grey"];
|
|
1
|
+
var _excluded = ["label", "description", "errorText", "error", "tooltip", "tooltipConfig", "clearTooltip", "prefixel", "suffixel", "style", "listHeight", "className", "getPopupContainer", "grey"];
|
|
2
2
|
|
|
3
3
|
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); }
|
|
4
4
|
|
|
@@ -36,6 +36,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
36
36
|
errorText = _this$props.errorText,
|
|
37
37
|
error = _this$props.error,
|
|
38
38
|
tooltip = _this$props.tooltip,
|
|
39
|
+
tooltipConfig = _this$props.tooltipConfig,
|
|
39
40
|
clearTooltip = _this$props.clearTooltip,
|
|
40
41
|
prefixel = _this$props.prefixel,
|
|
41
42
|
suffixel = _this$props.suffixel,
|
|
@@ -48,9 +49,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
48
49
|
antdProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
|
49
50
|
|
|
50
51
|
var size = antdProps.size;
|
|
51
|
-
return /*#__PURE__*/React.createElement(
|
|
52
|
+
return /*#__PURE__*/React.createElement(S.SelectContainer, null, /*#__PURE__*/React.createElement(S.Label, {
|
|
52
53
|
label: label,
|
|
53
|
-
tooltip: tooltip
|
|
54
|
+
tooltip: tooltip,
|
|
55
|
+
tooltipConfig: tooltipConfig
|
|
54
56
|
}), /*#__PURE__*/React.createElement(S.SelectWrapper, {
|
|
55
57
|
grey: grey,
|
|
56
58
|
error: Boolean(errorText),
|
package/dist/Select.styles.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Props } from './Select.types';
|
|
3
|
+
export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
4
|
export declare const AntdSelect: import("styled-components").StyledComponent<React.ComponentType<Props<import("antd/lib/select").SelectValue>>, any, {
|
|
4
5
|
size?: string | undefined;
|
|
5
6
|
prefixel?: boolean | undefined;
|
package/dist/Select.styles.js
CHANGED
|
@@ -26,9 +26,13 @@ var addonStyles = function addonStyles(props) {
|
|
|
26
26
|
return "\n display: flex;\n align-items: center;\n background: " + props.theme.palette['grey-050'] + ";\n box-shadow: inset 0 0 0 1px " + props.theme.palette['grey-300'] + ";\n color: " + props.theme.palette['grey-500'] + ";\n font-size:13px;\n line-height: 1.39;\n ";
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
+
export var SelectContainer = styled.div.withConfig({
|
|
30
|
+
displayName: "Selectstyles__SelectContainer",
|
|
31
|
+
componentId: "n9lk0v-0"
|
|
32
|
+
})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;"]);
|
|
29
33
|
export var AntdSelect = styled(Select).withConfig({
|
|
30
34
|
displayName: "Selectstyles__AntdSelect",
|
|
31
|
-
componentId: "n9lk0v-
|
|
35
|
+
componentId: "n9lk0v-1"
|
|
32
36
|
})(["", " &&{.ant-select-selector{", "}&&&{width:100%;.ant-select-clear{height:18px;background-position:center;background-repeat:no-repeat;background-size:contain;top:50%;right:8px;transform-origin:50% 25%;display:flex;transform:translateY(-50%);align-items:center;justify-content:center;margin-top:0;}.ant-select-selector{", " ", "}span[aria-label='search']{svg{display:none;}width:24px;height:24px;background-color:rgba(0,0,0,0);background-image:", ";}}&.error{.ant-select-selector{", "}.ant-select-clear{background-color:", ";}}"], function (props) {
|
|
33
37
|
return props.size === 'large' && "\n &&& {\n height:48px;\n .ant-select-selector, .ant-select-selection-search-input{\n height:48px !important;\n }\n\n .ant-select-selection-item, .ant-select-selection-placeholder{\n line-height:46px !important;\n }\n }\n ";
|
|
34
38
|
}, function (props) {
|
|
@@ -46,47 +50,47 @@ export var AntdSelect = styled(Select).withConfig({
|
|
|
46
50
|
});
|
|
47
51
|
export var AntdSelectOption = styled(Option).withConfig({
|
|
48
52
|
displayName: "Selectstyles__AntdSelectOption",
|
|
49
|
-
componentId: "n9lk0v-
|
|
53
|
+
componentId: "n9lk0v-2"
|
|
50
54
|
})([""]);
|
|
51
55
|
export var AntdSelectOptGroup = styled(OptGroup).withConfig({
|
|
52
56
|
displayName: "Selectstyles__AntdSelectOptGroup",
|
|
53
|
-
componentId: "n9lk0v-
|
|
57
|
+
componentId: "n9lk0v-3"
|
|
54
58
|
})([""]);
|
|
55
59
|
export var LabelWrapper = styled.div.withConfig({
|
|
56
60
|
displayName: "Selectstyles__LabelWrapper",
|
|
57
|
-
componentId: "n9lk0v-
|
|
61
|
+
componentId: "n9lk0v-4"
|
|
58
62
|
})(["margin:0 0 8px 0;"]);
|
|
59
63
|
export var ErrorWrapper = styled.div.withConfig({
|
|
60
64
|
displayName: "Selectstyles__ErrorWrapper",
|
|
61
|
-
componentId: "n9lk0v-
|
|
65
|
+
componentId: "n9lk0v-5"
|
|
62
66
|
})(["margin:", ";"], function (props) {
|
|
63
67
|
return props.description ? '8px 0 0' : '8px 0 16px';
|
|
64
68
|
});
|
|
65
69
|
export var DescWrapper = styled.div.withConfig({
|
|
66
70
|
displayName: "Selectstyles__DescWrapper",
|
|
67
|
-
componentId: "n9lk0v-
|
|
71
|
+
componentId: "n9lk0v-6"
|
|
68
72
|
})(["margin:", ";"], function (props) {
|
|
69
73
|
return props.withError ? '4px 0 16px' : '8px 0 16px';
|
|
70
74
|
});
|
|
71
75
|
export var Label = styled(DSLabel).withConfig({
|
|
72
76
|
displayName: "Selectstyles__Label",
|
|
73
|
-
componentId: "n9lk0v-
|
|
77
|
+
componentId: "n9lk0v-7"
|
|
74
78
|
})(["margin-bottom:8px;span > .ds-icon > svg{margin-top:-1px;}"]);
|
|
75
79
|
export var PrefixWrapper = styled.div.withConfig({
|
|
76
80
|
displayName: "Selectstyles__PrefixWrapper",
|
|
77
|
-
componentId: "n9lk0v-
|
|
81
|
+
componentId: "n9lk0v-8"
|
|
78
82
|
})(["border-radius:3px 0 0 3px;margin-right:-2px;padding-right:1px;", ";"], function (props) {
|
|
79
83
|
return addonStyles(props);
|
|
80
84
|
});
|
|
81
85
|
export var SuffixWrapper = styled.div.withConfig({
|
|
82
86
|
displayName: "Selectstyles__SuffixWrapper",
|
|
83
|
-
componentId: "n9lk0v-
|
|
87
|
+
componentId: "n9lk0v-9"
|
|
84
88
|
})(["border-radius:0 3px 3px 0;margin-left:-1px;", ";"], function (props) {
|
|
85
89
|
return addonStyles(props);
|
|
86
90
|
});
|
|
87
91
|
export var SelectWrapper = styled.div.withConfig({
|
|
88
92
|
displayName: "Selectstyles__SelectWrapper",
|
|
89
|
-
componentId: "n9lk0v-
|
|
93
|
+
componentId: "n9lk0v-10"
|
|
90
94
|
})(["display:flex;", ""], function (props) {
|
|
91
95
|
return props.grey && !props.error && css(["&&{.ant-select-selector{background-color:", ";}}"], props.theme.palette['grey-050']);
|
|
92
96
|
});
|
package/dist/Select.types.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import { SelectProps, SelectValue } from 'antd/lib/select';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import type { SelectProps, SelectValue } from 'antd/lib/select';
|
|
2
|
+
import type { TooltipProps } from 'antd/lib/tooltip';
|
|
3
|
+
import type * as React from 'react';
|
|
4
|
+
import type { CSSObject } from 'styled-components';
|
|
5
|
+
import type TooltipExtendedProps from '@synerise/ds-tooltip/dist/Tooltip.types';
|
|
4
6
|
export interface Props<T = SelectValue> extends Omit<SelectProps<T>, 'listHeight'> {
|
|
5
7
|
errorText?: React.ReactNode | string;
|
|
6
8
|
error?: boolean;
|
|
7
9
|
label?: React.ReactNode;
|
|
8
10
|
description?: React.ReactNode;
|
|
9
11
|
tooltip?: React.ReactNode;
|
|
12
|
+
tooltipConfig?: TooltipExtendedProps & TooltipProps;
|
|
10
13
|
clearTooltip?: string;
|
|
11
14
|
prefixel?: React.ReactNode;
|
|
12
15
|
suffixel?: React.ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "Select UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-icon": "^0.
|
|
36
|
-
"@synerise/ds-input": "^0.18.
|
|
35
|
+
"@synerise/ds-icon": "^0.54.0",
|
|
36
|
+
"@synerise/ds-input": "^0.18.36",
|
|
37
37
|
"@synerise/ds-typography": "^0.12.7",
|
|
38
38
|
"classnames": "^2.2.6"
|
|
39
39
|
},
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@synerise/ds-utils": "^0.19.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
|
|
49
49
|
}
|