@synerise/ds-inline-edit 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/InlineEdit.js +17 -21
  3. package/dist/InlineEdit.styles.d.ts +1 -1
  4. package/dist/InlineEdit.styles.js +1 -1
  5. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **inline-edit:** fix text flicker ([b151d33](https://github.com/Synerise/synerise-design/commit/b151d3312fd546df7bf3087b4e509ce565f2df44))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [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)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-inline-edit
package/dist/InlineEdit.js CHANGED
@@ -20,54 +20,49 @@ var InlineEdit = function InlineEdit(_ref) {
20
20
  input = _ref.input;
21
21
  var inputRef = useRef(null);
22
22
  var _useState = useState(),
23
- scrolled = _useState[0],
24
- setScrolled = _useState[1];
25
- var handleScroll = useCallback(function () {
26
- if (inputRef.current) {
27
- var scrolledPixels = inputRef.current.scrollLeft;
28
- if (scrolledPixels > 0) {
29
- setScrolled(true);
30
- } else {
31
- setScrolled(false);
32
- }
33
- }
34
- }, [inputRef]);
23
+ focused = _useState[0],
24
+ setFocused = _useState[1];
35
25
  var handleChange = useCallback(function (event) {
36
- input.onChange(event);
26
+ // eslint-disable-next-line no-unused-expressions
27
+ input.onChange == null || input.onChange(event);
37
28
  }, [input]);
29
+ var handleFocus = function handleFocus() {
30
+ setFocused(false);
31
+ };
38
32
  var handleBlur = useCallback(function (event) {
39
33
  input.onBlur && input.onBlur(event);
40
34
  inputRef.current && inputRef.current.scrollTo({
41
35
  left: 0
42
36
  });
43
- }, [input, inputRef]);
37
+ setFocused(true);
38
+ }, [input]);
44
39
  var handleKeyPress = useCallback(function (event) {
45
40
  if (event.key === 'Enter') {
46
41
  input.onEnterPress && input.onEnterPress(event);
47
42
  inputRef.current && inputRef.current.blur();
48
43
  }
49
- }, [input, inputRef]);
44
+ }, [input]);
50
45
  var handleFocusInput = useCallback(function () {
51
46
  inputRef.current && inputRef.current.focus();
52
- }, [inputRef]);
47
+ }, []);
53
48
  useEffect(function () {
54
49
  autoFocus && inputRef.current && inputRef.current.focus();
55
- }, [autoFocus, inputRef]);
50
+ }, [autoFocus]);
56
51
  return /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
57
52
  className: "ds-inline-edit " + (className || ''),
58
53
  style: style,
59
54
  size: size,
60
55
  disabled: disabled,
61
56
  error: error,
62
- scrolled: scrolled
57
+ scrolled: focused
63
58
  }, /*#__PURE__*/React.createElement(AutosizeInput, {
64
59
  extraWidth: 2,
65
- value: input.value || '',
60
+ value: input.value,
66
61
  placeholder: input.placeholder,
67
62
  placeholderIsMinWidth: false,
68
63
  wrapperClassName: "autosize-input"
69
64
  }, /*#__PURE__*/React.createElement("input", _extends({
70
- onScroll: handleScroll,
65
+ autoComplete: "off",
71
66
  id: input.name ? toCamelCase(input.name) : 'id'
72
67
  }, input, {
73
68
  className: "autosize-input",
@@ -76,7 +71,8 @@ var InlineEdit = function InlineEdit(_ref) {
76
71
  disabled: disabled,
77
72
  onChange: handleChange,
78
73
  onBlur: handleBlur,
79
- value: input.value || '',
74
+ onFocus: handleFocus,
75
+ value: input.value,
80
76
  ref: inputRef
81
77
  }))), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
82
78
  "data-testid": "inline-edit-icon",
package/dist/InlineEdit.styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ThemeProps } from '@synerise/ds-core';
1
+ import type { ThemeProps } from '@synerise/ds-core';
2
2
  type InPlaceEditableInputContainerProps = {
3
3
  size: 'large' | 'small' | 'normal';
4
4
  disabled?: boolean;
package/dist/InlineEdit.styles.js CHANGED
@@ -46,7 +46,7 @@ export var IconWrapper = styled.div.withConfig({
46
46
  export var InPlaceEditableInputContainer = styled.div.withConfig({
47
47
  displayName: "InlineEditstyles__InPlaceEditableInputContainer",
48
48
  componentId: "sc-1itw4az-2"
49
- })(["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) {
49
+ })(["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) {
50
50
  var disabled = _ref.disabled;
51
51
  return disabled ? 'none' : 'all';
52
52
  }, IconWrapper, function (props) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-inline-edit",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "InlineEdit UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-dropdown": "^1.0.5",
38
- "@synerise/ds-icon": "^1.4.0",
39
- "@synerise/ds-input": "^1.1.0",
40
- "@synerise/ds-list-item": "^1.0.5",
41
- "@synerise/ds-scrollbar": "^1.0.5",
42
- "@synerise/ds-search": "^1.1.2",
43
- "@synerise/ds-tooltip": "^1.1.4",
44
- "@synerise/ds-typography": "^1.0.5",
37
+ "@synerise/ds-dropdown": "^1.0.6",
38
+ "@synerise/ds-icon": "^1.4.1",
39
+ "@synerise/ds-input": "^1.1.1",
40
+ "@synerise/ds-list-item": "^1.0.6",
41
+ "@synerise/ds-scrollbar": "^1.0.6",
42
+ "@synerise/ds-search": "^1.1.3",
43
+ "@synerise/ds-tooltip": "^1.1.5",
44
+ "@synerise/ds-typography": "^1.0.6",
45
45
  "@synerise/ds-utils": "^1.0.1"
46
46
  },
47
47
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "react": ">=16.9.0 <= 18.3.1",
50
50
  "styled-components": "^5.3.3"
51
51
  },
52
- "gitHead": "6735f9babfeef53122f54ca86cba5f581e8870d9"
52
+ "gitHead": "fc601270d3c84a5a52b62473a01f1b3c1c7014a7"
53
53
  }