@synerise/ds-autocomplete 0.7.9 → 0.8.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/Autocomplete.js +58 -62
  3. package/dist/Autocomplete.styles.js +3 -3
  4. package/dist/Autocomplete.types.d.ts +7 -6
  5. package/dist/style/index.css +1 -1
  6. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.7.10...@synerise/ds-autocomplete@0.8.0) (2024-05-16)
7
+
8
+
9
+ ### Features
10
+
11
+ * **storybook7:** SB7.5 install and config ([abfced9](https://github.com/Synerise/synerise-design/commit/abfced90c2661903338bff0f7022149fbf7583b9))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.7.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.7.9...@synerise/ds-autocomplete@0.7.10) (2024-05-10)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **input:** refactored autosize input solution ([449bd86](https://github.com/Synerise/synerise-design/commit/449bd868b8d3b545ac582c556fa0ff607c77f853))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [0.7.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.7.8...@synerise/ds-autocomplete@0.7.9) (2024-05-08)
7
29
 
8
30
  **Note:** Version bump only for package @synerise/ds-autocomplete
package/dist/Autocomplete.js CHANGED
@@ -1,19 +1,18 @@
1
- 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); }
2
-
3
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
1
+ var _excluded = ["className", "label", "description", "errorText", "disabled", "error", "handleInputRef", "getPopupContainer", "autoResize", "readOnly"];
4
2
 
5
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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); }
6
4
 
7
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
8
6
 
9
7
  import React, { useRef, useEffect } from 'react';
10
8
  import '@synerise/ds-core/dist/js/style';
11
9
  import "./style/index.css";
12
10
  import AntdAutoComplete from 'antd/lib/auto-complete';
13
11
  import { ErrorText, Description, Label } from '@synerise/ds-typography';
14
- import { AutosizeInput } from '@synerise/ds-input';
15
- import { useResizeToFit } from '@synerise/ds-utils';
12
+ import { AutosizeWrapper } from '@synerise/ds-input';
13
+ import { useResizeObserver } from '@synerise/ds-utils';
16
14
  import * as S from './Autocomplete.styles';
15
+ var AUTOSIZE_EXTRA_WIDTH = 27;
17
16
 
18
17
  var Autocomplete = function Autocomplete(props) {
19
18
  var className = props.className,
@@ -25,80 +24,77 @@ var Autocomplete = function Autocomplete(props) {
25
24
  handleInputRef = props.handleInputRef,
26
25
  getPopupContainer = props.getPopupContainer,
27
26
  autoResize = props.autoResize,
28
- readOnly = props.readOnly;
29
- var inputRef = useRef(undefined);
27
+ readOnly = props.readOnly,
28
+ rest = _objectWithoutPropertiesLoose(props, _excluded);
29
+
30
+ var scrollLeftRef = useRef(0);
31
+ var antSelectRef = useRef(null);
32
+ var inputRef = useRef(null);
33
+ var autosizeRef = useRef(null);
30
34
  var autocompleteInputRef = useRef(null);
35
+ var elementRef = useRef(null);
36
+ useResizeObserver(elementRef);
31
37
  useEffect(function () {
32
- handleInputRef && handleInputRef(inputRef);
33
- }, [inputRef, handleInputRef]);
38
+ handleInputRef && handleInputRef(antSelectRef);
39
+ }, [antSelectRef, handleInputRef]);
40
+ useEffect(function () {
41
+ if (autosizeRef.current) {
42
+ autocompleteInputRef.current = autosizeRef.current.wrapperRef.current;
43
+ inputRef.current = autosizeRef.current.inputRef.current;
44
+ }
45
+ }, []);
34
46
 
35
47
  var getParentNode = function getParentNode(triggerNode) {
36
48
  return triggerNode.parentNode;
37
49
  };
38
50
 
39
- var renderAutoCompleteComponent = function renderAutoCompleteComponent() {
40
- var Component = autoResize ? AutosizeInput : AntdAutoComplete;
41
- var autosizeProps = autoResize ? {
42
- transformRef: function transformRef(el) {
43
- return el.querySelector('input');
44
- },
45
- refPropName: 'inputRef',
46
- extraWidth: 25,
47
- inputRef: function inputRef(_inputRef, originalInput) {
48
- autocompleteInputRef.current = originalInput;
49
- }
50
- } : {};
51
- return /*#__PURE__*/React.createElement(Component, _extends({}, autoResize ? _objectSpread({
52
- renderInput: AntdAutoComplete,
53
- autoResize: autoResize
54
- }, autosizeProps) : {}, props, {
55
- // @ts-ignore
56
- ref: inputRef,
57
- disabled: readOnly || disabled,
58
- dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
59
- getPopupContainer: getPopupContainer || getParentNode
60
- }));
61
- };
51
+ var stretchToFit = autoResize && autoResize !== true && Boolean(autoResize.stretchToFit);
52
+ var placeholder = typeof rest.placeholder === 'string' ? rest.placeholder : undefined;
62
53
 
63
- var stretchToFit = typeof autoResize === 'object' && Boolean(autoResize.stretchToFit);
54
+ var handlePreAutosize = function handlePreAutosize() {
55
+ var _inputRef$current;
64
56
 
65
- var _useResizeToFit = useResizeToFit({
66
- onResize: function onResize(width) {
67
- if (autocompleteInputRef.current) {
68
- autocompleteInputRef.current.style.maxWidth = width + 5 + "px";
69
- }
70
- },
71
- autoObserve: true
72
- }),
73
- observe = _useResizeToFit.observe,
74
- disconnect = _useResizeToFit.disconnect,
75
- elementRef = _useResizeToFit.elementRef;
57
+ scrollLeftRef.current = ((_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.scrollLeft) || 0;
58
+ autocompleteInputRef.current && autocompleteInputRef.current.style.removeProperty('max-width');
59
+ };
76
60
 
77
- useEffect(function () {
78
- if (elementRef.current) {
79
- if (stretchToFit) {
80
- observe();
81
- } else {
82
- disconnect();
61
+ var handleAutosize = function handleAutosize() {
62
+ var parentRect = elementRef.current && elementRef.current.getBoundingClientRect();
83
63
 
84
- if (autocompleteInputRef.current) {
85
- autocompleteInputRef.current.style.removeProperty('max-width');
86
- }
87
- }
64
+ if (stretchToFit && autocompleteInputRef.current && parentRect != null && parentRect.width) {
65
+ autocompleteInputRef.current.style.maxWidth = (parentRect == null ? void 0 : parentRect.width) + 1 + "px";
66
+ inputRef.current && inputRef.current.scrollTo(scrollLeftRef.current, 0);
88
67
  }
68
+ };
69
+
70
+ var transformRef = function transformRef(element) {
71
+ autocompleteInputRef.current = element;
72
+ return element.querySelector('input');
73
+ };
89
74
 
90
- return function () {
91
- disconnect();
92
- };
93
- }, [disconnect, observe, stretchToFit, elementRef]);
94
75
  return /*#__PURE__*/React.createElement(S.AutocompleteWrapper, {
76
+ ref: elementRef,
95
77
  autoResize: autoResize,
96
78
  className: "ds-autocomplete " + (className || '')
97
79
  }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(S.ComponentWrapper, {
98
- ref: elementRef,
99
80
  readOnly: readOnly,
100
81
  error: !!errorText || error
101
- }, 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, {
82
+ }, /*#__PURE__*/React.createElement(AutosizeWrapper, {
83
+ autoResize: !!autoResize,
84
+ value: rest.value,
85
+ placeholder: placeholder,
86
+ transformRef: transformRef,
87
+ ref: autosizeRef,
88
+ extraWidth: AUTOSIZE_EXTRA_WIDTH,
89
+ preAutosize: handlePreAutosize,
90
+ onAutosize: handleAutosize
91
+ }, /*#__PURE__*/React.createElement(AntdAutoComplete, _extends({}, rest, {
92
+ disabled: readOnly || disabled,
93
+ dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
94
+ getPopupContainer: getPopupContainer || getParentNode,
95
+ ref: antSelectRef,
96
+ "data-testid": "autosize-input"
97
+ })))), 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, {
102
98
  disabled: disabled
103
99
  }, description)));
104
100
  };
package/dist/Autocomplete.styles.js CHANGED
@@ -18,7 +18,7 @@ export var LoaderWrapper = styled.div.withConfig({
18
18
  })(["margin-right:10px;"]);
19
19
 
20
20
  var active = function active() {
21
- return css(["transition:ease-in-out all 0.2s;box-shadow:inset 0 0 0 1px ", ";border:1px solid ", ";background-color:", ";"], function (props) {
21
+ return css(["transition:ease-in-out all 0.2s,width 0s,min-width 0s,max-width 0s;box-shadow:inset 0 0 0 1px ", ";border:1px solid ", ";background-color:", ";"], function (props) {
22
22
  return props.theme.palette['blue-600'];
23
23
  }, function (props) {
24
24
  return props.theme.palette['blue-600'];
@@ -28,7 +28,7 @@ var active = function active() {
28
28
  };
29
29
 
30
30
  var error = function error() {
31
- return css(["transition:ease-in-out all 0.2s;box-shadow:inset 0 0 0 1px ", ";background:", ";border:1px solid ", ";"], function (props) {
31
+ return css(["transition:ease-in-out all 0.2s,width 0s,min-width 0s,max-width 0s;box-shadow:inset 0 0 0 1px ", ";background:", ";border:1px solid ", ";"], function (props) {
32
32
  return props.theme.palette['red-600'];
33
33
  }, function (props) {
34
34
  return props.theme.palette['red-050'];
@@ -69,5 +69,5 @@ export var ComponentWrapper = styled.div.withConfig({
69
69
  return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
70
70
  }
71
71
 
72
- return css(["&.ant-select{.ant-select-selector{padding:0 10px;}.ant-input{transition:ease-in-out all 0.3s;&:focus{", " &:hover{", "}}}}"], active(), active());
72
+ return css(["&.ant-select{.ant-select-selector{padding:0 10px;}.ant-input{transition:ease-in-out all 0.3s,width 0s,min-width 0s,max-width 0s;&:focus{", " &:hover{", "}}}}"], active(), active());
73
73
  });
package/dist/Autocomplete.types.d.ts CHANGED
@@ -1,16 +1,17 @@
1
- import { ReactNode, MutableRefObject } from 'react';
2
- import { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
1
+ import type { ReactNode, MutableRefObject } from 'react';
2
+ import type { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
3
3
  import Select from 'antd/lib/select';
4
4
  import type { AutoResizeProp } from '@synerise/ds-input';
5
5
  export type OverrideProps = {
6
6
  className?: string;
7
- errorText?: ReactNode | string;
8
- label?: ReactNode | string;
9
- description?: ReactNode | string;
7
+ errorText?: ReactNode;
8
+ label?: ReactNode;
9
+ description?: ReactNode;
10
10
  error?: boolean;
11
11
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
12
12
  readOnly?: boolean;
13
- handleInputRef?: (ref: MutableRefObject<Select | undefined>) => void;
13
+ handleInputRef?: (ref: MutableRefObject<Select | null>) => void;
14
14
  autoResize?: AutoResizeProp;
15
+ placeholder?: ReactNode;
15
16
  };
16
17
  export type AutocompleteProps = OverrideProps & OriginalProps;
package/dist/style/index.css CHANGED
@@ -1 +1 @@
1
- .ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-select-auto-complete{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum'}.ant-select-auto-complete .ant-select-clear{right:13px}.ds-autocomplete-dropdown .ant-select-item-option.ant-select-item-option-active:not(.ant-select-item-option-disabled){color:#57616d;background:#f9fafb}
1
+ .ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-select-auto-complete{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum'}.ant-select-auto-complete .ant-select-clear{right:13px}.ant-select-single .ant-select-selector{display:flex}.ant-select-single .ant-select-selector .ant-select-selection-search{position:absolute;top:0;right:15px;bottom:0;left:15px}.ant-select-single .ant-select-selector .ant-select-selection-search-input{width:100%}.ant-select-single .ant-select-selector .ant-select-selection-item,.ant-select-single .ant-select-selector .ant-select-selection-placeholder{padding:0;line-height:30px;transition:all .3s}@supports (-moz-appearance:meterbar){.ant-select-single .ant-select-selector .ant-select-selection-item,.ant-select-single .ant-select-selector .ant-select-selection-placeholder{line-height:30px}}.ant-select-single .ant-select-selector .ant-select-selection-item{position:relative;user-select:none}.ant-select-single .ant-select-selector .ant-select-selection-placeholder{pointer-events:none}.ant-select-single .ant-select-selector .ant-select-selection-item::after,.ant-select-single .ant-select-selector .ant-select-selection-placeholder::after,.ant-select-single .ant-select-selector::after{display:inline-block;width:0;visibility:hidden;content:'\a0'}.ant-select-single.ant-select-show-arrow .ant-select-selection-search{right:28px}.ant-select-single.ant-select-show-arrow .ant-select-selection-item,.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{padding-right:17px}.ant-select-single.ant-select-open .ant-select-selection-item{color:#b5bdc3}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{position:relative;background-color:#fff;border:1px solid #dbe0e3;border-radius:3px;transition:all .3s cubic-bezier(.645,.045,.355,1);width:100%;height:32px;padding:0 15px}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector input{cursor:pointer}.ant-select-show-search.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{cursor:text}.ant-select-show-search.ant-select-single:not(.ant-select-customize-input) .ant-select-selector input{cursor:auto}.ant-select-focused:not(.ant-select-disabled).ant-select-single:not(.ant-select-customize-input) .ant-select-selector{border-color:#c2cacf;border-right-width:1px!important;outline:0;box-shadow:0 0 0 0 rgba(181,189,195,.2)}.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{color:#b5bdc3;background:#f9fafb;cursor:not-allowed}.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector input{cursor:not-allowed}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{margin:0;padding:0;background:0 0;border:none;outline:0;appearance:none}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{height:30px}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector::after{line-height:30px}.ant-select-single.ant-select-customize-input .ant-select-selector::after{display:none}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-search{position:static;width:100%}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-placeholder{position:absolute;right:0;left:0;padding:0 15px}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-placeholder::after{display:none}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{height:40px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector::after{line-height:38px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input):not(.ant-select-customize-input) .ant-select-selection-search-input{height:38px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector{height:24px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector::after{line-height:22px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input):not(.ant-select-customize-input) .ant-select-selection-search-input{height:22px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selection-search{right:7px;left:7px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector{padding:0 7px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-search{right:26.5px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-item,.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-placeholder{padding-right:19.5px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{padding:0 15px}.ant-select-multiple .ant-select-selector{position:relative;background-color:#fff;border:1px solid #dbe0e3;border-radius:3px;transition:all .3s cubic-bezier(.645,.045,.355,1);display:flex;flex-wrap:wrap;align-items:center;padding:1px 4px}.ant-select-multiple .ant-select-selector input{cursor:pointer}.ant-select-show-search.ant-select-multiple .ant-select-selector{cursor:text}.ant-select-show-search.ant-select-multiple .ant-select-selector input{cursor:auto}.ant-select-focused:not(.ant-select-disabled).ant-select-multiple .ant-select-selector{border-color:#c2cacf;border-right-width:1px!important;outline:0;box-shadow:0 0 0 0 rgba(181,189,195,.2)}.ant-select-disabled.ant-select-multiple .ant-select-selector{color:#b5bdc3;background:#f9fafb;cursor:not-allowed}.ant-select-disabled.ant-select-multiple .ant-select-selector input{cursor:not-allowed}.ant-select-multiple .ant-select-selector .ant-select-selection-search-input{margin:0;padding:0;background:0 0;border:none;outline:0;appearance:none}.ant-select-multiple .ant-select-selector .ant-select-selection-search-input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ant-select-show-search.ant-select-multiple .ant-select-selector{cursor:text}.ant-select-disabled.ant-select-multiple .ant-select-selector{background:#f9fafb;cursor:not-allowed}.ant-select-multiple .ant-select-selector::after{display:inline-block;width:0;margin:2px 0;line-height:24px;content:'\a0'}.ant-select-multiple.ant-select-allow-clear .ant-select-selector,.ant-select-multiple.ant-select-show-arrow .ant-select-selector{padding-right:27px}.ant-select-multiple .ant-select-selection-item{position:relative;display:flex;flex:none;box-sizing:border-box;max-width:100%;height:24px;margin-top:2px;margin-right:4px;margin-bottom:2px;padding:0 4px 0 8px;line-height:22px;background:#f3f5f6;border:1px solid #e9edee;border-radius:3px;cursor:default;transition:font-size .3s,line-height .3s,height .3s;user-select:none}.ant-select-disabled.ant-select-multiple .ant-select-selection-item{color:#bfbfbf;border-color:#dbe0e3;cursor:not-allowed}.ant-select-multiple .ant-select-selection-item-content{display:inline-block;margin-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ant-select-multiple .ant-select-selection-item-remove{color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#232936;font-weight:700;font-size:11px;line-height:inherit;cursor:pointer;display:inline-block;font-size:10px}.ant-select-multiple .ant-select-selection-item-remove>*{line-height:1}.ant-select-multiple .ant-select-selection-item-remove svg{display:inline-block}.ant-select-multiple .ant-select-selection-item-remove::before{display:none}.ant-select-multiple .ant-select-selection-item-remove .ant-select-multiple .ant-select-selection-item-remove-icon{display:block}.ant-select-multiple .ant-select-selection-item-remove>.anticon{vertical-align:-.2em}.ant-select-multiple .ant-select-selection-item-remove:hover{color:rgba(0,0,0,.75)}.ant-select-multiple .ant-select-selection-search{position:relative;margin-left:.5px}.ant-select-multiple .ant-select-selection-search-input,.ant-select-multiple .ant-select-selection-search-mirror{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';line-height:1.38;transition:all .3s}.ant-select-multiple .ant-select-selection-search-input{width:100%;min-width:4.1px}.ant-select-multiple .ant-select-selection-search-mirror{position:absolute;top:0;left:0;z-index:999;white-space:nowrap;visibility:hidden}.ant-select-multiple .ant-select-selection-search:first-child .ant-select-selection-search-input{margin-left:6.5px}.ant-select-multiple .ant-select-selection-placeholder{position:absolute;top:50%;right:15px;left:15px;transform:translateY(-50%);transition:all .3s}.ant-select-multiple.ant-select-lg .ant-select-selector::after{line-height:40px}.ant-select-multiple.ant-select-lg .ant-select-selection-item{height:40px;line-height:38px}.ant-select-multiple.ant-select-lg .ant-select-selection-search{height:41px;line-height:41px}.ant-select-multiple.ant-select-lg .ant-select-selection-search-input,.ant-select-multiple.ant-select-lg .ant-select-selection-search-mirror{height:40px;line-height:38px}.ant-select-multiple.ant-select-sm .ant-select-selector::after{line-height:16px}.ant-select-multiple.ant-select-sm .ant-select-selection-item{height:16px;line-height:14px}.ant-select-multiple.ant-select-sm .ant-select-selection-search{height:17px;line-height:17px}.ant-select-multiple.ant-select-sm .ant-select-selection-search-input,.ant-select-multiple.ant-select-sm .ant-select-selection-search-mirror{height:16px;line-height:14px}.ant-select-multiple.ant-select-sm .ant-select-selection-placeholder{left:7px}.ant-select-multiple.ant-select-sm .ant-select-selection-search:first-child .ant-select-selection-search-input{margin-left:3px}.ant-select-multiple.ant-select-lg .ant-select-selection-item{height:32px;line-height:32px}.ant-select-disabled .ant-select-selection-item-remove{display:none}.ant-select{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;cursor:pointer}.ant-select:not(.ant-select-disabled):hover .ant-select-selector{border-color:#b5bdc3;border-right-width:1px!important}.ant-select-selection-item{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media all and (-ms-high-contrast:none){.ant-select-selection-item,.ant-select-selection-item ::-ms-backdrop{flex:auto}}.ant-select-selection-placeholder{flex:1;overflow:hidden;color:#b5bdc3;white-space:nowrap;text-overflow:ellipsis}@media all and (-ms-high-contrast:none){.ant-select-selection-placeholder,.ant-select-selection-placeholder ::-ms-backdrop{flex:auto}}.ant-select-arrow{display:inline-block;color:inherit;font-style:normal;line-height:0;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;top:53%;right:15px;width:11px;height:11px;margin-top:-5.5px;color:#b5bdc3;font-size:11px;line-height:1;text-align:center;pointer-events:none}.ant-select-arrow>*{line-height:1}.ant-select-arrow svg{display:inline-block}.ant-select-arrow::before{display:none}.ant-select-arrow .ant-select-arrow-icon{display:block}.ant-select-arrow .anticon{vertical-align:top;transition:transform .3s}.ant-select-arrow .anticon>svg{vertical-align:top}.ant-select-arrow .anticon:not(.ant-select-suffix){pointer-events:auto}.ant-select-disabled .ant-select-arrow{cursor:not-allowed}.ant-select-clear{position:absolute;top:50%;right:15px;z-index:1;display:inline-block;width:11px;height:11px;margin-top:-5.5px;color:#b5bdc3;font-size:11px;font-style:normal;line-height:1;text-align:center;text-transform:none;background:#fff;cursor:pointer;opacity:0;transition:color .3s ease,opacity .15s ease;text-rendering:auto}.ant-select-clear::before{display:block}.ant-select-clear:hover{color:#232936}.ant-select:hover .ant-select-clear{opacity:1}.ant-select-dropdown{margin:0;padding:0;color:#6a7580;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:-9999px;left:-9999px;z-index:991050;box-sizing:border-box;padding:4px 0;overflow:hidden;font-size:13px;font-variant:initial;background-color:#fff;border-radius:3px;outline:0;box-shadow:0 2px 6px rgba(171,178,183,.12)}.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft,.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft{animation-name:antSlideUpIn}.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft,.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft{animation-name:antSlideDownIn}.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft{animation-name:antSlideUpOut}.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft{animation-name:antSlideDownOut}.ant-select-dropdown-hidden{display:none}.ant-select-dropdown-empty{color:#b5bdc3}.ant-select-item-empty{position:relative;display:block;min-height:32px;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;color:#b5bdc3}.ant-select-item{position:relative;display:block;min-height:32px;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;cursor:pointer;transition:background .3s ease}.ant-select-item-group{color:#232936;font-size:11px;cursor:default}.ant-select-item-option{display:flex}.ant-select-item-option-content{flex:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ant-select-item-option-state{flex:none}.ant-select-item-option-active:not(.ant-select-item-option-disabled){background-color:#f4faff}.ant-select-item-option-selected:not(.ant-select-item-option-disabled){color:#6a7580;font-weight:500;background-color:#fff}.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state{color:#0b68ff}.ant-select-item-option-disabled{color:#b5bdc3;cursor:not-allowed}.ant-select-item-option-grouped{padding-left:32px}.ant-select-lg{font-size:13px}.ant-select-borderless .ant-select-selector{background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}.ant-select-rtl{direction:rtl}.ant-select-rtl .ant-select-arrow{right:initial;left:15px}.ant-select-rtl .ant-select-clear{right:initial;left:15px}.ant-select-dropdown-rtl{direction:rtl}.ant-select-dropdown-rtl .ant-select-item-option-grouped{padding-right:32px;padding-left:16px}.ant-select-rtl.ant-select-multiple.ant-select-allow-clear .ant-select-selector,.ant-select-rtl.ant-select-multiple.ant-select-show-arrow .ant-select-selector{padding-right:4px;padding-left:27px}.ant-select-rtl.ant-select-multiple .ant-select-selection-item{margin-right:0;margin-left:4px;padding:0 8px 0 4px;text-align:right}.ant-select-rtl.ant-select-multiple .ant-select-selection-item-content{margin-right:0;margin-left:4px;text-align:right}.ant-select-rtl.ant-select-multiple .ant-select-selection-search{margin-right:.5px;margin-left:4px}.ant-select-rtl.ant-select-multiple .ant-select-selection-search-mirror{right:0;left:auto}.ant-select-rtl.ant-select-multiple .ant-select-selection-placeholder{right:15px;left:auto}.ant-select-rtl.ant-select-multiple.ant-select-sm .ant-select-selection-placeholder{right:7px}.ant-select-rtl.ant-select-single .ant-select-selector .ant-select-selection-item,.ant-select-rtl.ant-select-single .ant-select-selector .ant-select-selection-placeholder{right:0;left:9px;text-align:right}.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-search{right:15px;left:28px}.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-item,.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{padding-right:0;padding-left:17px}.ant-select-rtl.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{padding:0 15px}.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-search{right:0}.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-item,.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-placeholder{padding-right:0;padding-left:19.5px}.ds-autocomplete-dropdown .ant-select-item-option.ant-select-item-option-active:not(.ant-select-item-option-disabled){color:#57616d;background:#f9fafb}.ds-autocomplete .ant-select .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input{padding-right:10px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-autocomplete",
3
- "version": "0.7.9",
3
+ "version": "0.8.0",
4
4
  "description": "Autocomplete UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-input": "^0.21.1",
36
+ "@synerise/ds-input": "^0.21.3",
37
37
  "@synerise/ds-typography": "^0.15.0"
38
38
  },
39
39
  "peerDependencies": {
@@ -43,9 +43,10 @@
43
43
  "styled-components": "5.0.1"
44
44
  },
45
45
  "devDependencies": {
46
- "@synerise/ds-utils": "^0.26.4",
46
+ "@synerise/ds-utils": "^0.26.6",
47
47
  "@testing-library/jest-dom": "5.1.1",
48
- "@testing-library/react": "10.0.1"
48
+ "@testing-library/react": "10.0.1",
49
+ "@testing-library/user-event": "^10.3.1"
49
50
  },
50
- "gitHead": "1ad18b4b850f614943cd940a6b509d215ec025c7"
51
+ "gitHead": "fc089bbf34c691a313b3fa648851d7831a23e3d0"
51
52
  }