@synerise/ds-autocomplete 0.4.29 → 0.4.30

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.4.29...@synerise/ds-autocomplete@0.4.30) (2022-11-08)
+
+
+### Bug Fixes
+
+* **autocomplete:** add autoresize to autocomplete ([83d19db](https://github.com/Synerise/synerise-design/commit/83d19dbd0d2e764c84ec7a6337c7f7a8b0264e56))
+* **autocomplete:** fix width of autocomplete ([2dd5aa3](https://github.com/Synerise/synerise-design/commit/2dd5aa3a6e694b341b17c40fcf2ebd605944fb3a))
+* **autocomplete:** fixes to styles and add new story with AutoResize ([aae1581](https://github.com/Synerise/synerise-design/commit/aae15810b4ecab281382f094c203778c99c77f15))
+* **autocomplete:** new prop to control width of autocomplete ([dc60e3b](https://github.com/Synerise/synerise-design/commit/dc60e3b774ee6144201a5c5f9c4911fbeb1b0954))
+
+
+
+
+
 ## [0.4.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.4.28...@synerise/ds-autocomplete@0.4.29) (2022-10-24)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/README.md

@@ -56,3 +56,4 @@ import Autocomplete from '@synerise/ds-autocomplete'
 | errorText                              | error message, if provided input will be set in error state                                                                                                                                                                                              | string                                                                                                                  | -                                                   |
 | label                                  | input label                                                                                                                                                                                                                                              | string                                                                                                                  | -                                                   |
 | description                            | input description                                                                                                                                                                                                                                        | string                                                                                                                  | -                                                   |
+| 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

@@ -1,10 +1,17 @@
+var _excluded = ["className", "label", "description", "errorText", "disabled", "error", "handleInputRef", "autoResize"];
+
 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); }
 
+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; }
+
 import * as React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import "./style/index.css";
 import AntdAutoComplete from 'antd/lib/auto-complete';
 import { ErrorText, Description, Label } from '@synerise/ds-typography';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { AutoResize, WrapperAutoResize } from '@synerise/ds-input';
 import * as S from './Autocomplete.styles';
 
 var Autocomplete = function Autocomplete(props) {
@@ -14,21 +21,34 @@ var Autocomplete = function Autocomplete(props) {
       errorText = props.errorText,
       disabled = props.disabled,
       error = props.error,
-      handleInputRef = props.handleInputRef;
+      handleInputRef = props.handleInputRef,
+      autoResize = props.autoResize,
+      antdAutocompleteProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var inputRef = React.useRef(undefined);
   React.useEffect(function () {
     handleInputRef && handleInputRef(inputRef);
   }, [inputRef, handleInputRef]);
+
+  var renderAutoCompleteComponent = function renderAutoCompleteComponent() {
+    return /*#__PURE__*/React.createElement(AntdAutoComplete // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, props, {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      ref: inputRef,
+      dropdownClassName: "ds-autocomplete-dropdown",
+      className: !!errorText || error ? 'error' : undefined
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(S.AutocompleteWrapper, {
+    autoResize: autoResize,
     className: "ds-autocomplete " + (className || '')
-  }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(AntdAutoComplete // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends({}, props, {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    ref: inputRef,
-    dropdownClassName: "ds-autocomplete-dropdown",
-    className: !!errorText || error ? 'error' : undefined
-  })), 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, {
+  }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), autoResize ? /*#__PURE__*/React.createElement(WrapperAutoResize, {
+    autoResize: autoResize
+  }, renderAutoCompleteComponent(), /*#__PURE__*/React.createElement(AutoResize, {
+    autoResize: autoResize
+  }, antdAutocompleteProps.value)) : 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, {
     disabled: disabled
   }, description)));
 };

package/dist/Autocomplete.styles.d.ts

@@ -2,4 +2,15 @@ export declare const LabelWrapper: import("styled-components").StyledComponent<"
 export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DescWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AutocompleteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare type AutoResizeProps = {
+    autoResize?: boolean | {
+        minWidth: string;
+        maxWidth: string;
+    };
+};
+export declare const AutocompleteWrapper: import("styled-components").StyledComponent<"div", any, {
+    autoResize?: boolean | {
+        minWidth: string;
+        maxWidth: string;
+    } | undefined;
+}, never>;

package/dist/Autocomplete.styles.js

@@ -36,10 +36,25 @@ var error = function error() {
   });
 };
 
+function autoresizeConfObjToCss(_ref) {
+  var autoResize = _ref.autoResize;
+  if (!autoResize) return '';
+
+  if (typeof autoResize === 'object') {
+    return "max-width: " + autoResize.maxWidth + "; min-width: " + autoResize.minWidth;
+  }
+
+  return "max-width: 400px; min-width: 150px;";
+}
+
 export var AutocompleteWrapper = styled.div.withConfig({
   displayName: "Autocompletestyles__AutocompleteWrapper",
   componentId: "sc-10de6ms-4"
-})([".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;}"], active(), active(), error(), error(), function (props) {
+})([".ant-select-auto-complete{width:", ";", ";grid-area:1 / 1;}.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) {
+  return props.autoResize ? '100%' : '200px';
+}, function (props) {
+  return autoresizeConfObjToCss(props);
+}, active(), active(), error(), error(), function (props) {
   return props.theme.palette['grey-600'];
 }, function (props) {
   return props.theme.palette['grey-700'];

package/dist/Autocomplete.types.d.ts

@@ -8,6 +8,10 @@ export declare type OverrideProps = {
     description?: React.ReactNode | string;
     error?: boolean;
     handleInputRef?: (ref: React.MutableRefObject<Select | undefined>) => void;
+    autoResize?: boolean | {
+        minWidth: string;
+        maxWidth: string;
+    };
 };
 export interface StaticComponents {
     Option: typeof AntdAutoComplete.Option;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -41,5 +41,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.23.2"
   },
-  "gitHead": "6f71f891413ba05d50a0ab86f22266c0c8386b31"
+  "gitHead": "c1fdb8f769bf8c3a529d877a6bd9942a380c3e17"
 }