@synerise/ds-inline-edit 1.0.16 → 1.0.17

package/dist/InlineEdit.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { InlineEditProps } from './InlineEdit.types';
+import { type InlineEditProps } from './InlineEdit.types';
 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,10 +1,10 @@
 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 React, { useCallback, useEffect, useRef, useState } from 'react';
+import { theme } from '@synerise/ds-core';
 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 Tooltip from '@synerise/ds-tooltip';
+import { toCamelCase } from '@synerise/ds-utils';
 import * as S from './InlineEdit.styles';
 var InlineEdit = function InlineEdit(_ref) {
   var className = _ref.className,
@@ -23,7 +23,6 @@ var InlineEdit = function InlineEdit(_ref) {
     focused = _useState[0],
     setFocused = _useState[1];
   var handleChange = useCallback(function (event) {
-    // eslint-disable-next-line no-unused-expressions
     input.onChange == null || input.onChange(event);
   }, [input]);
   var handleFocus = function handleFocus() {

package/dist/InlineEdit.styles.js

@@ -1,19 +1,27 @@
 import styled, { css } from 'styled-components';
 import { macro } from '@synerise/ds-typography';
 var applyColor = function applyColor(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['grey-800'];
 };
 var applyColorFocus = function applyColorFocus(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['blue-600'];
 };
 var applyDots = function applyDots(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['grey-400'];
 };
 var applyDotsOnError = function applyDotsOnError(props) {
-  if (props.error) return "background-image: linear-gradient(to right, " + applyDots(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+  if (props.error) {
+    return "background-image: linear-gradient(to right, " + applyDots(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+  }
   return '';
 };
 var fontSize = {
@@ -46,7 +54,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) {
@@ -63,7 +71,7 @@ export var InPlaceEditableInputContainer = styled.div.withConfig({
   var theme = _ref2.theme;
   return theme.palette['grey-200'];
 }, function (props) {
-  return !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient(to right,", " 20%,rgba(255,255,255,0) 10%);}}}"], applyColorFocus(props));
+  return !props.pressed && css(["&&&{&:focus:not(:active),&:focus-within{input{cursor:pointer;background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );}}}"], applyColorFocus(props));
 }, FontStyleWatcher, function (props) {
   return fontSize[props.size];
 }, function (props) {

package/dist/InlineEdit.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, ChangeEvent, CSSProperties, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler } from 'react';
+import type { CSSProperties, ChangeEvent, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
 export type InputProps = {
     name?: string;
     value: string | number;

package/dist/InlineSelect/InlineSelect.d.ts

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

package/dist/InlineSelect/InlineSelect.js

@@ -1,11 +1,11 @@
 var _excluded = ["value", "onChange"];
 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';
+import React, { useEffect, useRef, useState } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
+import Icon, { AngleDownS } from '@synerise/ds-icon';
 import { AutosizeInput } from '@synerise/ds-input';
+import { NOOP, toCamelCase } from '@synerise/ds-utils';
 import * as S from './InlineSelect.style';
 import SelectDropdown from './SelectDropdown/SelectDropdown';
 var InlineSelect = function InlineSelect(_ref) {
@@ -43,7 +43,6 @@ var InlineSelect = function InlineSelect(_ref) {
     onChange = input.onChange,
     inputProps = _objectWithoutPropertiesLoose(input, _excluded);
   var handleSelect = function handleSelect(item) {
-    // eslint-disable-next-line no-unused-expressions
     onValueChange == null || onValueChange(item);
     setSelectedValue(item.text);
   };

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

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

package/dist/InlineSelect/InlineSelect.style.js

@@ -1,19 +1,27 @@
 import styled, { css } from 'styled-components';
 import { macro } from '@synerise/ds-typography';
 var applyColor = function applyColor(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['blue-600'];
 };
 var applyColorHover = function applyColorHover(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['blue-500'];
 };
 var applyColorActive = function applyColorActive(props) {
-  if (props.error) return props.theme.palette['red-600'];
+  if (props.error) {
+    return props.theme.palette['red-600'];
+  }
   return props.theme.palette['blue-700'];
 };
 var applyDotsOnError = function applyDotsOnError(props) {
-  if (props.error) return "background-image: linear-gradient(to right, " + applyColor(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+  if (props.error) {
+    return "background-image: linear-gradient(to right, " + applyColor(props) + " 20%, rgba(255, 255, 255, 0) 10%);\n  background-color: transparent;\n  background-position: bottom left;\n  background-size: 5px 1px;\n  background-repeat: repeat-x;";
+  }
   return '';
 };
 export var FontStyleWatcher = styled.div.withConfig({
@@ -23,7 +31,7 @@ export var FontStyleWatcher = styled.div.withConfig({
 export var IconWrapper = styled.div.withConfig({
   displayName: "InlineSelectstyle__IconWrapper",
   componentId: "sc-188pn99-1"
-})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ(", ");}}"], function (props) {
+})(["margin:0;font-size:11px;display:flex;justify-content:center;align-items:center;width:24px;height:24px;line-height:inherit;cursor:pointer;&:hover{background-color:", ";}&&&{svg{transition:transform 0.1s linear;transform:rotateZ( ", " );}}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.expanded ? '180deg' : '0deg';
@@ -48,7 +56,7 @@ export var InPlaceEditableInputContainer = styled.div.withConfig({
 }, IconWrapper, function (props) {
   return applyColorHover(props);
 }, function (props) {
-  return !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient(to right,", " 20%,rgba(255,255,255,0) 10%);input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props));
+  return !props.pressed && !props.dropdownOpened && css(["&&&{&:focus:not(:active),&:focus-within{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}}"], applyColor(props), applyColor(props), IconWrapper, applyColor(props));
 }, function (props) {
   return (props.dropdownOpened || props.pressed) && css(["&&&:active,&&&{input{color:transparent;cursor:pointer;text-shadow:0 0 0 ", ";}", "{background-color:transparent;svg{fill:", ";}}}"], applyColorActive(props), IconWrapper, applyColorActive(props));
 }, FontStyleWatcher, function (_ref3) {

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
 import type { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import type { ListItemProps } from '@synerise/ds-list-item';
 import type { InputProps } from '../InlineEdit.types';
 export type InlineSelectProps<ItemType extends ListItemProps = ListItemProps> = {
     size?: 'normal' | 'small';

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ListItemProps } from '@synerise/ds-list-item';
-import { SelectDropdownProps } from './SelectDropdown.types';
+import { type SelectDropdownProps } from './SelectDropdown.types';
 declare const SelectDropdown: <ItemType extends ListItemProps>({ dataSource, dropdownVisibleRows, dropdownRowHeight, onSelect, closeDropdown, style, }: SelectDropdownProps<ItemType>) => React.JSX.Element;
 export default SelectDropdown;

package/dist/InlineSelect/SelectDropdown/SelectDropdown.js

@@ -1,6 +1,6 @@
 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 React, { useCallback, useState } from 'react';
+import { SearchItems } from '@synerise/ds-search';
 import * as S from './SelectDropdown.style';
 var DEFAULT_ROW_HEIGHT = 32;
 var DEFAULT_VISIBLE_ROWS = 10;
@@ -18,8 +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
+    // @ts-expect-error Argument of type 'ItemType' is not assignable to parameter of type 'ItemData<MouseEvent<HTMLDivElement, MouseEvent>>
     item.onClick == null || item.onClick(item);
     closeDropdown();
   }, [onSelect, closeDropdown]);
@@ -32,9 +31,7 @@ var SelectDropdown = function SelectDropdown(_ref) {
       return setScrollTop(event.currentTarget.scrollTop);
     }
   }, /*#__PURE__*/React.createElement(SearchItems, {
-    data: dataSource
-    // eslint-disable-next-line react/jsx-handler-names
-    ,
+    data: dataSource,
     itemRender: function itemRender(item) {
       return /*#__PURE__*/React.createElement(S.ListItem, _extends({
         key: item == null ? void 0 : item.text

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
+import { type ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
 export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 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 & {

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import Scrollbar from '@synerise/ds-scrollbar';
 import DSListItem from '@synerise/ds-list-item';
+import Scrollbar from '@synerise/ds-scrollbar';
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "SelectDropdownstyle__DropdownWrapper",
   componentId: "sc-1c17xkc-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "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": "^1.0.14",
-    "@synerise/ds-icon": "^1.5.3",
-    "@synerise/ds-input": "^1.3.1",
-    "@synerise/ds-list-item": "^1.0.12",
-    "@synerise/ds-scrollbar": "^1.1.1",
-    "@synerise/ds-search": "^1.2.1",
-    "@synerise/ds-tooltip": "^1.1.11",
-    "@synerise/ds-typography": "^1.0.12",
-    "@synerise/ds-utils": "^1.3.0"
+    "@synerise/ds-dropdown": "^1.0.15",
+    "@synerise/ds-icon": "^1.5.4",
+    "@synerise/ds-input": "^1.3.2",
+    "@synerise/ds-list-item": "^1.0.13",
+    "@synerise/ds-scrollbar": "^1.1.2",
+    "@synerise/ds-search": "^1.2.2",
+    "@synerise/ds-tooltip": "^1.1.12",
+    "@synerise/ds-typography": "^1.0.13",
+    "@synerise/ds-utils": "^1.3.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "11fe1d29b2ac23e70c3d5e6ce8ae20201a619a34"
+  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
 }