@synerise/ds-autocomplete 0.5.14 → 0.6.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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +3 -2
  3. package/dist/Autocomplete.js +4 -1
  4. package/dist/Autocomplete.styles.d.ts +1 -0
  5. package/dist/Autocomplete.styles.js +13 -1
  6. package/dist/Autocomplete.types.d.ts +1 -0
  7. package/package.json +4 -4
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.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.6.0...@synerise/ds-autocomplete@0.6.1) (2024-02-06)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-autocomplete
9
+
10
+
11
+
12
+
13
+
14
+ # [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.5.14...@synerise/ds-autocomplete@0.6.0) (2024-01-24)
15
+
16
+
17
+ ### Features
18
+
19
+ * **autocomplete:** add readonly prop ([e16133f](https://github.com/Synerise/synerise-design/commit/e16133f91e317c3019e844c615b77811c9ce2114))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.5.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.5.13...@synerise/ds-autocomplete@0.5.14) (2024-01-17)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-autocomplete
package/README.md CHANGED
@@ -39,7 +39,8 @@ import Autocomplete from '@synerise/ds-autocomplete'
39
39
  | dropdownMenuStyle | additional style applied to dropdown menu | object | |
40
40
  | defaultActiveFirstOption | Whether active first option by default | boolean | `true` |
41
41
  | defaultValue | Initial selected option. | string or string[] | - |
42
- | disabled | Whether disabled select | boolean |`false` |
42
+ | disabled | Whether disabled select | boolean |- |
43
+ | readonly | Whether disabled select with readonly styles applied | boolean | - |
43
44
  | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | `true` |
44
45
  | optionLabelProp | Which prop value of option will render as content of select. | string | children |
45
46
  | placeholder | placeholder of input | string | - |
@@ -56,4 +57,4 @@ import Autocomplete from '@synerise/ds-autocomplete'
56
57
  | errorText | error message, if provided input will be set in error state | string | - |
57
58
  | label | input label | string | - |
58
59
  | description | input description | string | - |
59
- | autoResize | 'resize' width of the input based on width of the text in input | boolean / { minWidth: string; maxWidth: string } | `false` | minWidth: '', maxWidth: '' |
60
+ | autoResize | 'resize' width of the input based on width of the text in input | boolean / { minWidth: string; maxWidth: string } | `false` | minWidth: '', maxWidth: '' |
package/dist/Autocomplete.js CHANGED
@@ -16,7 +16,8 @@ var Autocomplete = function Autocomplete(props) {
16
16
  disabled = props.disabled,
17
17
  error = props.error,
18
18
  handleInputRef = props.handleInputRef,
19
- autoResize = props.autoResize;
19
+ autoResize = props.autoResize,
20
+ readOnly = props.readOnly;
20
21
  var inputRef = useRef(undefined);
21
22
  useEffect(function () {
22
23
  handleInputRef && handleInputRef(inputRef);
@@ -42,6 +43,7 @@ var Autocomplete = function Autocomplete(props) {
42
43
  } : {}, props, {
43
44
  // @ts-ignore
44
45
  ref: inputRef,
46
+ disabled: readOnly || disabled,
45
47
  dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
46
48
  getPopupContainer: getParentNode
47
49
  }));
@@ -51,6 +53,7 @@ var Autocomplete = function Autocomplete(props) {
51
53
  autoResize: autoResize,
52
54
  className: "ds-autocomplete " + (className || '')
53
55
  }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(S.ComponentWrapper, {
56
+ readOnly: readOnly,
54
57
  error: !!errorText || error
55
58
  }, 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, {
56
59
  disabled: disabled
package/dist/Autocomplete.styles.d.ts CHANGED
@@ -16,4 +16,5 @@ export declare const AutocompleteWrapper: import("styled-components").StyledComp
16
16
  }, never>;
17
17
  export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {
18
18
  error?: boolean | undefined;
19
+ readOnly?: boolean | undefined;
19
20
  }, never>;
package/dist/Autocomplete.styles.js CHANGED
@@ -36,6 +36,14 @@ var error = function error() {
36
36
  });
37
37
  };
38
38
 
39
+ var readonly = function readonly() {
40
+ return css(["background-color:", ";color:", ";input{cursor:auto;}"], function (props) {
41
+ return props.theme.palette.white;
42
+ }, function (props) {
43
+ return props.theme.palette['grey-700'];
44
+ });
45
+ };
46
+
39
47
  function autoresizeConfObjToCss(_ref) {
40
48
  var autoResize = _ref.autoResize;
41
49
  if (!autoResize) return '';
@@ -62,7 +70,11 @@ export var AutocompleteWrapper = styled.div.withConfig({
62
70
  export var ComponentWrapper = styled.div.withConfig({
63
71
  displayName: "Autocompletestyles__ComponentWrapper",
64
72
  componentId: "sc-10de6ms-5"
65
- })([".ant-select-auto-complete{", "}}"], function (props) {
73
+ })(["&&&{.ant-select-auto-complete{", "}}}"], function (props) {
74
+ if (props.readOnly) {
75
+ return css([".ant-select-selector{&:hover{", "}", "}"], readonly(), readonly());
76
+ }
77
+
66
78
  if (props.error) {
67
79
  return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
68
80
  }
package/dist/Autocomplete.types.d.ts CHANGED
@@ -7,6 +7,7 @@ export type OverrideProps = {
7
7
  label?: ReactNode | string;
8
8
  description?: ReactNode | string;
9
9
  error?: boolean;
10
+ readOnly?: boolean;
10
11
  handleInputRef?: (ref: MutableRefObject<Select | undefined>) => void;
11
12
  autoResize?: boolean | {
12
13
  minWidth: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-autocomplete",
3
- "version": "0.5.14",
3
+ "version": "0.6.1",
4
4
  "description": "Autocomplete UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,8 +33,8 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-input": "^0.19.14",
37
- "@synerise/ds-typography": "^0.14.1"
36
+ "@synerise/ds-input": "^0.19.16",
37
+ "@synerise/ds-typography": "^0.14.3"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
47
47
  "@testing-library/jest-dom": "5.1.1",
48
48
  "@testing-library/react": "10.0.1"
49
49
  },
50
- "gitHead": "16918244eff3f4e37db24ae3d90687d4e6a233a4"
50
+ "gitHead": "413b02fb31c0c6fb8631fde0bc5b00e16f7f30b7"
51
51
  }