@synerise/ds-autocomplete 0.5.0 → 0.5.1

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 +8 -0
  2. package/dist/Autocomplete.js +12 -3
  3. package/dist/Autocomplete.styles.d.ts +3 -0
  4. package/dist/Autocomplete.styles.js +12 -2
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.5.0...@synerise/ds-autocomplete@0.5.1) (2023-09-19)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-autocomplete
9
+
10
+
11
+
12
+
13
+
6
14
  # [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.4.50...@synerise/ds-autocomplete@0.5.0) (2023-09-18)
7
15
 
8
16
 
package/dist/Autocomplete.js CHANGED
@@ -28,15 +28,22 @@ var Autocomplete = function Autocomplete(props) {
28
28
 
29
29
  var renderAutoCompleteComponent = function renderAutoCompleteComponent() {
30
30
  var Component = autoResize ? AutosizeInput : AntdAutoComplete;
31
+ var autosizeProps = autoResize ? {
32
+ transformRef: function transformRef(el) {
33
+ return el.querySelector('input');
34
+ },
35
+ refPropName: 'inputRef',
36
+ extraWidth: 24
37
+ } : {};
31
38
  return /*#__PURE__*/React.createElement(Component, _extends({}, autoResize ? {
32
39
  renderInput: AntdAutoComplete,
33
- autoResize: autoResize
40
+ autoResize: autoResize,
41
+ autosizeProps: autosizeProps
34
42
  } : {}, props, {
35
43
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
36
44
  // @ts-ignore
37
45
  ref: inputRef,
38
46
  dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
39
- className: !!errorText || error ? 'error' : undefined,
40
47
  getPopupContainer: getParentNode
41
48
  }));
42
49
  };
@@ -44,7 +51,9 @@ var Autocomplete = function Autocomplete(props) {
44
51
  return /*#__PURE__*/React.createElement(S.AutocompleteWrapper, {
45
52
  autoResize: autoResize,
46
53
  className: "ds-autocomplete " + (className || '')
47
- }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), renderAutoCompleteComponent(), errorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, /*#__PURE__*/React.createElement(ErrorText, null, errorText)), description && /*#__PURE__*/React.createElement(S.DescWrapper, null, description && /*#__PURE__*/React.createElement(Description, {
54
+ }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(S.ComponentWrapper, {
55
+ error: !!errorText || error
56
+ }, renderAutoCompleteComponent()), errorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, /*#__PURE__*/React.createElement(ErrorText, null, errorText)), description && /*#__PURE__*/React.createElement(S.DescWrapper, null, description && /*#__PURE__*/React.createElement(Description, {
48
57
  disabled: disabled
49
58
  }, description)));
50
59
  };
package/dist/Autocomplete.styles.d.ts CHANGED
@@ -14,3 +14,6 @@ export declare const AutocompleteWrapper: import("styled-components").StyledComp
14
14
  maxWidth: string;
15
15
  } | undefined;
16
16
  }, never>;
17
+ export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {
18
+ error?: boolean | undefined;
19
+ }, never>;
package/dist/Autocomplete.styles.js CHANGED
@@ -50,12 +50,22 @@ function autoresizeConfObjToCss(_ref) {
50
50
  export var AutocompleteWrapper = styled.div.withConfig({
51
51
  displayName: "Autocompletestyles__AutocompleteWrapper",
52
52
  componentId: "sc-10de6ms-4"
53
- })([".ant-select-auto-complete{width:", ";", ";grid-area:1 / 1;}.ant-select > span{position:absolute;left:0;top:0;}.ant-select-dropdown{&.ant-select{.ant-input{transition:ease-in-out all 0.3s;&:focus{", " &:hover{", "}}}}&.error{.ant-select-selector{&:hover{", "}", "}}.ant-select-selection__rendered{margin:0;}.ant-select-selection:hover .ant-select-selection__rendered{margin-right:10px;}&.ant-select .ant-input{padding:8px 12px;}.ant-select-selection__clear{font-size:15px;color:", ";width:16px;height:16px;margin-top:-7px;}&.ant-select:not(.ant-select-no-arrow) .ant-select-selection__clear{right:12px;&:hover{color:", ";}}.ant-select-selection-placeholder{padding-left:3px;}.ant-select-dropdown{padding:8px;}.ant-select-dropdown-menu-item{font-weight:normal;strong{font-weight:500;}}}.ant-select-selection-search-input{padding:0;}"], function (props) {
53
+ })([".ant-select-auto-complete{width:", ";", ";grid-area:1 / 1;}.ant-select > span{position:absolute;left:0;top:0;}.ant-select-dropdown{.ant-select-selection__rendered{margin:0;}.ant-select-selection:hover .ant-select-selection__rendered{margin-right:10px;}.ant-select-selection__clear{font-size:15px;color:", ";width:16px;height:16px;margin-top:-7px;}&.ant-select:not(.ant-select-no-arrow) .ant-select-selection__clear{right:12px;&:hover{color:", ";}}.ant-select-dropdown-menu-item{font-weight:normal;strong{font-weight:500;}}}.ant-select-selection-search-input{padding:0;}"], function (props) {
54
54
  return props.autoResize ? '100%' : '200px';
55
55
  }, function (props) {
56
56
  return autoresizeConfObjToCss(props);
57
- }, active(), active(), error(), error(), function (props) {
57
+ }, function (props) {
58
58
  return props.theme.palette['grey-600'];
59
59
  }, function (props) {
60
60
  return props.theme.palette['grey-700'];
61
+ });
62
+ export var ComponentWrapper = styled.div.withConfig({
63
+ displayName: "Autocompletestyles__ComponentWrapper",
64
+ componentId: "sc-10de6ms-5"
65
+ })([".ant-select-auto-complete{", "}}"], function (props) {
66
+ if (props.error) {
67
+ return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
68
+ }
69
+
70
+ return css(["&.ant-select{.ant-input{transition:ease-in-out all 0.3s;&:focus{", " &:hover{", "}}}}"], active(), active());
61
71
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-autocomplete",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "description": "Autocomplete UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,7 +32,7 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-input": "^0.19.0",
35
+ "@synerise/ds-input": "^0.19.1",
36
36
  "@synerise/ds-typography": "^0.12.10"
37
37
  },
38
38
  "peerDependencies": {
@@ -46,5 +46,5 @@
46
46
  "@testing-library/jest-dom": "5.1.1",
47
47
  "@testing-library/react": "10.0.1"
48
48
  },
49
- "gitHead": "ef59143e0ab93cee5b9a738fa1fa9c60748ddffc"
49
+ "gitHead": "dcdec905a4a36109a33d28d9d31fc0b4af51567e"
50
50
  }