@synerise/ds-autocomplete 0.6.4 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.6.4...@synerise/ds-autocomplete@0.7.0) (2024-03-05)
+
+
+### Features
+
+* **input:** support autoresize to stretch to parent ([329c866](https://github.com/Synerise/synerise-design/commit/329c866cb54921ad1260ae217cb8c471e43b986e))
+
+
+
+
+
 ## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@0.6.3...@synerise/ds-autocomplete@0.6.4) (2024-02-21)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/README.md

@@ -57,4 +57,27 @@ 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: ''                | 
+| autoResize                             | 'resize' width of the input based on width of the text in input                                                                                                                                                                                          | AutoResizeProp                                                                        | undefined                |
+
+
+#### AutoResizeProp
+
+```
+type AutoResizeProp = `boolean` | {
+    minWidth: string; 
+    maxWidth?: string; 
+    stretchToFit?: boolean 
+};
+```
+
+Setting `stretchToFit: true` will make the field stretch to fit the containing element. The component observes the width of the wrapper and adjusts the maxWidth accordingly.  
+**Important** if the Input is within a flex-item then there is necessary CSS that needs to be applied to the flex-item containers in order for the flex-item to grow to fill the allowed space, but at the same time not stretch the flex container (identical issue happens when text-overflow needs to happen inside a flex-item). 
+
+```css
+$flexItemSurroundingTheInput {
+    min-width: 0;
+    flex-grow: 1
+}
+```
+
+See https://css-tricks.com/flexbox-truncated-text/ for more details.

package/dist/Autocomplete.js

@@ -1,11 +1,18 @@
 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 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; }
+
+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; }
+
+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; }
+
 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';
 import { AutosizeInput } from '@synerise/ds-input';
+import { useResizeToFit } from '@synerise/ds-utils';
 import * as S from './Autocomplete.styles';
 
 var Autocomplete = function Autocomplete(props) {
@@ -16,9 +23,11 @@ var Autocomplete = function Autocomplete(props) {
       disabled = props.disabled,
       error = props.error,
       handleInputRef = props.handleInputRef,
+      getPopupContainer = props.getPopupContainer,
       autoResize = props.autoResize,
       readOnly = props.readOnly;
   var inputRef = useRef(undefined);
+  var autocompleteInputRef = useRef(null);
   useEffect(function () {
     handleInputRef && handleInputRef(inputRef);
   }, [inputRef, handleInputRef]);
@@ -34,25 +43,59 @@ var Autocomplete = function Autocomplete(props) {
         return el.querySelector('input');
       },
       refPropName: 'inputRef',
-      extraWidth: 24
+      extraWidth: 25,
+      inputRef: function inputRef(_inputRef, originalInput) {
+        autocompleteInputRef.current = originalInput;
+      }
     } : {};
-    return /*#__PURE__*/React.createElement(Component, _extends({}, autoResize ? {
+    return /*#__PURE__*/React.createElement(Component, _extends({}, autoResize ? _objectSpread({
       renderInput: AntdAutoComplete,
-      autoResize: autoResize,
-      autosizeProps: autosizeProps
-    } : {}, props, {
+      autoResize: autoResize
+    }, autosizeProps) : {}, props, {
       // @ts-ignore
       ref: inputRef,
       disabled: readOnly || disabled,
       dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
-      getPopupContainer: getParentNode
+      getPopupContainer: getPopupContainer || getParentNode
     }));
   };
 
+  var stretchToFit = typeof autoResize === 'object' && Boolean(autoResize.stretchToFit);
+
+  var _useResizeToFit = useResizeToFit({
+    onResize: function onResize(width) {
+      if (autocompleteInputRef.current) {
+        autocompleteInputRef.current.style.maxWidth = width + 5 + "px";
+      }
+    },
+    autoObserve: true
+  }),
+      observe = _useResizeToFit.observe,
+      disconnect = _useResizeToFit.disconnect,
+      elementRef = _useResizeToFit.elementRef;
+
+  useEffect(function () {
+    if (elementRef.current) {
+      if (stretchToFit) {
+        observe();
+      } else {
+        disconnect();
+
+        if (autocompleteInputRef.current) {
+          autocompleteInputRef.current.style.removeProperty('max-width');
+        }
+      }
+    }
+
+    return function () {
+      disconnect();
+    };
+  }, [disconnect, observe, stretchToFit, elementRef]);
   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(S.ComponentWrapper, {
+    ref: elementRef,
     readOnly: readOnly,
     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, {

package/dist/Autocomplete.styles.d.ts

@@ -1,18 +1,10 @@
+import { AutoResizeProp } from '@synerise/ds-input';
 export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 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 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;
+    autoResize?: AutoResizeProp | undefined;
 }, never>;
 export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {
     error?: boolean | undefined;

package/dist/Autocomplete.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { autoresizeConfObjToCss } from '@synerise/ds-input/dist/Input.styles';
 export var LabelWrapper = styled.div.withConfig({
   displayName: "Autocompletestyles__LabelWrapper",
   componentId: "sc-10de6ms-0"
@@ -44,17 +45,6 @@ var readonly = function readonly() {
   });
 };
 
-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"
@@ -79,5 +69,5 @@ export var ComponentWrapper = styled.div.withConfig({
     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());
+  return css(["&.ant-select{.ant-select-selector{padding:0 10px;}.ant-input{transition:ease-in-out all 0.3s;&:focus{", " &:hover{", "}}}}"], active(), active());
 });

package/dist/Autocomplete.types.d.ts

@@ -1,17 +1,16 @@
 import { ReactNode, MutableRefObject } from 'react';
 import { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
 import Select from 'antd/lib/select';
+import type { AutoResizeProp } from '@synerise/ds-input';
 export type OverrideProps = {
     className?: string;
     errorText?: ReactNode | string;
     label?: ReactNode | string;
     description?: ReactNode | string;
     error?: boolean;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
     readOnly?: boolean;
     handleInputRef?: (ref: MutableRefObject<Select | undefined>) => void;
-    autoResize?: boolean | {
-        minWidth: string;
-        maxWidth: string;
-    };
+    autoResize?: AutoResizeProp;
 };
 export type AutocompleteProps = OverrideProps & OriginalProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-input": "^0.19.19",
+    "@synerise/ds-input": "^0.20.0",
     "@synerise/ds-typography": "^0.14.3"
   },
   "peerDependencies": {
@@ -43,9 +43,9 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.24.26",
+    "@synerise/ds-utils": "^0.25.0",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "673df74b628304300c09f0d7e26279b5901cd925"
+  "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
 }