@synerise/ds-inline-edit 0.7.4 → 0.7.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.7.4...@synerise/ds-inline-edit@0.7.5) (2024-05-10)
+
+
+### Bug Fixes
+
+* **input:** refactored autosize input solution ([449bd86](https://github.com/Synerise/synerise-design/commit/449bd868b8d3b545ac582c556fa0ff607c77f853))
+
+
+
+
+
 ## [0.7.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.7.3...@synerise/ds-inline-edit@0.7.4) (2024-05-08)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineEdit.js

@@ -2,7 +2,7 @@ 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 { AutosizeInput } from '@synerise/ds-input';
 import * as S from './InlineEdit.styles';
 
 var InlineEdit = function InlineEdit(_ref) {
@@ -16,13 +16,7 @@ var InlineEdit = function InlineEdit(_ref) {
       tooltipTitle = _ref.tooltipTitle,
       error = _ref.error,
       input = _ref.input;
-  var autoWidthRef = useRef(null);
-  var inputRef = useRef();
-  useEffect(function () {
-    if (autoWidthRef.current) {
-      inputRef.current = autoWidthRef.current.inputRef.current;
-    }
-  });
+  var inputRef = useRef(null);
 
   var _useState = useState(),
       scrolled = _useState[0],
@@ -68,6 +62,13 @@ var InlineEdit = function InlineEdit(_ref) {
     error: error,
     scrolled: scrolled
   }, /*#__PURE__*/React.createElement(AutosizeInput, {
+    extraWidth: 2,
+    value: input.value || '',
+    placeholderIsMinWidth: false,
+    wrapperClassName: "autosize-input"
+  }, /*#__PURE__*/React.createElement("input", {
+    itemRef: "",
+    onScroll: handleScroll,
     id: input.name ? toCamelCase(input.name) : 'id',
     className: "autosize-input",
     placeholder: input.placeholder,
@@ -75,17 +76,13 @@ var InlineEdit = function InlineEdit(_ref) {
     onKeyPress: handleKeyPress,
     disabled: disabled,
     name: input.name,
-    extraWidth: 2,
-    readOnly: input.readOnly,
-    value: input.value || '',
     onChange: handleChange,
     onBlur: handleBlur,
+    readOnly: input.readOnly,
+    value: input.value || '',
     autoComplete: input.autoComplete,
-    placeholderIsMinWidth: false,
-    onScroll: handleScroll,
-    wrapperClassName: "autosize-input",
-    ref: autoWidthRef
-  }), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
+    ref: inputRef
+  })), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
     "data-testid": "inline-edit-icon",
     title: tooltipTitle
   }, /*#__PURE__*/React.createElement(S.IconWrapper, {

package/dist/InlineSelect/InlineSelect.d.ts

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

package/dist/InlineSelect/InlineSelect.js

@@ -4,13 +4,14 @@ 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 { AutosizeInput } from '@synerise/ds-input';
 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,
@@ -27,37 +28,31 @@ var InlineSelect = function InlineSelect(_ref) {
       placeholder = _ref.placeholder,
       dataSource = _ref.dataSource,
       initialValue = _ref.initialValue;
-  var autoWidthRef = useRef(null);
-  var inputRef = useRef();
+  var inputRef = useRef(null);
 
   var _useState = useState(initialValue || placeholder || 'option'),
       selectedValue = _useState[0],
       setSelectedValue = _useState[1];
 
-  var _useState2 = useState(false),
-      opened = _useState2[0],
-      setOpened = _useState2[1];
+  var _useState2 = useState(Boolean(expanded)),
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
 
   var _useState3 = useState(false),
-      pressed = _useState3[0],
-      setPressed = _useState3[1];
+      isPressed = _useState3[0],
+      setIsPressed = _useState3[1];
 
   useEffect(function () {
     if (input != null && input.value && input.value !== selectedValue) {
       setSelectedValue(input == null ? void 0 : input.value);
     }
   }, [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,
+    visible: !disabled && isOpened,
+    onVisibleChange: setIsOpened,
     placement: "bottomRight",
     disabled: disabled,
     overlay: /*#__PURE__*/React.createElement(SelectDropdown, {
@@ -66,7 +61,7 @@ var InlineSelect = function InlineSelect(_ref) {
         return setSelectedValue(item.text);
       },
       closeDropdown: function closeDropdown() {
-        return setOpened(false);
+        return setIsOpened(false);
       },
       style: dropdownOverlayStyle
     }),
@@ -79,30 +74,33 @@ var InlineSelect = function InlineSelect(_ref) {
     error: error,
     tabIndex: 0,
     onMouseDown: function onMouseDown() {
-      return setPressed(true);
+      return setIsPressed(true);
     },
     onMouseUp: function onMouseUp() {
-      return setPressed(false);
+      return setIsPressed(false);
     },
-    pressed: pressed,
-    dropdownOpened: opened
+    pressed: isPressed,
+    dropdownOpened: isOpened
   }, /*#__PURE__*/React.createElement(AutosizeInput, {
+    value: selectedValue || placeholder,
+    placeholderIsMinWidth: false,
+    extraWidth: 2,
+    wrapperClassName: "autosize-input"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    style: inputStyle,
     id: input.name ? toCamelCase(input.name) : 'id',
     className: "autosize-input",
-    placeholder: input.placeholder,
+    placeholder: placeholder,
     maxLength: input.maxLength,
     disabled: disabled,
     name: input.name,
+    readOnly: input.readOnly,
     value: selectedValue || placeholder,
-    autoComplete: input.autoComplete,
-    placeholderIsMinWidth: false,
-    style: inputStyle,
-    extraWidth: 2,
-    wrapperClassName: "autosize-input",
-    ref: autoWidthRef
-  }), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
+    autoComplete: "off"
+  })), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
     size: size,
-    expanded: opened
+    expanded: isOpened
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null),
     size: 24

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
+import type { CSSProperties } from 'react';
 import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.types';
 import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
 import { InputProps } from '../InlineEdit.types';
-export interface InlineSelectProps {
+export type InlineSelectProps = {
     size?: 'normal' | 'small';
     tooltipTitle?: string;
     className?: string;
     disabled?: boolean;
-    input: Partial<InputProps>;
-    style?: React.CSSProperties;
-    dropdownOverlayStyle?: React.CSSProperties;
-    inputStyle?: React.CSSProperties;
+    input: Partial<Omit<InputProps, 'placeholder'>>;
+    style?: CSSProperties;
+    dropdownOverlayStyle?: CSSProperties;
+    inputStyle?: CSSProperties;
     dropdownProps?: Partial<DropdownProps>;
     autoFocus?: boolean;
     error?: boolean;
     hideIcon?: boolean;
-    expanded: boolean;
+    expanded?: boolean;
     initialValue?: string;
     placeholder?: string;
     dataSource: MenuItemProps[];
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "InlineEdit UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,15 +33,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.108",
-    "@synerise/ds-icon": "^0.60.8",
-    "@synerise/ds-menu": "^0.18.21",
-    "@synerise/ds-scrollbar": "^0.10.3",
-    "@synerise/ds-search": "^0.8.89",
-    "@synerise/ds-tooltip": "^0.14.26",
+    "@synerise/ds-dropdown": "^0.17.109",
+    "@synerise/ds-icon": "^0.60.9",
+    "@synerise/ds-input": "^0.21.2",
+    "@synerise/ds-menu": "^0.18.22",
+    "@synerise/ds-scrollbar": "^0.10.4",
+    "@synerise/ds-search": "^0.8.90",
+    "@synerise/ds-tooltip": "^0.14.27",
     "@synerise/ds-typography": "^0.15.0",
-    "@synerise/ds-utils": "^0.26.4",
-    "react-input-autosize": "^2.2.2"
+    "@synerise/ds-utils": "^0.26.5"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -50,8 +50,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.1.1",
-    "@testing-library/react": "10.0.1",
-    "@types/react-input-autosize": "2.2.1"
+    "@testing-library/react": "10.0.1"
   },
-  "gitHead": "1ad18b4b850f614943cd940a6b509d215ec025c7"
+  "gitHead": "dea3898f262a7c333c6fd8ef806036ed4368bde7"
 }

package/dist/autosize/autosize.d.ts

@@ -1,30 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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;