@synerise/ds-inline-edit 0.6.102 → 0.6.104

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.
 
+## [0.6.104](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.6.103...@synerise/ds-inline-edit@0.6.104) (2024-04-05)
+
+**Note:** Version bump only for package @synerise/ds-inline-edit
+
+
+
+
+
+## [0.6.103](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.6.102...@synerise/ds-inline-edit@0.6.103) (2024-04-02)
+
+
+### Bug Fixes
+
+* **inline-edit:** fixed autosize ([3dba994](https://github.com/Synerise/synerise-design/commit/3dba9947e3a0c43297fce8d66ba5be2514db4f4c))
+
+
+
+
+
 ## [0.6.102](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.6.101...@synerise/ds-inline-edit@0.6.102) (2024-03-29)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineEdit.d.ts

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

package/dist/InlineEdit.js

@@ -1,13 +1,9 @@
-import * as React from 'react';
-import AutosizeInput from 'react-input-autosize';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { EditS } from '@synerise/ds-icon';
 import { toCamelCase } from '@synerise/ds-utils';
+import AutosizeInput from './autosize/autosize';
 import * as S from './InlineEdit.styles';
-import { attachWidthWatcher } from './utils';
-var SAMPLE = String.fromCharCode.apply(String, [].concat(Array(26).keys()).map(function (i) {
-  return i + 65;
-}));
 
 var InlineEdit = function InlineEdit(_ref) {
   var className = _ref.className,
@@ -20,21 +16,21 @@ var InlineEdit = function InlineEdit(_ref) {
       tooltipTitle = _ref.tooltipTitle,
       error = _ref.error,
       input = _ref.input;
-  var inputRef = React.useMemo(function () {
-    return React.createRef();
-  }, []);
-  var fontStyleWatcher = React.useMemo(function () {
-    return React.createRef();
-  }, []);
+  var autoWidthRef = useRef(null);
+  var inputRef = useRef();
+  useEffect(function () {
+    if (autoWidthRef.current) {
+      inputRef.current = autoWidthRef.current.inputRef.current;
+    }
+  });
 
-  var _React$useState = React.useState(),
-      scrolled = _React$useState[0],
-      setScrolled = _React$useState[1];
+  var _useState = useState(),
+      scrolled = _useState[0],
+      setScrolled = _useState[1];
 
-  var handleScroll = React.useCallback(function () {
-    if ((inputRef == null ? void 0 : inputRef.current) !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      var scrolledPixels = (inputRef == null ? void 0 : inputRef.current).input.scrollLeft;
+  var handleScroll = useCallback(function () {
+    if (inputRef.current) {
+      var scrolledPixels = inputRef.current.scrollLeft;
 
       if (scrolledPixels > 0) {
         setScrolled(true);
@@ -43,41 +39,27 @@ var InlineEdit = function InlineEdit(_ref) {
       }
     }
   }, [inputRef]);
-  var handleChange = React.useCallback(function (e) {
-    input.onChange(e);
+  var handleChange = useCallback(function (event) {
+    input.onChange(event);
   }, [input]);
-  var handleBlur = React.useCallback(function (e) {
-    input.onBlur && input.onBlur(e); // @ts-ignore
-
-    inputRef.current.input && inputRef.current.input.scrollTo({
+  var handleBlur = useCallback(function (event) {
+    input.onBlur && input.onBlur(event);
+    inputRef.current && inputRef.current.scrollTo({
       left: 0
     });
   }, [input, inputRef]);
-  var handleKeyPress = React.useCallback(function (e) {
-    if (e.key === 'Enter') {
-      input.onEnterPress && input.onEnterPress(e);
+  var handleKeyPress = useCallback(function (event) {
+    if (event.key === 'Enter') {
+      input.onEnterPress && input.onEnterPress(event);
       inputRef.current && inputRef.current.blur();
     }
   }, [input, inputRef]);
-  var handleFocusInput = React.useCallback(function () {
+  var handleFocusInput = useCallback(function () {
     inputRef.current && inputRef.current.focus();
   }, [inputRef]);
-  var updateInputWidth = React.useCallback(function () {
-    if (inputRef.current) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      inputRef.current.copyInputStyles(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-      inputRef.current.updateInputWidth();
-    }
-  }, [inputRef]);
-  React.useEffect(function () {
+  useEffect(function () {
     autoFocus && inputRef.current && inputRef.current.focus();
-    updateInputWidth();
-
-    if (fontStyleWatcher) {
-      attachWidthWatcher(fontStyleWatcher.current, updateInputWidth);
-    }
-  }, [autoFocus, fontStyleWatcher, inputRef, updateInputWidth]);
+  }, [autoFocus, inputRef]);
   return /*#__PURE__*/React.createElement(S.InPlaceEditableInputContainer, {
     className: "ds-inline-edit " + (className || ''),
     style: style,
@@ -93,15 +75,15 @@ var InlineEdit = function InlineEdit(_ref) {
     onKeyPress: handleKeyPress,
     disabled: disabled,
     name: input.name,
+    extraWidth: 2,
     value: input.value || '',
     onChange: handleChange,
     onBlur: handleBlur,
     autoComplete: input.autoComplete,
     placeholderIsMinWidth: false,
-    onScroll: handleScroll
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    ,
-    ref: inputRef
+    onScroll: handleScroll,
+    wrapperClassName: "autosize-input",
+    ref: autoWidthRef
   }), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
     "data-testid": "inline-edit-icon",
     title: tooltipTitle
@@ -112,14 +94,7 @@ var InlineEdit = function InlineEdit(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(EditS, null),
     size: 24
-  }))), /*#__PURE__*/React.createElement(S.FontStyleWatcher, {
-    ref: fontStyleWatcher,
-    style: {
-      position: 'absolute',
-      visibility: 'hidden',
-      pointerEvents: 'none'
-    }
-  }, SAMPLE));
+  }))));
 };
 
 export default InlineEdit;

package/dist/InlineSelect/InlineSelect.d.ts

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

package/dist/InlineSelect/InlineSelect.js

@@ -1,12 +1,11 @@
 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); }
 
-import * as React from 'react';
-import AutosizeInput from 'react-input-autosize';
+import React, { useRef, useState, useEffect } from 'react';
 import { toCamelCase } from '@synerise/ds-utils';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
 import Dropdown from '@synerise/ds-dropdown';
+import AutosizeInput from '../autosize/autosize';
 import * as S from './InlineSelect.style';
-import { attachWidthWatcher } from '../utils';
 import SelectDropdown from './SelectDropdown/SelectDropdown';
 
 var InlineSelect = function InlineSelect(_ref) {
@@ -28,45 +27,34 @@ var InlineSelect = function InlineSelect(_ref) {
       placeholder = _ref.placeholder,
       dataSource = _ref.dataSource,
       initialValue = _ref.initialValue;
-  var inputRef = React.useMemo(function () {
-    return React.createRef();
-  }, []);
-  var fontStyleWatcher = React.useMemo(function () {
-    return React.createRef();
-  }, []);
-  var updateInputWidth = React.useCallback(function () {
-    if (inputRef.current) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      inputRef.current.copyInputStyles(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var autoWidthRef = useRef(null);
+  var inputRef = useRef();
 
-      inputRef.current.updateInputWidth();
-    }
-  }, [inputRef]);
-  React.useEffect(function () {
-    updateInputWidth();
-
-    if (fontStyleWatcher) {
-      attachWidthWatcher(fontStyleWatcher.current, updateInputWidth);
-    }
-  }, [autoFocus, fontStyleWatcher, inputRef, updateInputWidth]);
+  var _useState = useState(initialValue || placeholder || 'option'),
+      selectedValue = _useState[0],
+      setSelectedValue = _useState[1];
 
-  var _React$useState = React.useState(initialValue || placeholder || 'option'),
-      selectedValue = _React$useState[0],
-      setSelectedValue = _React$useState[1];
+  var _useState2 = useState(false),
+      opened = _useState2[0],
+      setOpened = _useState2[1];
 
-  var _React$useState2 = React.useState(false),
-      opened = _React$useState2[0],
-      setOpened = _React$useState2[1];
+  var _useState3 = useState(false),
+      pressed = _useState3[0],
+      setPressed = _useState3[1];
 
-  var _React$useState3 = React.useState(false),
-      pressed = _React$useState3[0],
-      setPressed = _React$useState3[1];
-
-  React.useEffect(function () {
-    if ((input == null ? void 0 : input.value) !== selectedValue) {
+  useEffect(function () {
+    if (input != null && input.value && input.value !== selectedValue) {
       setSelectedValue(input == null ? void 0 : input.value);
     }
-  }, [input, selectedValue]);
+  }, [input == null ? void 0 : input.value, selectedValue]);
+  useEffect(function () {
+    if (autoWidthRef.current) {
+      inputRef.current = autoWidthRef.current.inputRef.current;
+    }
+  });
+  useEffect(function () {
+    autoFocus && inputRef.current && inputRef.current.focus();
+  }, [autoFocus, inputRef]);
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     visible: !disabled && opened,
     onVisibleChange: setOpened,
@@ -108,24 +96,17 @@ var InlineSelect = function InlineSelect(_ref) {
     value: selectedValue || placeholder,
     autoComplete: input.autoComplete,
     placeholderIsMinWidth: false,
-    style: inputStyle
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    ,
-    ref: inputRef
+    style: inputStyle,
+    extraWidth: 2,
+    wrapperClassName: "autosize-input",
+    ref: autoWidthRef
   }), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
     size: size,
     expanded: opened
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null),
     size: 24
-  })), /*#__PURE__*/React.createElement(S.FontStyleWatcher, {
-    ref: fontStyleWatcher,
-    style: {
-      position: 'absolute',
-      visibility: 'hidden',
-      pointerEvents: 'none'
-    }
-  })));
+  }))));
 };
 
 export default InlineSelect;

package/dist/autosize/autosize.d.ts

@@ -0,0 +1,30 @@
+import React, { InputHTMLAttributes, CSSProperties, RefObject } from 'react';
+export type AutosizeInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    extraWidth?: number | string;
+    minWidth?: number | string;
+    onAutosize?: (newWidth: number) => void;
+    placeholderIsMinWidth?: boolean;
+    value?: string | number;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+};
+export type AutosizeInputRefType = {
+    inputRef: RefObject<HTMLInputElement>;
+    sizerRef: RefObject<HTMLDivElement>;
+    placeholderSizerRef: RefObject<HTMLDivElement>;
+    copyInputStyles: () => void;
+    updateInputWidth: () => void;
+};
+/**
+ * Automatically sized input field.
+ */
+export declare const AutosizeInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    extraWidth?: string | number | undefined;
+    minWidth?: string | number | undefined;
+    onAutosize?: ((newWidth: number) => void) | undefined;
+    placeholderIsMinWidth?: boolean | undefined;
+    value?: string | number | undefined;
+    wrapperClassName?: string | undefined;
+    wrapperStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<AutosizeInputRefType>>;
+export default AutosizeInput;

package/dist/autosize/autosize.js

@@ -0,0 +1,169 @@
+var _excluded = ["extraWidth", "wrapperClassName", "wrapperStyle", "onAutosize", "placeholderIsMinWidth", "minWidth"];
+
+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; }
+
+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; }
+
+import React, { useState, useEffect, useRef, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
+import { useResizeObserver } from '@synerise/ds-utils';
+var sizerStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  visibility: 'hidden',
+  height: 0,
+  overflow: 'scroll',
+  whiteSpace: 'pre'
+};
+/**
+ * Automatically sized input field.
+ */
+
+export var AutosizeInput = forwardRef(function (_ref, forwardedRef) {
+  var _props$value, _props$style$display, _props$style;
+
+  var _ref$extraWidth = _ref.extraWidth,
+      extraWidth = _ref$extraWidth === void 0 ? 16 : _ref$extraWidth,
+      wrapperClassName = _ref.wrapperClassName,
+      wrapperStyleProp = _ref.wrapperStyle,
+      onAutosize = _ref.onAutosize,
+      placeholderIsMinWidth = _ref.placeholderIsMinWidth,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var inputRef = useRef(null);
+  var sizerRef = useRef(null);
+  var placeholderSizerRef = useRef(null);
+
+  var _useState = useState(''),
+      input = _useState[0],
+      setInput = _useState[1];
+
+  var _useState2 = useState(0),
+      inputWidth = _useState2[0],
+      setInputWidth = _useState2[1];
+
+  var _useResizeObserver = useResizeObserver(sizerRef),
+      updatedSizerWidth = _useResizeObserver.width;
+
+  var _useResizeObserver2 = useResizeObserver(placeholderSizerRef),
+      updatedPlaceholderWidth = _useResizeObserver2.width;
+
+  var usedValue = "" + ((_props$value = props.value) != null ? _props$value : input);
+
+  var handleInput = function handleInput(event) {
+    setInput(event.target.value);
+    if (props.onChange) props.onChange(event);
+  };
+
+  var copyInputStyles = function copyInputStyles() {
+    if (inputRef.current) {
+      var computedStyle = window.getComputedStyle(inputRef.current);
+
+      if (sizerRef.current) {
+        sizerRef.current.style.fontSize = computedStyle.fontSize;
+        sizerRef.current.style.fontFamily = computedStyle.fontFamily;
+        sizerRef.current.style.fontWeight = computedStyle.fontWeight;
+        sizerRef.current.style.fontStyle = computedStyle.fontStyle;
+        sizerRef.current.style.letterSpacing = computedStyle.letterSpacing;
+        sizerRef.current.style.textTransform = computedStyle.textTransform;
+      }
+
+      if (placeholderSizerRef.current) {
+        placeholderSizerRef.current.style.fontSize = computedStyle.fontSize;
+        placeholderSizerRef.current.style.fontFamily = computedStyle.fontFamily;
+        placeholderSizerRef.current.style.fontWeight = computedStyle.fontWeight;
+        placeholderSizerRef.current.style.fontStyle = computedStyle.fontStyle;
+        placeholderSizerRef.current.style.letterSpacing = computedStyle.letterSpacing;
+        placeholderSizerRef.current.style.textTransform = computedStyle.textTransform;
+      }
+    }
+  };
+
+  var updateInputWidth = function updateInputWidth() {
+    var _sizerRef$current, _placeholderSizerRef$;
+
+    var sizerWidth = (_sizerRef$current = sizerRef.current) == null ? void 0 : _sizerRef$current.scrollWidth;
+    var placeholderWidth = (_placeholderSizerRef$ = placeholderSizerRef.current) == null ? void 0 : _placeholderSizerRef$.scrollWidth;
+
+    if (sizerWidth && usedValue.length) {
+      /* If the input field has content, update the sizer to match its width  */
+      var width = sizerWidth;
+
+      if (placeholderIsMinWidth && placeholderWidth && sizerWidth < placeholderWidth && placeholderSizerRef.current) {
+        width = placeholderWidth;
+      }
+
+      if (width < +minWidth) {
+        width = +minWidth;
+      }
+
+      if (width) {
+        setInputWidth(width + +extraWidth);
+        if (onAutosize) onAutosize(width);
+      }
+    } else if (props.placeholder && placeholderWidth) {
+      /* If no input value exists, check for placeholder value and update the sizer accordingly  */
+      setInputWidth(Math.max(+minWidth, placeholderWidth) + +extraWidth);
+      if (onAutosize) onAutosize(placeholderWidth);
+    } else if (sizerRef.current) {
+      /* If no input value or placeholder exists, update the sizer to the width of the "minWidth" + "extraWidth" prop (default is 16) */
+      setInputWidth(+minWidth + +extraWidth);
+      if (onAutosize) onAutosize(+minWidth);
+    }
+  };
+  /* Copy styles of the input field to the sizer, ensuring that the width of the input adjusts accordingly */
+
+
+  useLayoutEffect(function () {
+    copyInputStyles();
+  }, []);
+  useEffect(updateInputWidth, [usedValue, props.placeholder, extraWidth, placeholderIsMinWidth, onAutosize, setInputWidth, minWidth, updatedPlaceholderWidth, updatedSizerWidth]);
+  useImperativeHandle(forwardedRef, function () {
+    return {
+      inputRef: inputRef,
+      sizerRef: sizerRef,
+      placeholderSizerRef: placeholderSizerRef,
+      copyInputStyles: copyInputStyles,
+      updateInputWidth: updateInputWidth
+    };
+  });
+
+  var wrapperStyle = _objectSpread({}, wrapperStyleProp, {
+    position: 'relative',
+    display: (_props$style$display = (_props$style = props.style) == null ? void 0 : _props$style.display) != null ? _props$style$display : 'inline-block'
+  });
+
+  var inputStyle = _objectSpread({
+    boxSizing: 'content-box',
+    width: inputWidth
+  }, props.style);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: wrapperStyle,
+    "data-testid": "wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: sizerStyle,
+    ref: sizerRef,
+    "data-testid": "sizer"
+  }, usedValue), /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    ref: inputRef,
+    value: usedValue,
+    style: inputStyle,
+    onChange: handleInput,
+    "data-testid": "input"
+  })), props.placeholder ? /*#__PURE__*/React.createElement("div", {
+    ref: placeholderSizerRef,
+    style: sizerStyle,
+    "data-testid": "placeholder-sizer"
+  }, props.placeholder) : null);
+});
+export default AutosizeInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "0.6.102",
+  "version": "0.6.104",
   "description": "InlineEdit UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,13 +33,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.102",
-    "@synerise/ds-icon": "^0.60.5",
-    "@synerise/ds-menu": "^0.18.17",
-    "@synerise/ds-scrollbar": "^0.10.0",
-    "@synerise/ds-search": "^0.8.84",
-    "@synerise/ds-tooltip": "^0.14.22",
+    "@synerise/ds-dropdown": "^0.17.104",
+    "@synerise/ds-icon": "^0.60.6",
+    "@synerise/ds-menu": "^0.18.19",
+    "@synerise/ds-scrollbar": "^0.10.1",
+    "@synerise/ds-search": "^0.8.86",
+    "@synerise/ds-tooltip": "^0.14.24",
     "@synerise/ds-typography": "^0.14.3",
+    "@synerise/ds-utils": "^0.26.2",
     "react-input-autosize": "^2.2.2"
   },
   "peerDependencies": {
@@ -48,10 +49,9 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.26.1",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/react-input-autosize": "2.2.1"
   },
-  "gitHead": "07304b7bf03826701df904c7be058d93588a9611"
+  "gitHead": "84c9ff34c60369cc819ab1d4307373fafaf06462"
 }