@synerise/ds-autocomplete 1.2.34 → 1.2.35

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.35](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.34...@synerise/ds-autocomplete@1.2.35) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-autocomplete
+
 ## [1.2.34](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.33...@synerise/ds-autocomplete@1.2.34) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/dist/Autocomplete.const.js

@@ -1,3 +1,8 @@
-export var ICON_WIDTH = 24;
-export var ICON_GAP = 4;
-export var ICON_OFFSET = 8;
+const ICON_WIDTH = 24;
+const ICON_GAP = 4;
+const ICON_OFFSET = 8;
+export {
+  ICON_GAP,
+  ICON_OFFSET,
+  ICON_WIDTH
+};

package/dist/Autocomplete.d.ts

@@ -1,7 +1,6 @@
-import AntdAutoComplete from 'antd/lib/auto-complete';
-import { type FC } from 'react';
-import { type AutocompleteProps } from './Autocomplete.types';
-import './style/index.less';
+import { default as AntdAutoComplete } from 'antd/lib/auto-complete';
+import { FC } from 'react';
+import { AutocompleteProps } from './Autocomplete.types';
 declare const Autocomplete: FC<AutocompleteProps> & {
     Option: typeof AntdAutoComplete.Option;
 };

package/dist/Autocomplete.js

@@ -1,121 +1,92 @@
-var _excluded = ["className", "label", "description", "errorText", "disabled", "error", "handleInputRef", "getPopupContainer", "autoResize", "readOnly", "tooltip", "tooltipConfig", "icon1", "icon1Tooltip", "icon2", "icon2Tooltip"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import AntdAutoComplete from 'antd/lib/auto-complete';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import FormField from '@synerise/ds-form-field';
-import { AutosizeWrapper } from '@synerise/ds-input';
-import Tooltip from '@synerise/ds-tooltip';
-import { useResizeObserver } from '@synerise/ds-utils';
-import * as S from './Autocomplete.styles';
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import AntdAutoComplete from "antd/lib/auto-complete";
+import { useRef, useEffect, useCallback, useMemo } from "react";
+import FormField from "@synerise/ds-form-field";
+import { AutosizeWrapper } from "@synerise/ds-input";
+import Tooltip from "@synerise/ds-tooltip";
+import { useResizeObserver } from "@synerise/ds-utils";
+import { IconWrapper, AutocompleteWrapper, ComponentWrapper } from "./Autocomplete.styles.js";
+import { getIconsWidth } from "./utils/getIconsWidth.js";
 import "./style/index.css";
-import { getIconsWidth } from './utils/getIconsWidth';
-var AUTOSIZE_EXTRA_WIDTH = 27;
-var Autocomplete = function Autocomplete(_ref) {
-  var className = _ref.className,
-    label = _ref.label,
-    description = _ref.description,
-    errorText = _ref.errorText,
-    disabled = _ref.disabled,
-    error = _ref.error,
-    handleInputRef = _ref.handleInputRef,
-    getPopupContainer = _ref.getPopupContainer,
-    autoResize = _ref.autoResize,
-    readOnly = _ref.readOnly,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    icon1 = _ref.icon1,
-    icon1Tooltip = _ref.icon1Tooltip,
-    icon2 = _ref.icon2,
-    icon2Tooltip = _ref.icon2Tooltip,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var scrollLeftRef = useRef(0);
-  var antSelectRef = useRef(null);
-  var inputRef = useRef(null);
-  var autosizeRef = useRef(null);
-  var autocompleteInputRef = useRef(null);
-  var elementRef = useRef(null);
-  useEffect(function () {
+const AUTOSIZE_EXTRA_WIDTH = 27;
+const Autocomplete = ({
+  className,
+  label,
+  description,
+  errorText,
+  disabled,
+  error,
+  handleInputRef,
+  getPopupContainer,
+  autoResize,
+  readOnly,
+  tooltip,
+  tooltipConfig,
+  icon1,
+  icon1Tooltip,
+  icon2,
+  icon2Tooltip,
+  ...rest
+}) => {
+  const scrollLeftRef = useRef(0);
+  const antSelectRef = useRef(null);
+  const inputRef = useRef(null);
+  const autosizeRef = useRef(null);
+  const autocompleteInputRef = useRef(null);
+  const elementRef = useRef(null);
+  useEffect(() => {
     handleInputRef && handleInputRef(antSelectRef);
   }, [antSelectRef, handleInputRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (autosizeRef.current) {
       autocompleteInputRef.current = autosizeRef.current.inputWrapperRef.current;
       inputRef.current = autosizeRef.current.inputRef.current;
     }
   }, []);
-  var getParentNode = function getParentNode(triggerNode) {
+  const getParentNode = (triggerNode) => {
     return triggerNode.parentNode;
   };
-  var stretchToFit = autoResize && autoResize !== true && Boolean(autoResize.stretchToFit);
-  var placeholderString = typeof rest.placeholder === 'string' ? rest.placeholder : undefined;
-  var handlePreAutosize = useCallback(function () {
-    var _inputRef$current;
-    scrollLeftRef.current = ((_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.scrollLeft) || 0;
-    autocompleteInputRef.current && autocompleteInputRef.current.style.removeProperty('max-width');
+  const stretchToFit = autoResize && autoResize !== true && Boolean(autoResize.stretchToFit);
+  const placeholderString = typeof rest.placeholder === "string" ? rest.placeholder : void 0;
+  const handlePreAutosize = useCallback(() => {
+    scrollLeftRef.current = inputRef.current?.scrollLeft || 0;
+    autocompleteInputRef.current && autocompleteInputRef.current.style.removeProperty("max-width");
   }, []);
-  var handleAutosize = useCallback(function () {
-    var parentRect = elementRef.current && elementRef.current.getBoundingClientRect();
-    if (stretchToFit && autocompleteInputRef.current && parentRect != null && parentRect.width) {
-      autocompleteInputRef.current.style.maxWidth = (parentRect == null ? void 0 : parentRect.width) + 1 + "px";
+  const handleAutosize = useCallback(() => {
+    const parentRect = elementRef.current && elementRef.current.getBoundingClientRect();
+    if (stretchToFit && autocompleteInputRef.current && parentRect?.width) {
+      autocompleteInputRef.current.style.maxWidth = `${parentRect?.width + 1}px`;
       inputRef.current && inputRef.current.scrollTo(scrollLeftRef.current, 0);
     }
   }, [stretchToFit]);
-  var handleWrapperResize = useCallback(function () {
+  const handleWrapperResize = useCallback(() => {
     handlePreAutosize();
     handleAutosize();
   }, [handleAutosize, handlePreAutosize]);
-  var transformRef = useCallback(function (element) {
+  const transformRef = useCallback((element) => {
     autocompleteInputRef.current = element;
-    return element.querySelector('input');
+    return element.querySelector("input");
   }, []);
   useResizeObserver(elementRef, handleWrapperResize);
-  var iconCount = +!!icon1 + +!!icon2;
-  var handleIconsClick = useCallback(function () {
-    var _antSelectRef$current;
-    (_antSelectRef$current = antSelectRef.current) == null || _antSelectRef$current.focus();
+  const iconCount = +!!icon1 + +!!icon2;
+  const handleIconsClick = useCallback(() => {
+    antSelectRef.current?.focus();
   }, []);
-  var icons = useMemo(function () {
-    var icon1WithTooltip = icon1Tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-      title: icon1Tooltip
-    }, icon1) : icon1;
-    var icon2WithTooltip = icon2Tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-      title: icon2Tooltip
-    }, icon2) : icon2;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (icon1WithTooltip || icon2WithTooltip) && /*#__PURE__*/React.createElement(S.IconWrapper, {
-      onClick: handleIconsClick
-    }, icon1WithTooltip, " ", icon2WithTooltip));
+  const icons = useMemo(() => {
+    const icon1WithTooltip = icon1Tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: icon1Tooltip, children: icon1 }) : icon1;
+    const icon2WithTooltip = icon2Tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: icon2Tooltip, children: icon2 }) : icon2;
+    return /* @__PURE__ */ jsx(Fragment, { children: (icon1WithTooltip || icon2WithTooltip) && /* @__PURE__ */ jsxs(IconWrapper, { onClick: handleIconsClick, children: [
+      icon1WithTooltip,
+      " ",
+      icon2WithTooltip
+    ] }) });
   }, [handleIconsClick, icon1, icon2, icon1Tooltip, icon2Tooltip]);
-  return /*#__PURE__*/React.createElement(S.AutocompleteWrapper, {
-    ref: elementRef,
-    autoResize: autoResize,
-    className: "ds-autocomplete " + (className || '')
-  }, /*#__PURE__*/React.createElement(FormField, {
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig,
-    description: description,
-    errorText: errorText
-  }, /*#__PURE__*/React.createElement(S.ComponentWrapper, {
-    readOnly: readOnly,
-    error: !!errorText || error,
-    iconCount: iconCount
-  }, /*#__PURE__*/React.createElement(AutosizeWrapper, {
-    autoResize: !!autoResize,
-    value: rest.value,
-    placeholder: placeholderString,
-    transformRef: transformRef,
-    ref: autosizeRef,
-    extraWidth: AUTOSIZE_EXTRA_WIDTH + getIconsWidth(iconCount),
-    preAutosize: handlePreAutosize,
-    onAutosize: handleAutosize
-  }, /*#__PURE__*/React.createElement(AntdAutoComplete, _extends({}, rest, {
-    disabled: readOnly || disabled,
-    dropdownClassName: "ds-autocomplete-dropdown ps__child--consume",
-    getPopupContainer: getPopupContainer || getParentNode,
-    ref: antSelectRef,
-    "data-testid": "autocomplete-autosize-input"
-  })), icons))));
+  return /* @__PURE__ */ jsx(AutocompleteWrapper, { ref: elementRef, autoResize, className: `ds-autocomplete ${className || ""}`, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, description, errorText, children: /* @__PURE__ */ jsx(ComponentWrapper, { readOnly, error: !!errorText || error, iconCount, children: /* @__PURE__ */ jsxs(AutosizeWrapper, { autoResize: !!autoResize, value: rest.value, placeholder: placeholderString, transformRef, ref: autosizeRef, extraWidth: AUTOSIZE_EXTRA_WIDTH + getIconsWidth(iconCount), preAutosize: handlePreAutosize, onAutosize: handleAutosize, children: [
+    /* @__PURE__ */ jsx(AntdAutoComplete, { ...rest, disabled: readOnly || disabled, dropdownClassName: "ds-autocomplete-dropdown ps__child--consume", getPopupContainer: getPopupContainer || getParentNode, ref: antSelectRef, "data-testid": "autocomplete-autosize-input" }),
+    icons
+  ] }) }) }) });
 };
 Autocomplete.Option = AntdAutoComplete.Option;
-export default Autocomplete;
+export {
+  Autocomplete as default
+};

package/dist/Autocomplete.styles.d.ts

@@ -1,9 +1,9 @@
-import { type AutoResizeProp } from '@synerise/ds-input';
-export declare const AutocompleteWrapper: import("styled-components").StyledComponent<"div", any, {
+import { AutoResizeProp } from '@synerise/ds-input';
+export declare const AutocompleteWrapper: import('styled-components').StyledComponent<"div", any, {
     autoResize?: AutoResizeProp;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ComponentWrapper: import('styled-components').StyledComponent<"div", any, {
     error?: boolean;
     readOnly?: boolean;
     iconCount?: number;

package/dist/Autocomplete.styles.js

@@ -1,57 +1,33 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled, { css } from 'styled-components';
-import { autoresizeConfObjToCss } from '@synerise/ds-input/dist/Input.styles';
-import { ICON_GAP, ICON_OFFSET } from './Autocomplete.const';
-import { getIconsWidth } from './utils/getIconsWidth';
-var active = function active() {
-  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) {
-    return props.theme.palette['blue-600'];
-  }, function (props) {
-    return props.theme.palette['blue-600'];
-  }, function (props) {
-    return props.theme.palette['blue-050'];
-  });
-};
-var error = function error() {
-  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) {
-    return props.theme.palette['red-600'];
-  }, function (props) {
-    return props.theme.palette['red-050'];
-  }, function (props) {
-    return props.theme.palette['red-600'];
-  });
-};
-var readonly = function readonly() {
-  return css(["background-color:", ";color:", ";input{cursor:auto;}"], function (props) {
-    return props.theme.palette.white;
-  }, function (props) {
-    return props.theme.palette['grey-700'];
-  });
-};
-export var AutocompleteWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { autoresizeConfObjToCss } from "@synerise/ds-input/dist/Input.styles";
+import { ICON_OFFSET, ICON_GAP } from "./Autocomplete.const.js";
+import { getIconsWidth } from "./utils/getIconsWidth.js";
+const active = () => 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:", ";"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-050"]);
+const error = () => 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 ", ";"], (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-050"], (props) => props.theme.palette["red-600"]);
+const readonly = () => css(["background-color:", ";color:", ";input{cursor:auto;}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-700"]);
+const AutocompleteWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__AutocompleteWrapper",
   componentId: "sc-10de6ms-0"
-})(["input{font-feature-settings:'tnum';}.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;padding-right:10px;}"], function (props) {
-  return props.autoResize ? '100%' : '200px';
-}, function (props) {
-  return autoresizeConfObjToCss(_extends({}, props, {
-    boxSizing: 'border-box'
-  }));
-}, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var IconWrapper = styled.div.withConfig({
+})(["input{font-feature-settings:'tnum';}.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;padding-right:10px;}"], (props) => props.autoResize ? "100%" : "200px", (props) => autoresizeConfObjToCss({
+  ...props,
+  boxSizing: "border-box"
+}), (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-700"]);
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__IconWrapper",
   componentId: "sc-10de6ms-1"
 })(["position:absolute;right:", "px;top:0;display:flex;bottom:0;align-items:center;gap:", "px;z-index:5;"], ICON_OFFSET, ICON_GAP);
-export var ComponentWrapper = styled.div.withConfig({
+const ComponentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__ComponentWrapper",
   componentId: "sc-10de6ms-2"
-})(["&&&{", ";.ant-select-auto-complete{", "}}}"], function (props) {
-  return props.iconCount && "\n    position: relative;\n    display: inline-block;\n    & {\n        .ant-select .ant-select-selector .ant-select-selection-search {\n          right: " + getIconsWidth(props.iconCount) + "px;\n        }\n      }\n  ";
-}, function (props) {
+})(["&&&{", ";.ant-select-auto-complete{", "}}}"], (props) => props.iconCount && `
+    position: relative;
+    display: inline-block;
+    & {
+        .ant-select .ant-select-selector .ant-select-selection-search {
+          right: ${getIconsWidth(props.iconCount)}px;
+        }
+      }
+  `, (props) => {
   if (props.readOnly) {
     return css([".ant-select-selector{&:hover{", "}", "}"], readonly(), readonly());
   }
@@ -59,4 +35,9 @@ export var ComponentWrapper = styled.div.withConfig({
     return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
   }
   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());
-});
+});
+export {
+  AutocompleteWrapper,
+  ComponentWrapper,
+  IconWrapper
+};

package/dist/Autocomplete.types.d.ts

@@ -1,8 +1,8 @@
-import type { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
-import type { RefSelectProps } from 'antd/lib/select';
-import type { MutableRefObject, ReactNode } from 'react';
-import type { FormFieldCommonProps } from '@synerise/ds-form-field';
-import type { AutoResizeProp } from '@synerise/ds-input';
+import { AutoCompleteProps as OriginalProps } from 'antd/lib/auto-complete';
+import { RefSelectProps } from 'antd/lib/select';
+import { MutableRefObject, ReactNode } from 'react';
+import { FormFieldCommonProps } from '@synerise/ds-form-field';
+import { AutoResizeProp } from '@synerise/ds-input';
 export type OverrideProps = FormFieldCommonProps & {
     className?: string;
     icon1?: ReactNode;

package/dist/Autocomplete.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import type { AutocompleteProps } from './Autocomplete.types';
+import { AutocompleteProps } from './Autocomplete.types';
 export { default } from './Autocomplete';
 export type { AutocompleteProps };

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Autocomplete';
+import { default as default2 } from "./Autocomplete.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/utils/getIconsWidth.js

@@ -1,4 +1,7 @@
-import { ICON_GAP, ICON_OFFSET, ICON_WIDTH } from '../Autocomplete.const';
-export var getIconsWidth = function getIconsWidth(iconCount) {
+import { ICON_OFFSET, ICON_WIDTH, ICON_GAP } from "../Autocomplete.const.js";
+const getIconsWidth = (iconCount) => {
   return iconCount > 0 ? ICON_OFFSET + iconCount * ICON_WIDTH + (iconCount - 1) * ICON_GAP : 0;
-};
+};
+export {
+  getIconsWidth
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "1.2.34",
+  "version": "1.2.35",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,10 +35,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.9",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-form-field": "^1.3.10",
+    "@synerise/ds-input": "^1.6.10",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }