@synerise/ds-inline-edit 0.9.8 → 0.10.0

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.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.9.8...@synerise/ds-inline-edit@0.10.0) (2025-01-29)
+
+
+### Features
+
+* antd@4.24 react@18 ([d97a667](https://github.com/Synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
+
+
+
+
+
 ## [0.9.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.9.7...@synerise/ds-inline-edit@0.9.8) (2025-01-21)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineEdit.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InlineEditProps } from './InlineEdit.types';
-declare const InlineEdit: ({ className, style, size, disabled, autoFocus, hideIcon, tooltipTitle, error, input, }: InlineEditProps) => React.JSX.Element;
+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,8 +1,10 @@
+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); }
 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 '@synerise/ds-input';
+import { theme } from '@synerise/ds-core';
 import * as S from './InlineEdit.styles';
 var InlineEdit = function InlineEdit(_ref) {
   var className = _ref.className,
@@ -12,6 +14,7 @@ var InlineEdit = function InlineEdit(_ref) {
     disabled = _ref.disabled,
     autoFocus = _ref.autoFocus,
     hideIcon = _ref.hideIcon,
+    customIcon = _ref.customIcon,
     tooltipTitle = _ref.tooltipTitle,
     error = _ref.error,
     input = _ref.input;
@@ -63,32 +66,29 @@ var InlineEdit = function InlineEdit(_ref) {
     placeholder: input.placeholder,
     placeholderIsMinWidth: false,
     wrapperClassName: "autosize-input"
-  }, /*#__PURE__*/React.createElement("input", {
-    itemRef: "",
+  }, /*#__PURE__*/React.createElement("input", _extends({
     onScroll: handleScroll,
-    id: input.name ? toCamelCase(input.name) : 'id',
+    id: input.name ? toCamelCase(input.name) : 'id'
+  }, input, {
     className: "autosize-input",
     "data-testid": "inline-edit-autosize-input",
-    placeholder: input.placeholder,
-    maxLength: input.maxLength,
     onKeyPress: handleKeyPress,
     disabled: disabled,
-    name: input.name,
     onChange: handleChange,
     onBlur: handleBlur,
-    readOnly: input.readOnly,
     value: input.value || '',
-    autoComplete: input.autoComplete,
     ref: inputRef
-  })), !hideIcon && /*#__PURE__*/React.createElement(Tooltip, {
+  }))), !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, {
-    component: /*#__PURE__*/React.createElement(EditS, null),
+    color: theme.palette["grey-600"],
+    component: customIcon || /*#__PURE__*/React.createElement(EditS, null),
     size: 24
   }))));
 };

package/dist/InlineEdit.styles.d.ts

@@ -10,6 +10,7 @@ export declare const FontStyleWatcher: import("styled-components").StyledCompone
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
     size: string;
     disabled?: boolean | undefined;
+    customIcon?: boolean | undefined;
 } & ThemeProps, never>;
 export declare const InPlaceEditableInputContainer: import("styled-components").StyledComponent<"div", any, InPlaceEditableInputContainerProps, never>;
 export {};

package/dist/InlineEdit.styles.js

@@ -28,18 +28,20 @@ export var FontStyleWatcher = styled.div.withConfig({
 export var IconWrapper = 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:24px;background-color:", ";}"], function (props) {
+})(["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.theme.palette['grey-100'];
+  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.theme.palette['grey-300'];
+  return props.customIcon ? '0px' : '24px';
+}, function (props) {
+  return props.customIcon ? undefined : props.theme.palette['grey-300'];
 });
 export var InPlaceEditableInputContainer = styled.div.withConfig({
   displayName: "InlineEditstyles__InPlaceEditableInputContainer",

package/dist/InlineEdit.types.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
+import type { ReactNode, ChangeEvent, CSSProperties, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler } from 'react';
 export type InputProps = {
     name?: string;
     value: string | number;
     disabled?: boolean;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onEnterPress?: React.KeyboardEventHandler<HTMLInputElement>;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onEnterPress?: KeyboardEventHandler<HTMLInputElement>;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     maxLength?: number;
-    autoComplete?: string;
     readOnly?: boolean;
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
 };
 export interface InlineEditProps {
     size?: 'large' | 'normal' | 'small';
@@ -17,8 +17,9 @@ export interface InlineEditProps {
     className?: string;
     disabled?: boolean;
     input: InputProps;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     autoFocus?: boolean;
     error?: boolean;
     hideIcon?: boolean;
+    customIcon?: ReactNode;
 }

package/dist/InlineSelect/SelectDropdown/SelectDropdown.js

@@ -1,6 +1,5 @@
 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); }
 import React, { useState, useCallback } from 'react';
-import ListItem from '@synerise/ds-list-item';
 import { SearchItems } from '@synerise/ds-search/dist/Elements';
 import * as S from './SelectDropdown.style';
 var DEFAULT_ROW_HEIGHT = 32;
@@ -19,6 +18,7 @@ var SelectDropdown = function SelectDropdown(_ref) {
     setScrollTop = _useState[1];
   var handleItemClick = useCallback(function (item) {
     onSelect(item);
+    // @ts-ignore TODO expects ItemData from @synerise/ds-list-item
     // eslint-disable-next-line no-unused-expressions
     item.onClick == null || item.onClick(item);
     closeDropdown();
@@ -36,7 +36,7 @@ var SelectDropdown = function SelectDropdown(_ref) {
     // eslint-disable-next-line react/jsx-handler-names
     ,
     itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(ListItem, _extends({
+      return /*#__PURE__*/React.createElement(S.ListItem, _extends({
         key: item == null ? void 0 : item.text
       }, item));
     },

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

@@ -5,3 +5,4 @@ export declare const ListWrapper: import("styled-components").StyledComponent<"d
 export declare const StyledScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, import("@synerise/ds-scrollbar").ScrollbarAdditionalProps & {
     children?: import("react").ReactNode;
 }, never>;
+export declare const ListItem: import("styled-components").StyledComponent<(props: import("@synerise/ds-list-item").ListItemProps) => import("react").JSX.Element, any, {}, never>;

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Scrollbar from '@synerise/ds-scrollbar';
+import DSListItem from '@synerise/ds-list-item';
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "SelectDropdownstyle__DropdownWrapper",
   componentId: "sc-1c17xkc-0"
@@ -14,4 +15,8 @@ export var ListWrapper = styled.div.withConfig({
 export var StyledScrollbar = styled(Scrollbar).withConfig({
   displayName: "SelectDropdownstyle__StyledScrollbar",
   componentId: "sc-1c17xkc-2"
-})(["&&{.scrollbar-container{padding-right:8px;}}"]);
+})(["&&{.scrollbar-container{padding-right:8px;}}"]);
+export var ListItem = styled(DSListItem).withConfig({
+  displayName: "SelectDropdownstyle__ListItem",
+  componentId: "sc-1c17xkc-3"
+})(["min-width:auto;"]);

package/dist/modules.d.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "0.9.8",
+  "version": "0.10.0",
   "description": "InlineEdit UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,20 +34,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.18.31",
-    "@synerise/ds-icon": "^0.70.0",
-    "@synerise/ds-input": "^0.24.21",
-    "@synerise/ds-list-item": "^0.6.3",
-    "@synerise/ds-scrollbar": "^0.11.24",
-    "@synerise/ds-search": "^0.9.25",
-    "@synerise/ds-tooltip": "^0.14.55",
-    "@synerise/ds-typography": "^0.16.12",
-    "@synerise/ds-utils": "^0.31.2"
+    "@synerise/ds-dropdown": "^0.19.0",
+    "@synerise/ds-icon": "^0.71.0",
+    "@synerise/ds-input": "^0.25.0",
+    "@synerise/ds-list-item": "^0.7.0",
+    "@synerise/ds-scrollbar": "^0.12.0",
+    "@synerise/ds-search": "^0.10.0",
+    "@synerise/ds-tooltip": "^0.15.0",
+    "@synerise/ds-typography": "^0.17.0",
+    "@synerise/ds-utils": "^0.32.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 17.0.2",
-    "styled-components": "5.0.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
+  "gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
 }