@synerise/ds-inline-edit 0.7.13 → 0.8.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.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.7.13...@synerise/ds-inline-edit@0.8.0) (2024-07-05)
+
+
+### Features
+
+* **inline-edit:** swapped Menu.Item for ListItem ([94c79a3](https://github.com/Synerise/synerise-design/commit/94c79a3eb3c731952c11418bcbd49b4af8c916d9))
+
+
+
+
+
 ## [0.7.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.7.12...@synerise/ds-inline-edit@0.7.13) (2024-07-02)
 
 **Note:** Version bump only for package @synerise/ds-inline-edit

package/dist/InlineSelect/InlineSelect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InlineSelectProps } from './InlineSelect.types';
-declare const InlineSelect: ({ className, style, expanded, dropdownProps, dropdownOverlayStyle, inputStyle, size, disabled, autoFocus, hideIcon, error, input, placeholder, dataSource, initialValue, }: InlineSelectProps) => React.JSX.Element;
+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,5 +1,9 @@
+var _excluded = ["value", "onChange"];
+
 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 _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, { useRef, useState, useEffect } from 'react';
 import { toCamelCase } from '@synerise/ds-utils';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
@@ -27,7 +31,8 @@ var InlineSelect = function InlineSelect(_ref) {
       input = _ref.input,
       placeholder = _ref.placeholder,
       dataSource = _ref.dataSource,
-      initialValue = _ref.initialValue;
+      initialValue = _ref.initialValue,
+      onValueChange = _ref.onValueChange;
   var inputRef = useRef(null);
 
   var _useState = useState(initialValue || placeholder || 'option'),
@@ -42,11 +47,21 @@ var InlineSelect = function InlineSelect(_ref) {
       isPressed = _useState3[0],
       setIsPressed = _useState3[1];
 
+  var value = input.value,
+      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);
+  };
+
   useEffect(function () {
-    if (input != null && input.value && input.value !== selectedValue) {
-      setSelectedValue(input == null ? void 0 : input.value);
+    if (value && value !== selectedValue) {
+      setSelectedValue("" + value);
     }
-  }, [input == null ? void 0 : input.value, selectedValue]);
+  }, [value, selectedValue]);
   useEffect(function () {
     autoFocus && inputRef.current && inputRef.current.focus();
   }, [autoFocus, inputRef]);
@@ -57,9 +72,7 @@ var InlineSelect = function InlineSelect(_ref) {
     disabled: disabled,
     overlay: /*#__PURE__*/React.createElement(SelectDropdown, {
       dataSource: dataSource,
-      onSelect: function onSelect(item) {
-        return setSelectedValue(item.text);
-      },
+      onSelect: handleSelect,
       closeDropdown: function closeDropdown() {
         return setIsOpened(false);
       },
@@ -86,20 +99,17 @@ var InlineSelect = function InlineSelect(_ref) {
     placeholderIsMinWidth: false,
     extraWidth: 2,
     wrapperClassName: "autosize-input"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     ref: inputRef,
     style: inputStyle,
     id: input.name ? toCamelCase(input.name) : 'id',
     className: "autosize-input",
     "data-testid": "inline-select-autosize-input",
-    placeholder: placeholder,
-    maxLength: input.maxLength,
-    disabled: disabled,
-    name: input.name,
-    readOnly: input.readOnly,
     value: selectedValue || placeholder,
-    autoComplete: "off"
-  })), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
+    autoComplete: "off",
+    placeholder: placeholder,
+    disabled: disabled
+  }))), !hideIcon && /*#__PURE__*/React.createElement(S.IconWrapper, {
     size: size,
     expanded: isOpened
   }, /*#__PURE__*/React.createElement(Icon, {

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

@@ -1,8 +1,8 @@
 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 type InlineSelectProps = {
+import type { ListItemProps } from '@synerise/ds-list-item';
+import type { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import type { InputProps } from '../InlineEdit.types';
+export type InlineSelectProps<ItemType extends ListItemProps = ListItemProps> = {
     size?: 'normal' | 'small';
     tooltipTitle?: string;
     className?: string;
@@ -17,6 +17,7 @@ export type InlineSelectProps = {
     hideIcon?: boolean;
     expanded?: boolean;
     initialValue?: string;
+    onValueChange?: (item: ItemType) => void;
     placeholder?: string;
-    dataSource: MenuItemProps[];
+    dataSource: ItemType[];
 };

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

@@ -1,4 +1,5 @@
-import * as React from 'react';
-import { Props } from './SelectDropdown.types';
-declare const SelectDropdown: React.FC<Props>;
+import React from 'react';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import { 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,7 +1,7 @@
 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 Menu from '@synerise/ds-menu';
+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;
@@ -17,40 +17,41 @@ var SelectDropdown = function SelectDropdown(_ref) {
   var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
   var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
 
-  var _React$useState = React.useState(0),
-      scrollTop = _React$useState[0],
-      setScrollTop = _React$useState[1];
+  var _useState = useState(0),
+      scrollTop = _useState[0],
+      setScrollTop = _useState[1];
 
-  var handleChange = React.useCallback(function (item) {
-    onSelect(item);
+  var handleItemClick = useCallback(function (item) {
+    onSelect(item); // eslint-disable-next-line no-unused-expressions
+
+    item.onClick == null || item.onClick(item);
     closeDropdown();
   }, [onSelect, closeDropdown]);
   return /*#__PURE__*/React.createElement(S.DropdownWrapper, {
     style: style
-  }, /*#__PURE__*/React.createElement(S.DSMenu, null, /*#__PURE__*/React.createElement(S.StyledScrollbar, {
+  }, /*#__PURE__*/React.createElement(S.ListWrapper, null, /*#__PURE__*/React.createElement(S.StyledScrollbar, {
     maxHeight: rowCount * rowHeight,
     absolute: true,
-    onScroll: function onScroll(e) {
-      return setScrollTop(e.currentTarget.scrollTop);
+    onScroll: function onScroll(event) {
+      return setScrollTop(event.currentTarget.scrollTop);
     }
   }, /*#__PURE__*/React.createElement(SearchItems, {
-    data: dataSource,
+    data: dataSource // eslint-disable-next-line react/jsx-handler-names
+    ,
     itemRender: function itemRender(item) {
-      return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+      return /*#__PURE__*/React.createElement(ListItem, _extends({
         key: item == null ? void 0 : item.text
       }, item));
     },
-    onItemClick: function onItemClick(i) {
-      return handleChange(i);
-    },
+    onItemClick: handleItemClick,
     rowHeight: rowHeight,
     height: rowCount * rowHeight,
     visibleRows: rowCount,
     listProps: {
       scrollTop: scrollTop
-    } // @ts-ignore
-    ,
-    width: "100%"
+    },
+    width: "100%",
+    renderInMenu: false
   }))));
 };
 

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

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

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

@@ -1,14 +1,16 @@
 import styled from 'styled-components';
-import Menu from '@synerise/ds-menu';
 import Scrollbar from '@synerise/ds-scrollbar';
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "SelectDropdownstyle__DropdownWrapper",
   componentId: "sc-1c17xkc-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:200px;"]);
-export var DSMenu = styled(Menu).withConfig({
-  displayName: "SelectDropdownstyle__DSMenu",
+export var ListWrapper = styled.div.withConfig({
+  displayName: "SelectDropdownstyle__ListWrapper",
   componentId: "sc-1c17xkc-1"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;background:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.white;
+});
 export var StyledScrollbar = styled(Scrollbar).withConfig({
   displayName: "SelectDropdownstyle__StyledScrollbar",
   componentId: "sc-1c17xkc-2"

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

@@ -1,10 +1,11 @@
-import * as React from 'react';
-import { MenuItemProps } from '@synerise/ds-menu/dist/Elements/Item/MenuItem.types';
-export interface Props {
-    dataSource: MenuItemProps[];
+import type { CSSProperties } from 'react';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import type { InlineSelectProps } from '../InlineSelect.types';
+export type SelectDropdownProps<ItemType extends ListItemProps = ListItemProps> = Pick<InlineSelectProps<ItemType>, 'dataSource'> & {
     dropdownVisibleRows?: number;
     dropdownRowHeight?: number;
-    onSelect: (item: MenuItemProps) => void;
+    onSelect: (item: ItemType) => void;
     closeDropdown: () => void;
-    style?: React.CSSProperties;
-}
+    style?: CSSProperties;
+};
+export type Props = SelectDropdownProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-inline-edit",
-  "version": "0.7.13",
+  "version": "0.8.0",
   "description": "InlineEdit UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,24 +33,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.18.3",
-    "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-input": "^0.23.0",
-    "@synerise/ds-menu": "^0.19.3",
-    "@synerise/ds-scrollbar": "^0.11.2",
-    "@synerise/ds-search": "^0.8.95",
-    "@synerise/ds-tooltip": "^0.14.31",
-    "@synerise/ds-typography": "^0.15.0",
-    "@synerise/ds-utils": "^0.27.0"
+    "@synerise/ds-dropdown": "^0.18.4",
+    "@synerise/ds-icon": "^0.64.0",
+    "@synerise/ds-input": "^0.23.1",
+    "@synerise/ds-list-item": "^0.4.0",
+    "@synerise/ds-scrollbar": "^0.11.3",
+    "@synerise/ds-search": "^0.9.0",
+    "@synerise/ds-tooltip": "^0.14.32",
+    "@synerise/ds-typography": "^0.15.1",
+    "@synerise/ds-utils": "^0.28.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@testing-library/jest-dom": "5.1.1",
-    "@testing-library/react": "10.0.1"
-  },
-  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
+  "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
 }

package/dist/utils/attachWidthWatcher/__specs__/attachWidthWatcher.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/attachWidthWatcher/attachWidthWatcher.d.ts

@@ -1,6 +0,0 @@
-export type WatcherParent = HTMLElement & {
-    sizeWatcher?: HTMLIFrameElement;
-};
-export type ResizeCallback = (width: number, height: number) => void;
-declare const _default: (element: WatcherParent, resizeCallback: ResizeCallback, width?: boolean, height?: boolean) => number[] | false;
-export default _default;

package/dist/utils/attachWidthWatcher/attachWidthWatcher.js

@@ -1,43 +0,0 @@
-export default (function (element, resizeCallback, width, height) {
-  if (width === void 0) {
-    width = true;
-  }
-
-  if (height === void 0) {
-    height = true;
-  }
-
-  var customElement = element;
-  if (customElement.sizeWatcher) return false;
-
-  if (!customElement.style.position || customElement.style.position !== 'absolute' && customElement.style.position !== 'relative') {
-    throw new Error('Element needs to have explicit absolute or relative positioning to support size watcher');
-  }
-
-  var watcher = document.createElement('iframe');
-  document.body.appendChild(watcher);
-  Object.assign(watcher.style, {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    width: width ? '100%' : '0',
-    height: height ? '100%' : '0',
-    pointerEvents: 'none',
-    visibility: 'hidden',
-    border: 'none',
-    margin: '0',
-    padding: '0'
-  });
-  customElement.appendChild(watcher);
-  customElement.sizeWatcher = watcher;
-  var content = watcher.contentWindow;
-
-  if (content) {
-    content.addEventListener('resize', function (event) {
-      return resizeCallback(event.target.innerWidth, event.target.innerHeight);
-    });
-    return [content.innerWidth, content.innerHeight];
-  }
-
-  return false;
-});

package/dist/utils/index.d.ts

@@ -1 +0,0 @@
-export { default as attachWidthWatcher } from './attachWidthWatcher/attachWidthWatcher';

package/dist/utils/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as attachWidthWatcher } from './attachWidthWatcher/attachWidthWatcher';