@synerise/ds-inline-edit 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.0.6...@synerise/ds-inline-edit@1.0.7) (2025-04-24)
+
+
+### Bug Fixes
+
+* **inline-edit:** fix text flicker ([b151d33](https://github.com/Synerise/synerise-design/commit/b151d3312fd546df7bf3087b4e509ce565f2df44))
+
+
+
+
+
+## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.0.5...@synerise/ds-inline-edit@1.0.6) (2025-04-16)
+
+**Note:** Version bump only for package @synerise/ds-inline-edit
+
+
+
+
+
 ## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@1.0.4...@synerise/ds-inline-edit@1.0.5) (2025-04-02)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineEdit.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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, useRef, useState, useEffect } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { EditS } from '@synerise/ds-icon';
@@ -20,54 +20,49 @@ var InlineEdit = function InlineEdit(_ref) {
     input = _ref.input;
   var inputRef = useRef(null);
   var _useState = useState(),
-    scrolled = _useState[0],
-    setScrolled = _useState[1];
-  var handleScroll = useCallback(function () {
-    if (inputRef.current) {
-      var scrolledPixels = inputRef.current.scrollLeft;
-      if (scrolledPixels > 0) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    }
-  }, [inputRef]);
+    focused = _useState[0],
+    setFocused = _useState[1];
   var handleChange = useCallback(function (event) {
-    input.onChange(event);
+    // eslint-disable-next-line no-unused-expressions
+    input.onChange == null || input.onChange(event);
   }, [input]);
+  var handleFocus = function handleFocus() {
+    setFocused(false);
+  };
   var handleBlur = useCallback(function (event) {
     input.onBlur && input.onBlur(event);
     inputRef.current && inputRef.current.scrollTo({
       left: 0
     });
-  }, [input, inputRef]);
+    setFocused(true);
+  }, [input]);
   var handleKeyPress = useCallback(function (event) {
     if (event.key === 'Enter') {
       input.onEnterPress && input.onEnterPress(event);
       inputRef.current && inputRef.current.blur();
     }
-  }, [input, inputRef]);
+  }, [input]);
   var handleFocusInput = useCallback(function () {
     inputRef.current && inputRef.current.focus();
-  }, [inputRef]);
+  }, []);
   useEffect(function () {
     autoFocus && inputRef.current && inputRef.current.focus();
-  }, [autoFocus, inputRef]);
+  }, [autoFocus]);
   return /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
     className: "ds-inline-edit " + (className || ''),
     style: style,
     size: size,
     disabled: disabled,
     error: error,
-    scrolled: scrolled
+    scrolled: focused
   }, /*#__PURE__*/React.createElement(AutosizeInput, {
     extraWidth: 2,
-    value: input.value || '',
+    value: input.value,
     placeholder: input.placeholder,
     placeholderIsMinWidth: false,
     wrapperClassName: "autosize-input"
   }, /*#__PURE__*/React.createElement("input", _extends({
-    onScroll: handleScroll,
+    autoComplete: "off",
     id: input.name ? toCamelCase(input.name) : 'id'
   }, input, {
     className: "autosize-input",
@@ -76,7 +71,8 @@ var InlineEdit = function InlineEdit(_ref) {
     disabled: disabled,
     onChange: handleChange,
     onBlur: handleBlur,
-    value: input.value || '',
+    onFocus: handleFocus,
+    value: input.value,
     ref: inputRef
   }))), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
     "data-testid": "inline-edit-icon",

package/dist/InlineEdit.styles.d.ts

@@ -1,4 +1,4 @@
-import { ThemeProps } from '@synerise/ds-core';
+import type { ThemeProps } from '@synerise/ds-core';
 type InPlaceEditableInputContainerProps = {
     size: 'large' | 'small' | 'normal';
     disabled?: boolean;

package/dist/InlineEdit.styles.js

@@ -46,7 +46,7 @@ export var IconWrapper = styled.div.withConfig({
 export var InPlaceEditableInputContainer = 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) {
+})(["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) {

package/dist/InlineSelect/InlineSelect.js

@@ -1,6 +1,6 @@
 var _excluded = ["value", "onChange"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
+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, { useRef, useState, useEffect } from 'react';
 import { NOOP, toCamelCase } from '@synerise/ds-utils';
 import Icon, { AngleDownS } from '@synerise/ds-icon';

package/dist/InlineSelect/SelectDropdown/SelectDropdown.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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, { useState, useCallback } from 'react';
 import { SearchItems } from '@synerise/ds-search/dist/Elements';
 import * as S from './SelectDropdown.style';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "InlineEdit UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.0.4",
-    "@synerise/ds-icon": "^1.3.0",
-    "@synerise/ds-input": "^1.0.4",
-    "@synerise/ds-list-item": "^1.0.4",
-    "@synerise/ds-scrollbar": "^1.0.4",
-    "@synerise/ds-search": "^1.1.1",
-    "@synerise/ds-tooltip": "^1.1.3",
-    "@synerise/ds-typography": "^1.0.4",
+    "@synerise/ds-dropdown": "^1.0.6",
+    "@synerise/ds-icon": "^1.4.1",
+    "@synerise/ds-input": "^1.1.1",
+    "@synerise/ds-list-item": "^1.0.6",
+    "@synerise/ds-scrollbar": "^1.0.6",
+    "@synerise/ds-search": "^1.1.3",
+    "@synerise/ds-tooltip": "^1.1.5",
+    "@synerise/ds-typography": "^1.0.6",
     "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "dc78b03be09e793ec84f1dafc59c5616e77f1196"
+  "gitHead": "fc601270d3c84a5a52b62473a01f1b3c1c7014a7"
 }