@synerise/ds-inline-edit 1.1.23 → 1.1.24

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.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.1.23...@synerise/ds-inline-edit@1.1.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-inline-edit
+
 ## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.1.22...@synerise/ds-inline-edit@1.1.23) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineEdit.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type InlineEditProps } from './InlineEdit.types';
+import { default as React } from 'react';
+import { InlineEditProps } from './InlineEdit.types';
 declare const InlineEdit: ({ className, style, size, disabled, autoFocus, hideIcon, customIcon, tooltipTitle, error, input, }: InlineEditProps) => React.JSX.Element;
 export default InlineEdit;

package/dist/InlineEdit.js

@@ -1,91 +1,56 @@
-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 React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { EditS } from '@synerise/ds-icon';
-import { AutosizeInput } from '@synerise/ds-input';
-import Tooltip from '@synerise/ds-tooltip';
-import { toCamelCase } from '@synerise/ds-utils';
-import * as S from './InlineEdit.styles';
-var InlineEdit = function InlineEdit(_ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
-    disabled = _ref.disabled,
-    autoFocus = _ref.autoFocus,
-    hideIcon = _ref.hideIcon,
-    customIcon = _ref.customIcon,
-    tooltipTitle = _ref.tooltipTitle,
-    error = _ref.error,
-    input = _ref.input;
-  var inputRef = useRef(null);
-  var _useState = useState(),
-    focused = _useState[0],
-    setFocused = _useState[1];
-  var theme = useTheme();
-  var handleChange = useCallback(function (event) {
-    input.onChange == null || input.onChange(event);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { EditS } from "@synerise/ds-icon";
+import { AutosizeInput } from "@synerise/ds-input";
+import Tooltip from "@synerise/ds-tooltip";
+import { toCamelCase } from "@synerise/ds-utils";
+import { InPlaceEditableInputContainer, IconWrapper } from "./InlineEdit.styles.js";
+const InlineEdit = ({
+  className,
+  style,
+  size = "normal",
+  disabled,
+  autoFocus,
+  hideIcon,
+  customIcon,
+  tooltipTitle,
+  error,
+  input
+}) => {
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState();
+  const theme = useTheme();
+  const handleChange = useCallback((event) => {
+    input.onChange?.(event);
   }, [input]);
-  var handleFocus = function handleFocus() {
+  const handleFocus = () => {
     setFocused(false);
   };
-  var handleBlur = useCallback(function (event) {
+  const handleBlur = useCallback((event) => {
     input.onBlur && input.onBlur(event);
     inputRef.current && inputRef.current.scrollTo({
       left: 0
     });
     setFocused(true);
   }, [input]);
-  var handleKeyPress = useCallback(function (event) {
-    if (event.key === 'Enter') {
+  const handleKeyPress = useCallback((event) => {
+    if (event.key === "Enter") {
       input.onEnterPress && input.onEnterPress(event);
       inputRef.current && inputRef.current.blur();
     }
   }, [input]);
-  var handleFocusInput = useCallback(function () {
+  const handleFocusInput = useCallback(() => {
     inputRef.current && inputRef.current.focus();
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     autoFocus && inputRef.current && inputRef.current.focus();
   }, [autoFocus]);
-  return /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
-    className: "ds-inline-edit " + (className || ''),
-    style: style,
-    size: size,
-    disabled: disabled,
-    error: error,
-    scrolled: focused
-  }, /*#__PURE__*/React.createElement(AutosizeInput, {
-    extraWidth: 2,
-    value: input.value,
-    placeholder: input.placeholder,
-    placeholderIsMinWidth: false,
-    wrapperClassName: "autosize-input"
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    autoComplete: "off",
-    id: input.name ? toCamelCase(input.name) : 'id'
-  }, input, {
-    className: "autosize-input",
-    "data-testid": "inline-edit-autosize-input",
-    onKeyPress: handleKeyPress,
-    disabled: disabled,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    value: input.value,
-    ref: inputRef
-  }))), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
-    "data-testid": "inline-edit-icon",
-    title: tooltipTitle
-  }, /*#__PURE__*/React.createElement(S.IconWrapper, {
-    customIcon: Boolean(customIcon),
-    disabled: disabled,
-    onClick: handleFocusInput,
-    size: size
-  }, /*#__PURE__*/React.createElement(Icon, {
-    color: theme.palette["grey-600"],
-    component: customIcon || /*#__PURE__*/React.createElement(EditS, null),
-    size: 24
-  }))));
+  return /* @__PURE__ */ jsxs(InPlaceEditableInputContainer, { className: `ds-inline-edit ${className || ""}`, style, size, disabled, error, scrolled: focused, children: [
+    /* @__PURE__ */ jsx(AutosizeInput, { extraWidth: 2, value: input.value, placeholder: input.placeholder, placeholderIsMinWidth: false, wrapperClassName: "autosize-input", children: /* @__PURE__ */ jsx("input", { autoComplete: "off", id: input.name ? toCamelCase(input.name) : "id", ...input, className: "autosize-input", "data-testid": "inline-edit-autosize-input", onKeyPress: handleKeyPress, disabled, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: input.value, ref: inputRef }) }),
+    !hideIcon && /* @__PURE__ */ jsx(Tooltip, { "data-testid": "inline-edit-icon", title: tooltipTitle, children: /* @__PURE__ */ jsx(IconWrapper, { customIcon: Boolean(customIcon), disabled, onClick: handleFocusInput, size, children: /* @__PURE__ */ jsx(Icon, { color: theme.palette[`grey-600`], component: customIcon || /* @__PURE__ */ jsx(EditS, {}), size: 24 }) }) })
+  ] });
+};
+export {
+  InlineEdit as default
 };
-export default InlineEdit;

package/dist/InlineEdit.styles.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeProps } from '@synerise/ds-core';
+import { ThemeProps } from '@synerise/ds-core';
 type InPlaceEditableInputContainerProps = {
     size: 'large' | 'small' | 'normal';
     disabled?: boolean;
@@ -6,11 +6,11 @@ type InPlaceEditableInputContainerProps = {
     pressed?: boolean;
     scrolled?: boolean;
 };
-export declare const FontStyleWatcher: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const FontStyleWatcher: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
     size: string;
     disabled?: boolean;
     customIcon?: boolean;
 } & ThemeProps, never>;
-export declare const InPlaceEditableInputContainer: import("styled-components").StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
+export declare const InPlaceEditableInputContainer: import('styled-components').StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
 export {};

package/dist/InlineEdit.styles.js

@@ -1,85 +1,56 @@
-import styled, { css } from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-var applyColor = function applyColor(props) {
+import styled, { css } from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const applyColor = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['grey-800'];
+  return props.theme.palette["grey-800"];
 };
-var applyColorFocus = function applyColorFocus(props) {
+const applyColorFocus = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['blue-600'];
+  return props.theme.palette["blue-600"];
 };
-var applyDots = function applyDots(props) {
+const applyDots = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['grey-400'];
+  return props.theme.palette["grey-400"];
 };
-var applyDotsOnError = function applyDotsOnError(props) {
+const applyDotsOnError = (props) => {
   if (props.error) {
-    return "background-image: linear-gradient(to right, " + applyDots(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+    return `background-image: linear-gradient(to right, ${applyDots(props)} 20%, rgba(255, 255, 255, 0) 10%);
+  background-color: transparent;
+  background-position: bottom left;
+  background-size: 5px 1px;
+  background-repeat: repeat-x;`;
   }
-  return '';
+  return "";
 };
-var fontSize = {
+const fontSize = {
   large: macro.h600,
   normal: macro.h400,
   small: macro.small
 };
-export var FontStyleWatcher = styled.div.withConfig({
+const FontStyleWatcher = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineEditstyles__FontStyleWatcher",
   componentId: "sc-1itw4az-0"
 })(["visibility:hidden;pointer-events:none;"]);
-export var IconWrapper = styled.div.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineEditstyles__IconWrapper",
   componentId: "sc-1itw4az-1"
-})(["display:", ";border-radius:24px;color:", ";background:", ";margin:0;font-size:11px;justify-content:center;align-items:center;margin-left:", ";width:24px;height:24px;line-height:inherit;cursor:pointer;&&&:hover{background-color:", ";}div :active{border-radius:", ";background-color:", ";}"], function (props) {
-  return props.disabled ? 'none' : 'flex';
-}, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.customIcon ? undefined : props.theme.palette['grey-100'];
-}, function (props) {
-  return props.size === 'small' ? '4px' : '8px';
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.customIcon ? '0px' : '24px';
-}, function (props) {
-  return props.customIcon ? undefined : props.theme.palette['grey-300'];
-});
-export var InPlaceEditableInputContainer = styled.div.withConfig({
+})(["display:", ";border-radius:24px;color:", ";background:", ";margin:0;font-size:11px;justify-content:center;align-items:center;margin-left:", ";width:24px;height:24px;line-height:inherit;cursor:pointer;&&&:hover{background-color:", ";}div :active{border-radius:", ";background-color:", ";}"], (props) => props.disabled ? "none" : "flex", (props) => props.theme.palette["grey-600"], (props) => props.customIcon ? void 0 : props.theme.palette["grey-100"], (props) => props.size === "small" ? "4px" : "8px", (props) => props.theme.palette.white, (props) => props.customIcon ? "0px" : "24px", (props) => props.customIcon ? void 0 : props.theme.palette["grey-300"]);
+const InPlaceEditableInputContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineEditstyles__InPlaceEditableInputContainer",
   componentId: "sc-1itw4az-2"
-})(["display:flex;max-width:100%;align-items:center;pointer-events:", ";", "{svg{color:", ";fill:", ";}}input{", "}&:hover{input{color:", ";background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}", "{background-color:", ";}}", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", " overflow:hidden;text-overflow:", ";max-width:100%;padding-bottom:", ";margin:0;vertical-align:top;color:", ";::placeholder{color:", ";}}"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'none' : 'all';
-}, IconWrapper, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return applyDotsOnError(props);
-}, function (props) {
-  return props.theme.palette['grey-800'];
-}, function (props) {
-  return applyDots(props);
-}, IconWrapper, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette['grey-200'];
-}, function (props) {
-  return !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}}}"], applyColorFocus(props));
-}, FontStyleWatcher, function (props) {
-  return fontSize[props.size];
-}, function (props) {
-  return props.scrolled ? 'initial' : 'ellipsis';
-}, function (props) {
-  return props.size === 'small' ? '2px' : '0';
-}, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return props.theme.palette[props.error ? 'red-600' : 'grey-400'];
-});
+})(["display:flex;max-width:100%;align-items:center;pointer-events:", ";", "{svg{color:", ";fill:", ";}}input{", "}&:hover{input{color:", ";background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}", "{background-color:", ";}}", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", " overflow:hidden;text-overflow:", ";max-width:100%;padding-bottom:", ";margin:0;vertical-align:top;color:", ";::placeholder{color:", ";}}"], ({
+  disabled
+}) => disabled ? "none" : "all", IconWrapper, (props) => applyColor(props), (props) => applyColor(props), (props) => applyDotsOnError(props), (props) => props.theme.palette["grey-800"], (props) => applyDots(props), IconWrapper, ({
+  theme
+}) => theme.palette["grey-200"], (props) => !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}}}"], applyColorFocus(props)), FontStyleWatcher, (props) => fontSize[props.size], (props) => props.scrolled ? "initial" : "ellipsis", (props) => props.size === "small" ? "2px" : "0", (props) => applyColor(props), (props) => props.theme.palette[props.error ? "red-600" : "grey-400"]);
+export {
+  FontStyleWatcher,
+  IconWrapper,
+  InPlaceEditableInputContainer
+};

package/dist/InlineEdit.types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ChangeEvent, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
+import { CSSProperties, ChangeEvent, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
 export type InputProps = {
     name?: string;
     value: string | number;

package/dist/InlineEdit.types.js

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

package/dist/InlineSelect/InlineSelect.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type InlineSelectProps } from './InlineSelect.types';
+import { default as React } from 'react';
+import { InlineSelectProps } from './InlineSelect.types';
 declare const InlineSelect: ({ className, style, expanded, dropdownProps, dropdownOverlayStyle, inputStyle, size, disabled, autoFocus, hideIcon, error, input, placeholder, dataSource, initialValue, onValueChange, }: InlineSelectProps) => React.JSX.Element;
 export default InlineSelect;

package/dist/InlineSelect/InlineSelect.js

@@ -1,115 +1,58 @@
-var _excluded = ["value", "onChange"];
-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 React, { useEffect, useRef, useState } from 'react';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
-import { AutosizeInput } from '@synerise/ds-input';
-import { NOOP, toCamelCase } from '@synerise/ds-utils';
-import * as S from './InlineSelect.style';
-import SelectDropdown from './SelectDropdown/SelectDropdown';
-var InlineSelect = function InlineSelect(_ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    expanded = _ref.expanded,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    _ref$dropdownOverlayS = _ref.dropdownOverlayStyle,
-    dropdownOverlayStyle = _ref$dropdownOverlayS === void 0 ? {} : _ref$dropdownOverlayS,
-    _ref$inputStyle = _ref.inputStyle,
-    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
-    disabled = _ref.disabled,
-    autoFocus = _ref.autoFocus,
-    hideIcon = _ref.hideIcon,
-    error = _ref.error,
-    input = _ref.input,
-    placeholder = _ref.placeholder,
-    dataSource = _ref.dataSource,
-    initialValue = _ref.initialValue,
-    onValueChange = _ref.onValueChange;
-  var inputRef = useRef(null);
-  var _useState = useState(initialValue || placeholder || 'option'),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var _useState2 = useState(Boolean(expanded)),
-    isOpened = _useState2[0],
-    setIsOpened = _useState2[1];
-  var _useState3 = useState(false),
-    isPressed = _useState3[0],
-    setIsPressed = _useState3[1];
-  var value = input.value,
-    onChange = input.onChange,
-    inputProps = _objectWithoutPropertiesLoose(input, _excluded);
-  var handleSelect = function handleSelect(item) {
-    onValueChange == null || onValueChange(item);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { AngleDownS } from "@synerise/ds-icon";
+import { AutosizeInput } from "@synerise/ds-input";
+import { NOOP, toCamelCase } from "@synerise/ds-utils";
+import { InPlaceEditableInputContainer, IconWrapper } from "./InlineSelect.style.js";
+import SelectDropdown from "./SelectDropdown/SelectDropdown.js";
+const InlineSelect = ({
+  className,
+  style,
+  expanded,
+  dropdownProps = {},
+  dropdownOverlayStyle = {},
+  inputStyle = {},
+  size = "normal",
+  disabled,
+  autoFocus,
+  hideIcon,
+  error,
+  input,
+  placeholder,
+  dataSource,
+  initialValue,
+  onValueChange
+}) => {
+  const inputRef = useRef(null);
+  const [selectedValue, setSelectedValue] = useState(initialValue || placeholder || "option");
+  const [isOpened, setIsOpened] = useState(Boolean(expanded));
+  const [isPressed, setIsPressed] = useState(false);
+  const {
+    value,
+    onChange,
+    ...inputProps
+  } = input;
+  const handleSelect = (item) => {
+    onValueChange?.(item);
     setSelectedValue(item.text);
   };
-  useEffect(function () {
+  useEffect(() => {
     if (value && value !== selectedValue) {
-      setSelectedValue("" + value);
+      setSelectedValue(`${value}`);
     }
   }, [value, selectedValue]);
-  useEffect(function () {
+  useEffect(() => {
     autoFocus && inputRef.current && inputRef.current.focus();
   }, [autoFocus, inputRef]);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    open: !disabled && isOpened,
-    onOpenChange: setIsOpened,
-    placement: "bottomRight",
-    disabled: disabled,
-    overlay: /*#__PURE__*/React.createElement(SelectDropdown, {
-      dataSource: dataSource,
-      onSelect: handleSelect,
-      closeDropdown: function closeDropdown() {
-        return setIsOpened(false);
-      },
-      style: dropdownOverlayStyle
-    }),
-    trigger: ['click'],
-    asChild: true
-  }, dropdownProps, {
-    popoverProps: _extends({
-      testId: 'inline-select'
-    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
-  }), /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
-    className: "ds-inline-edit " + (className || ''),
-    style: style,
-    size: size,
-    disabled: disabled,
-    error: error,
-    tabIndex: 0,
-    onMouseDown: function onMouseDown() {
-      return setIsPressed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      return setIsPressed(false);
-    },
-    pressed: isPressed,
-    dropdownOpened: isOpened
-  }, /*#__PURE__*/React.createElement(AutosizeInput, {
-    value: selectedValue || placeholder,
-    placeholderIsMinWidth: false,
-    extraWidth: 2,
-    wrapperClassName: "autosize-input"
-  }, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
-    ref: inputRef,
-    style: inputStyle,
-    id: input.name ? toCamelCase(input.name) : 'id',
-    className: "autosize-input",
-    "data-testid": "inline-select-autosize-input",
-    value: selectedValue || placeholder,
-    autoComplete: "off",
-    placeholder: placeholder,
-    disabled: disabled,
-    onChange: NOOP
-  }))), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
-    size: size,
-    expanded: isOpened
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null),
-    size: 24
-  }))));
+  return /* @__PURE__ */ jsx(Dropdown, { open: !disabled && isOpened, onOpenChange: setIsOpened, placement: "bottomRight", disabled, overlay: /* @__PURE__ */ jsx(SelectDropdown, { dataSource, onSelect: handleSelect, closeDropdown: () => setIsOpened(false), style: dropdownOverlayStyle }), trigger: ["click"], asChild: true, ...dropdownProps, popoverProps: {
+    testId: "inline-select",
+    ...dropdownProps?.popoverProps
+  }, children: /* @__PURE__ */ jsxs(InPlaceEditableInputContainer, { className: `ds-inline-edit ${className || ""}`, style, size, disabled, error, tabIndex: 0, onMouseDown: () => setIsPressed(true), onMouseUp: () => setIsPressed(false), pressed: isPressed, dropdownOpened: isOpened, children: [
+    /* @__PURE__ */ jsx(AutosizeInput, { value: selectedValue || placeholder, placeholderIsMinWidth: false, extraWidth: 2, wrapperClassName: "autosize-input", children: /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, style: inputStyle, id: input.name ? toCamelCase(input.name) : "id", className: "autosize-input", "data-testid": "inline-select-autosize-input", value: selectedValue || placeholder, autoComplete: "off", placeholder, disabled, onChange: NOOP }) }),
+    !hideIcon && /* @__PURE__ */ jsx(IconWrapper, { size, expanded: isOpened, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), size: 24 }) })
+  ] }) });
+};
+export {
+  InlineSelect as default
 };
-export default InlineSelect;

package/dist/InlineSelect/InlineSelect.style.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeProps } from '@synerise/ds-core';
+import { ThemeProps } from '@synerise/ds-core';
 type InPlaceEditableInputContainerProps = {
     size: 'small' | 'normal';
     disabled?: boolean;
@@ -8,10 +8,10 @@ type InPlaceEditableInputContainerProps = {
     pressed: boolean;
     dropdownOpened: boolean;
 };
-export declare const FontStyleWatcher: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const FontStyleWatcher: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
     size: string;
     expanded: boolean;
 } & ThemeProps, never>;
-export declare const InPlaceEditableInputContainer: import("styled-components").StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
+export declare const InPlaceEditableInputContainer: import('styled-components').StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
 export {};

package/dist/InlineSelect/InlineSelect.style.js

@@ -1,69 +1,53 @@
-import styled, { css } from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-var applyColor = function applyColor(props) {
+import styled, { css } from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const applyColor = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['blue-600'];
+  return props.theme.palette["blue-600"];
 };
-var applyColorHover = function applyColorHover(props) {
+const applyColorHover = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['blue-500'];
+  return props.theme.palette["blue-500"];
 };
-var applyColorActive = function applyColorActive(props) {
+const applyColorActive = (props) => {
   if (props.error) {
-    return props.theme.palette['red-600'];
+    return props.theme.palette["red-600"];
   }
-  return props.theme.palette['blue-700'];
+  return props.theme.palette["blue-700"];
 };
-var applyDotsOnError = function applyDotsOnError(props) {
+const applyDotsOnError = (props) => {
   if (props.error) {
-    return "background-image: linear-gradient(to right, " + applyColor(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+    return `background-image: linear-gradient(to right, ${applyColor(props)} 20%, rgba(255, 255, 255, 0) 10%);
+  background-color: transparent;
+  background-position: bottom left;
+  background-size: 5px 1px;
+  background-repeat: repeat-x;`;
   }
-  return '';
+  return "";
 };
-export var FontStyleWatcher = styled.div.withConfig({
+const FontStyleWatcher = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineSelectstyle__FontStyleWatcher",
   componentId: "sc-188pn99-0"
 })(["visibility:hidden;pointer-events:none;position:absolute;"]);
-export var IconWrapper = styled.div.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineSelectstyle__IconWrapper",
   componentId: "sc-188pn99-1"
-})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.expanded ? '180deg' : '0deg';
-});
-export var InPlaceEditableInputContainer = styled.div.withConfig({
+})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], (props) => props.theme.palette.white, (props) => props.expanded ? "180deg" : "0deg");
+const InPlaceEditableInputContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InlineSelectstyle__InPlaceEditableInputContainer",
   componentId: "sc-188pn99-2"
-})(["display:flex;padding-bottom:2px;max-width:100%;align-items:center;opacity:", ";pointer-events:", ";", "{margin-right:-3px;svg{color:", ";fill:", ";}}", " &&:hover{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}", " ", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", ";overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0;margin:0;vertical-align:top;font-weight:500;color:transparent;text-shadow:0 0 0 ", ";::placeholder{color:", ";}}"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 0.4 : 1;
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? 'none' : 'all';
-}, IconWrapper, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return applyDotsOnError(props);
-}, function (props) {
-  return applyColorHover(props);
-}, IconWrapper, function (props) {
-  return applyColorHover(props);
-}, function (props) {
-  return !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props));
-}, function (props) {
-  return (props.dropdownOpened || props.pressed) && css(["&&&:active,&&&{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}"], applyColorActive(props), IconWrapper, applyColorActive(props));
-}, FontStyleWatcher, function (_ref3) {
-  var size = _ref3.size;
-  return size === 'normal' ? macro.h500 : macro.small;
-}, function (props) {
-  return applyColor(props);
-}, function (props) {
-  return props.theme.palette[props.error ? 'red-600' : 'grey-400'];
-});
+})(["display:flex;padding-bottom:2px;max-width:100%;align-items:center;opacity:", ";pointer-events:", ";", "{margin-right:-3px;svg{color:", ";fill:", ";}}", " &&:hover{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}", " ", " > .autosize-input{display:inline-block;overflow:hidden;}> .autosize-input > input,> ", "{border:none;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;", ";overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0;margin:0;vertical-align:top;font-weight:500;color:transparent;text-shadow:0 0 0 ", ";::placeholder{color:", ";}}"], ({
+  disabled
+}) => disabled ? 0.4 : 1, ({
+  disabled
+}) => disabled ? "none" : "all", IconWrapper, (props) => applyColor(props), (props) => applyColor(props), (props) => applyDotsOnError(props), (props) => applyColorHover(props), IconWrapper, (props) => applyColorHover(props), (props) => !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props)), (props) => (props.dropdownOpened || props.pressed) && css(["&&&:active,&&&{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}"], applyColorActive(props), IconWrapper, applyColorActive(props)), FontStyleWatcher, ({
+  size
+}) => size === "normal" ? macro.h500 : macro.small, (props) => applyColor(props), (props) => props.theme.palette[props.error ? "red-600" : "grey-400"]);
+export {
+  FontStyleWatcher,
+  IconWrapper,
+  InPlaceEditableInputContainer
+};

package/dist/InlineSelect/InlineSelect.types.d.ts

@@ -1,7 +1,7 @@
-import type { CSSProperties } from 'react';
-import type { DropdownSharedProps } from '@synerise/ds-dropdown';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { InputProps } from '../InlineEdit.types';
+import { CSSProperties } from 'react';
+import { DropdownSharedProps } from '@synerise/ds-dropdown';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { InputProps } from '../InlineEdit.types';
 export type InlineSelectProps<ItemType extends ListItemProps = ListItemProps> = {
     size?: 'normal' | 'small';
     tooltipTitle?: string;

package/dist/InlineSelect/InlineSelect.types.js

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

package/dist/InlineSelect/SelectDropdown/SelectDropdown.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import { type SelectDropdownProps } from './SelectDropdown.types';
+import { default as React } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { SelectDropdownProps } from './SelectDropdown.types';
 declare const SelectDropdown: <ItemType extends ListItemProps>({ dataSource, dropdownVisibleRows, dropdownRowHeight, onSelect, closeDropdown, style, }: SelectDropdownProps<ItemType>) => React.JSX.Element;
 export default SelectDropdown;

package/dist/InlineSelect/SelectDropdown/SelectDropdown.js

@@ -1,51 +1,29 @@
-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 React, { useCallback, useState } from 'react';
-import { SearchItems } from '@synerise/ds-search';
-import * as S from './SelectDropdown.style';
-var DEFAULT_ROW_HEIGHT = 32;
-var DEFAULT_VISIBLE_ROWS = 10;
-var SelectDropdown = function SelectDropdown(_ref) {
-  var dataSource = _ref.dataSource,
-    dropdownVisibleRows = _ref.dropdownVisibleRows,
-    dropdownRowHeight = _ref.dropdownRowHeight,
-    onSelect = _ref.onSelect,
-    closeDropdown = _ref.closeDropdown,
-    style = _ref.style;
-  var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
-  var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
-  var _useState = useState(0),
-    scrollTop = _useState[0],
-    setScrollTop = _useState[1];
-  var handleItemClick = useCallback(function (item) {
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { SearchItems } from "@synerise/ds-search";
+import { DropdownWrapper, ListWrapper, StyledScrollbar, ListItem } from "./SelectDropdown.style.js";
+const DEFAULT_ROW_HEIGHT = 32;
+const DEFAULT_VISIBLE_ROWS = 10;
+const SelectDropdown = ({
+  dataSource,
+  dropdownVisibleRows,
+  dropdownRowHeight,
+  onSelect,
+  closeDropdown,
+  style
+}) => {
+  const rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
+  const rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
+  const [scrollTop, setScrollTop] = useState(0);
+  const handleItemClick = useCallback((item) => {
     onSelect(item);
-    // @ts-expect-error Argument of type 'ItemType' is not assignable to parameter of type 'ItemData<MouseEvent<HTMLDivElement, MouseEvent>>
-    item.onClick == null || item.onClick(item);
+    item.onClick?.(item);
     closeDropdown();
   }, [onSelect, closeDropdown]);
-  return /*#__PURE__*/React.createElement(S.DropdownWrapper, {
-    style: style
-  }, /*#__PURE__*/React.createElement(S.ListWrapper, null, /*#__PURE__*/React.createElement(S.StyledScrollbar, {
-    maxHeight: rowCount * rowHeight,
-    absolute: true,
-    onScroll: function onScroll(event) {
-      return setScrollTop(event.currentTarget.scrollTop);
-    }
-  }, /*#__PURE__*/React.createElement(SearchItems, {
-    data: dataSource,
-    itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(S.ListItem, _extends({
-        key: item == null ? void 0 : item.text
-      }, item));
-    },
-    onItemClick: handleItemClick,
-    rowHeight: rowHeight,
-    height: rowCount * rowHeight,
-    visibleRows: rowCount,
-    listProps: {
-      scrollTop: scrollTop
-    },
-    width: "100%",
-    renderInMenu: false
-  }))));
+  return /* @__PURE__ */ jsx(DropdownWrapper, { style, children: /* @__PURE__ */ jsx(ListWrapper, { children: /* @__PURE__ */ jsx(StyledScrollbar, { maxHeight: rowCount * rowHeight, absolute: true, onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), children: /* @__PURE__ */ jsx(SearchItems, { data: dataSource, itemRender: (item) => /* @__PURE__ */ jsx(ListItem, { ...item }, item?.text), onItemClick: handleItemClick, rowHeight, height: rowCount * rowHeight, visibleRows: rowCount, listProps: {
+    scrollTop
+  }, width: "100%", renderInMenu: false }) }) }) });
+};
+export {
+  SelectDropdown as default
 };
-export default SelectDropdown;

package/dist/InlineSelect/SelectDropdown/SelectDropdown.style.d.ts

@@ -1,6 +1,6 @@
-import { type StyledListItem } from '@synerise/ds-list-item';
-import { type ScrollbarProps } from '@synerise/ds-scrollbar';
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
+import { StyledListItem } from '@synerise/ds-list-item';
+import { ScrollbarProps } from '@synerise/ds-scrollbar';
+export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollbar: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
 export declare const ListItem: StyledListItem;

package/dist/InlineSelect/SelectDropdown/SelectDropdown.style.js

@@ -1,22 +1,27 @@
-import styled from 'styled-components';
-import DSListItem from '@synerise/ds-list-item';
-import Scrollbar from '@synerise/ds-scrollbar';
-export var DropdownWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import DSListItem from "@synerise/ds-list-item";
+import Scrollbar from "@synerise/ds-scrollbar";
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SelectDropdownstyle__DropdownWrapper",
   componentId: "sc-1c17xkc-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:200px;"]);
-export var ListWrapper = styled.div.withConfig({
+const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SelectDropdownstyle__ListWrapper",
   componentId: "sc-1c17xkc-1"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;background:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.white;
-});
-export var StyledScrollbar = styled(Scrollbar).withConfig({
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;background:", ";"], ({
+  theme
+}) => theme.palette.white);
+const StyledScrollbar = /* @__PURE__ */ styled(Scrollbar).withConfig({
   displayName: "SelectDropdownstyle__StyledScrollbar",
   componentId: "sc-1c17xkc-2"
 })(["&&{.scrollbar-container{padding-right:8px;}}"]);
-export var ListItem = styled(DSListItem).withConfig({
+const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
   displayName: "SelectDropdownstyle__ListItem",
   componentId: "sc-1c17xkc-3"
-})(["min-width:auto;"]);
+})(["min-width:auto;"]);
+export {
+  DropdownWrapper,
+  ListItem,
+  ListWrapper,
+  StyledScrollbar
+};

package/dist/InlineSelect/SelectDropdown/SelectDropdown.types.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { InlineSelectProps } from '../InlineSelect.types';
+import { CSSProperties } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { InlineSelectProps } from '../InlineSelect.types';
 export type SelectDropdownProps<ItemType extends ListItemProps = ListItemProps> = Pick<InlineSelectProps<ItemType>, 'dataSource'> & {
     dropdownVisibleRows?: number;
     dropdownRowHeight?: number;

package/dist/InlineSelect/SelectDropdown/SelectDropdown.types.js

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

package/dist/index.js

@@ -1,4 +1,6 @@
-export { default } from './InlineEdit';
-export * from './InlineEdit.types';
-export * from './InlineSelect/InlineSelect.types';
-export { default as InlineSelect } from './InlineSelect/InlineSelect';
+import { default as default2 } from "./InlineEdit.js";
+import { default as default3 } from "./InlineSelect/InlineSelect.js";
+export {
+  default3 as InlineSelect,
+  default2 as default
+};

package/dist/modules.d.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "description": "InlineEdit 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,20 +35,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.3.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-list-item": "^1.4.9",
-    "@synerise/ds-scrollbar": "^1.2.16",
-    "@synerise/ds-search": "^1.5.9",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-input": "^1.6.10",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-search": "^1.5.10",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }