@synerise/ds-autocomplete 0.4.50 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-autocomplete
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **input:** deps missing in autocomplete + input exports ([4a1439b](https://github.com/Synerise/synerise-design/commit/4a1439b70856f24b1c4500c97956c7ff8b97468a))
+* **input:** fixed autosize imports/exports ([4fbebfa](https://github.com/Synerise/synerise-design/commit/4fbebfa9b5c13dc92b81cf1e6ee3639f54d3145b))
+
+
+### Features
+
+* **input:** autosize input, filter ([c507a67](https://github.com/Synerise/synerise-design/commit/c507a672b2705da82e8bebe589495caf5d509e71))
+
+
+
+
+
 ## [0.4.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.4.49...@synerise/ds-autocomplete@0.4.50) (2023-09-08)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/dist/Autocomplete.d.ts

@@ -1,6 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
-import { AutocompleteProps, StaticComponents } from './Autocomplete.types';
-declare const Autocomplete: React.FC<AutocompleteProps> & StaticComponents;
+import { AutocompleteProps } from './Autocomplete.types';
+declare const Autocomplete: {
+    (props: AutocompleteProps): JSX.Element;
+    Option: import("rc-select/lib/Option").OptionFC;
+};
 export default Autocomplete;

package/dist/Autocomplete.js

@@ -1,17 +1,11 @@
-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 React, { useRef, useEffect } 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 { AutosizeInput } from '@synerise/ds-input';
 import * as S from './Autocomplete.styles';
 
 var Autocomplete = function Autocomplete(props) {
@@ -22,11 +16,9 @@ var Autocomplete = function Autocomplete(props) {
       disabled = props.disabled,
       error = props.error,
       handleInputRef = props.handleInputRef,
-      autoResize = props.autoResize,
-      antdAutocompleteProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var inputRef = React.useRef(undefined);
-  React.useEffect(function () {
+      autoResize = props.autoResize;
+  var inputRef = useRef(undefined);
+  useEffect(function () {
     handleInputRef && handleInputRef(inputRef);
   }, [inputRef, handleInputRef]);
 
@@ -35,13 +27,23 @@ var Autocomplete = function Autocomplete(props) {
   };
 
   var renderAutoCompleteComponent = function renderAutoCompleteComponent() {
-    return /*#__PURE__*/React.createElement(AntdAutoComplete // eslint-disable-next-line react/jsx-props-no-spreading
-    , _extends({}, props, {
+    var Component = autoResize ? AutosizeInput : AntdAutoComplete;
+    var autosizeProps = autoResize ? {
+      transformRef: function transformRef(el) {
+        return el.querySelector('input');
+      },
+      refPropName: 'inputRef',
+      extraWidth: 24
+    } : {};
+    return /*#__PURE__*/React.createElement(Component, _extends({}, autoResize ? {
+      renderInput: AntdAutoComplete,
+      autoResize: autoResize,
+      autosizeProps: autosizeProps
+    } : {}, props, {
       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       ref: inputRef,
       dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
-      className: !!errorText || error ? 'error' : undefined,
       getPopupContainer: getParentNode
     }));
   };
@@ -49,11 +51,9 @@ var Autocomplete = function Autocomplete(props) {
   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)), 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, {
+  }, label && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(S.ComponentWrapper, {
+    error: !!errorText || error
+  }, 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

@@ -14,3 +14,6 @@ export declare const AutocompleteWrapper: import("styled-components").StyledComp
         maxWidth: string;
     } | undefined;
 }, never>;
+export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {
+    error?: boolean | undefined;
+}, never>;

package/dist/Autocomplete.styles.js

@@ -50,12 +50,22 @@ function autoresizeConfObjToCss(_ref) {
 export var AutocompleteWrapper = styled.div.withConfig({
   displayName: "Autocompletestyles__AutocompleteWrapper",
   componentId: "sc-10de6ms-4"
-})([".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) {
+})([".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) {
   return props.autoResize ? '100%' : '200px';
 }, function (props) {
   return autoresizeConfObjToCss(props);
-}, active(), active(), error(), error(), function (props) {
+}, function (props) {
   return props.theme.palette['grey-600'];
 }, function (props) {
   return props.theme.palette['grey-700'];
+});
+export var ComponentWrapper = styled.div.withConfig({
+  displayName: "Autocompletestyles__ComponentWrapper",
+  componentId: "sc-10de6ms-5"
+})([".ant-select-auto-complete{", "}}"], function (props) {
+  if (props.error) {
+    return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
+  }
+
+  return css(["&.ant-select{.ant-input{transition:ease-in-out all 0.3s;&:focus{", " &:hover{", "}}}}"], active(), active());
 });

package/dist/Autocomplete.types.d.ts

@@ -1,19 +1,16 @@
-import * as React from 'react';
-import AntdAutoComplete, { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
+import { ReactNode, MutableRefObject } from 'react';
+import { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
 import Select from 'antd/lib/select';
 export declare type OverrideProps = {
     className?: string;
-    errorText?: React.ReactNode | string;
-    label?: React.ReactNode | string;
-    description?: React.ReactNode | string;
+    errorText?: ReactNode | string;
+    label?: ReactNode | string;
+    description?: ReactNode | string;
     error?: boolean;
-    handleInputRef?: (ref: React.MutableRefObject<Select | undefined>) => void;
+    handleInputRef?: (ref: MutableRefObject<Select | undefined>) => void;
     autoResize?: boolean | {
         minWidth: string;
         maxWidth: string;
     };
 };
-export interface StaticComponents {
-    Option: typeof AntdAutoComplete.Option;
-}
 export declare type AutocompleteProps = OverrideProps & OriginalProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "0.4.50",
+  "version": "0.5.1",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,7 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-input": "^0.18.51",
+    "@synerise/ds-input": "^0.19.1",
     "@synerise/ds-typography": "^0.12.10"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "955a885f58b3fca4caa4f879deb147fe5b9dc6d8"
+  "gitHead": "dcdec905a4a36109a33d28d9d31fc0b4af51567e"
 }