@synerise/ds-autocomplete 0.7.8 → 0.7.10

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 +19 -0
  2. package/dist/Autocomplete.js +57 -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,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.7.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.7.9...@synerise/ds-autocomplete@0.7.10) (2024-05-10)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **input:** refactored autosize input solution ([449bd86](https://github.com/Synerise/synerise-design/commit/449bd868b8d3b545ac582c556fa0ff607c77f853))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-autocomplete
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.7.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.7.7...@synerise/ds-autocomplete@0.7.8) (2024-05-08)
7
26
 
8
27
  **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,76 @@ 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
+ })))), 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
97
  disabled: disabled
103
98
  }, description)));
104
99
  };
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}.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.8",
3
+ "version": "0.7.10",
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.0",
36
+ "@synerise/ds-input": "^0.21.2",
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.3",
46
+ "@synerise/ds-utils": "^0.26.5",
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": "700312e731dcbedacd206fd1d3389e5725c80d24"
51
+ "gitHead": "dea3898f262a7c333c6fd8ef806036ed4368bde7"
51
52
  }