@synerise/ds-inline-edit 0.9.1 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/InlineEdit.js +11 -16
  3. package/dist/InlineEdit.styles.js +0 -5
  4. package/dist/InlineSelect/InlineSelect.js +27 -38
  5. package/dist/InlineSelect/InlineSelect.style.js +0 -5
  6. package/dist/InlineSelect/SelectDropdown/SelectDropdown.js +11 -15
  7. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.9.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.9.2...@synerise/ds-inline-edit@0.9.3) (2024-11-29)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-inline-edit
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.9.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.9.1...@synerise/ds-inline-edit@0.9.2) (2024-11-28)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-inline-edit
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-inline-edit@0.9.0...@synerise/ds-inline-edit@0.9.1) (2024-11-21)
7
23
 
8
24
  **Note:** Version bump only for package @synerise/ds-inline-edit
package/dist/InlineEdit.js CHANGED
@@ -4,28 +4,24 @@ import Icon, { EditS } from '@synerise/ds-icon';
4
4
  import { toCamelCase } from '@synerise/ds-utils';
5
5
  import { AutosizeInput } from '@synerise/ds-input';
6
6
  import * as S from './InlineEdit.styles';
7
-
8
7
  var InlineEdit = function InlineEdit(_ref) {
9
8
  var className = _ref.className,
10
- style = _ref.style,
11
- _ref$size = _ref.size,
12
- size = _ref$size === void 0 ? 'normal' : _ref$size,
13
- disabled = _ref.disabled,
14
- autoFocus = _ref.autoFocus,
15
- hideIcon = _ref.hideIcon,
16
- tooltipTitle = _ref.tooltipTitle,
17
- error = _ref.error,
18
- input = _ref.input;
9
+ style = _ref.style,
10
+ _ref$size = _ref.size,
11
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
12
+ disabled = _ref.disabled,
13
+ autoFocus = _ref.autoFocus,
14
+ hideIcon = _ref.hideIcon,
15
+ tooltipTitle = _ref.tooltipTitle,
16
+ error = _ref.error,
17
+ input = _ref.input;
19
18
  var inputRef = useRef(null);
20
-
21
19
  var _useState = useState(),
22
- scrolled = _useState[0],
23
- setScrolled = _useState[1];
24
-
20
+ scrolled = _useState[0],
21
+ setScrolled = _useState[1];
25
22
  var handleScroll = useCallback(function () {
26
23
  if (inputRef.current) {
27
24
  var scrolledPixels = inputRef.current.scrollLeft;
28
-
29
25
  if (scrolledPixels > 0) {
30
26
  setScrolled(true);
31
27
  } else {
@@ -96,5 +92,4 @@ var InlineEdit = function InlineEdit(_ref) {
96
92
  size: 24
97
93
  }))));
98
94
  };
99
-
100
95
  export default InlineEdit;
package/dist/InlineEdit.styles.js CHANGED
@@ -1,26 +1,21 @@
1
1
  import styled, { css } from 'styled-components';
2
2
  import { macro } from '@synerise/ds-typography';
3
-
4
3
  var applyColor = function applyColor(props) {
5
4
  if (props.error) return props.theme.palette['red-600'];
6
5
  return props.theme.palette['grey-800'];
7
6
  };
8
-
9
7
  var applyColorFocus = function applyColorFocus(props) {
10
8
  if (props.error) return props.theme.palette['red-600'];
11
9
  return props.theme.palette['blue-600'];
12
10
  };
13
-
14
11
  var applyDots = function applyDots(props) {
15
12
  if (props.error) return props.theme.palette['red-600'];
16
13
  return props.theme.palette['grey-400'];
17
14
  };
18
-
19
15
  var applyDotsOnError = function applyDotsOnError(props) {
20
16
  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;";
21
17
  return '';
22
18
  };
23
-
24
19
  var fontSize = {
25
20
  large: macro.h600,
26
21
  normal: macro.h400,
package/dist/InlineSelect/InlineSelect.js CHANGED
@@ -1,9 +1,6 @@
1
1
  var _excluded = ["value", "onChange"];
2
-
3
2
  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); }
4
-
5
3
  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; }
6
-
7
4
  import React, { useRef, useState, useEffect } from 'react';
8
5
  import { NOOP, toCamelCase } from '@synerise/ds-utils';
9
6
  import Icon, { AngleDownS } from '@synerise/ds-icon';
@@ -11,52 +8,45 @@ import Dropdown from '@synerise/ds-dropdown';
11
8
  import { AutosizeInput } from '@synerise/ds-input';
12
9
  import * as S from './InlineSelect.style';
13
10
  import SelectDropdown from './SelectDropdown/SelectDropdown';
14
-
15
11
  var InlineSelect = function InlineSelect(_ref) {
16
12
  var className = _ref.className,
17
- style = _ref.style,
18
- expanded = _ref.expanded,
19
- _ref$dropdownProps = _ref.dropdownProps,
20
- dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
21
- _ref$dropdownOverlayS = _ref.dropdownOverlayStyle,
22
- dropdownOverlayStyle = _ref$dropdownOverlayS === void 0 ? {} : _ref$dropdownOverlayS,
23
- _ref$inputStyle = _ref.inputStyle,
24
- inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
25
- _ref$size = _ref.size,
26
- size = _ref$size === void 0 ? 'normal' : _ref$size,
27
- disabled = _ref.disabled,
28
- autoFocus = _ref.autoFocus,
29
- hideIcon = _ref.hideIcon,
30
- error = _ref.error,
31
- input = _ref.input,
32
- placeholder = _ref.placeholder,
33
- dataSource = _ref.dataSource,
34
- initialValue = _ref.initialValue,
35
- onValueChange = _ref.onValueChange;
13
+ style = _ref.style,
14
+ expanded = _ref.expanded,
15
+ _ref$dropdownProps = _ref.dropdownProps,
16
+ dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
17
+ _ref$dropdownOverlayS = _ref.dropdownOverlayStyle,
18
+ dropdownOverlayStyle = _ref$dropdownOverlayS === void 0 ? {} : _ref$dropdownOverlayS,
19
+ _ref$inputStyle = _ref.inputStyle,
20
+ inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
21
+ _ref$size = _ref.size,
22
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
23
+ disabled = _ref.disabled,
24
+ autoFocus = _ref.autoFocus,
25
+ hideIcon = _ref.hideIcon,
26
+ error = _ref.error,
27
+ input = _ref.input,
28
+ placeholder = _ref.placeholder,
29
+ dataSource = _ref.dataSource,
30
+ initialValue = _ref.initialValue,
31
+ onValueChange = _ref.onValueChange;
36
32
  var inputRef = useRef(null);
37
-
38
33
  var _useState = useState(initialValue || placeholder || 'option'),
39
- selectedValue = _useState[0],
40
- setSelectedValue = _useState[1];
41
-
34
+ selectedValue = _useState[0],
35
+ setSelectedValue = _useState[1];
42
36
  var _useState2 = useState(Boolean(expanded)),
43
- isOpened = _useState2[0],
44
- setIsOpened = _useState2[1];
45
-
37
+ isOpened = _useState2[0],
38
+ setIsOpened = _useState2[1];
46
39
  var _useState3 = useState(false),
47
- isPressed = _useState3[0],
48
- setIsPressed = _useState3[1];
49
-
40
+ isPressed = _useState3[0],
41
+ setIsPressed = _useState3[1];
50
42
  var value = input.value,
51
- onChange = input.onChange,
52
- inputProps = _objectWithoutPropertiesLoose(input, _excluded);
53
-
43
+ onChange = input.onChange,
44
+ inputProps = _objectWithoutPropertiesLoose(input, _excluded);
54
45
  var handleSelect = function handleSelect(item) {
55
46
  // eslint-disable-next-line no-unused-expressions
56
47
  onValueChange == null || onValueChange(item);
57
48
  setSelectedValue(item.text);
58
49
  };
59
-
60
50
  useEffect(function () {
61
51
  if (value && value !== selectedValue) {
62
52
  setSelectedValue("" + value);
@@ -118,5 +108,4 @@ var InlineSelect = function InlineSelect(_ref) {
118
108
  size: 24
119
109
  }))));
120
110
  };
121
-
122
111
  export default InlineSelect;
package/dist/InlineSelect/InlineSelect.style.js CHANGED
@@ -1,26 +1,21 @@
1
1
  import styled, { css } from 'styled-components';
2
2
  import { macro } from '@synerise/ds-typography';
3
-
4
3
  var applyColor = function applyColor(props) {
5
4
  if (props.error) return props.theme.palette['red-600'];
6
5
  return props.theme.palette['blue-600'];
7
6
  };
8
-
9
7
  var applyColorHover = function applyColorHover(props) {
10
8
  if (props.error) return props.theme.palette['red-600'];
11
9
  return props.theme.palette['blue-500'];
12
10
  };
13
-
14
11
  var applyColorActive = function applyColorActive(props) {
15
12
  if (props.error) return props.theme.palette['red-600'];
16
13
  return props.theme.palette['blue-700'];
17
14
  };
18
-
19
15
  var applyDotsOnError = function applyDotsOnError(props) {
20
16
  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;";
21
17
  return '';
22
18
  };
23
-
24
19
  export var FontStyleWatcher = styled.div.withConfig({
25
20
  displayName: "InlineSelectstyle__FontStyleWatcher",
26
21
  componentId: "sc-188pn99-0"
package/dist/InlineSelect/SelectDropdown/SelectDropdown.js CHANGED
@@ -1,29 +1,25 @@
1
1
  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); }
2
-
3
2
  import React, { useState, useCallback } from 'react';
4
3
  import ListItem from '@synerise/ds-list-item';
5
4
  import { SearchItems } from '@synerise/ds-search/dist/Elements';
6
5
  import * as S from './SelectDropdown.style';
7
6
  var DEFAULT_ROW_HEIGHT = 32;
8
7
  var DEFAULT_VISIBLE_ROWS = 10;
9
-
10
8
  var SelectDropdown = function SelectDropdown(_ref) {
11
9
  var dataSource = _ref.dataSource,
12
- dropdownVisibleRows = _ref.dropdownVisibleRows,
13
- dropdownRowHeight = _ref.dropdownRowHeight,
14
- onSelect = _ref.onSelect,
15
- closeDropdown = _ref.closeDropdown,
16
- style = _ref.style;
10
+ dropdownVisibleRows = _ref.dropdownVisibleRows,
11
+ dropdownRowHeight = _ref.dropdownRowHeight,
12
+ onSelect = _ref.onSelect,
13
+ closeDropdown = _ref.closeDropdown,
14
+ style = _ref.style;
17
15
  var rowCount = dropdownVisibleRows || DEFAULT_VISIBLE_ROWS;
18
16
  var rowHeight = dropdownRowHeight || DEFAULT_ROW_HEIGHT;
19
-
20
17
  var _useState = useState(0),
21
- scrollTop = _useState[0],
22
- setScrollTop = _useState[1];
23
-
18
+ scrollTop = _useState[0],
19
+ setScrollTop = _useState[1];
24
20
  var handleItemClick = useCallback(function (item) {
25
- onSelect(item); // eslint-disable-next-line no-unused-expressions
26
-
21
+ onSelect(item);
22
+ // eslint-disable-next-line no-unused-expressions
27
23
  item.onClick == null || item.onClick(item);
28
24
  closeDropdown();
29
25
  }, [onSelect, closeDropdown]);
@@ -36,7 +32,8 @@ var SelectDropdown = function SelectDropdown(_ref) {
36
32
  return setScrollTop(event.currentTarget.scrollTop);
37
33
  }
38
34
  }, /*#__PURE__*/React.createElement(SearchItems, {
39
- data: dataSource // eslint-disable-next-line react/jsx-handler-names
35
+ data: dataSource
36
+ // eslint-disable-next-line react/jsx-handler-names
40
37
  ,
41
38
  itemRender: function itemRender(item) {
42
39
  return /*#__PURE__*/React.createElement(ListItem, _extends({
@@ -54,5 +51,4 @@ var SelectDropdown = function SelectDropdown(_ref) {
54
51
  renderInMenu: false
55
52
  }))));
56
53
  };
57
-
58
54
  export default SelectDropdown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-inline-edit",
3
- "version": "0.9.1",
3
+ "version": "0.9.3",
4
4
  "description": "InlineEdit UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-dropdown": "^0.18.24",
38
- "@synerise/ds-icon": "^0.67.0",
39
- "@synerise/ds-input": "^0.24.14",
40
- "@synerise/ds-list-item": "^0.4.19",
41
- "@synerise/ds-scrollbar": "^0.11.19",
42
- "@synerise/ds-search": "^0.9.19",
43
- "@synerise/ds-tooltip": "^0.14.49",
44
- "@synerise/ds-typography": "^0.16.6",
37
+ "@synerise/ds-dropdown": "^0.18.26",
38
+ "@synerise/ds-icon": "^0.68.0",
39
+ "@synerise/ds-input": "^0.24.16",
40
+ "@synerise/ds-list-item": "^0.5.1",
41
+ "@synerise/ds-scrollbar": "^0.11.21",
42
+ "@synerise/ds-search": "^0.9.21",
43
+ "@synerise/ds-tooltip": "^0.14.51",
44
+ "@synerise/ds-typography": "^0.16.8",
45
45
  "@synerise/ds-utils": "^0.31.2"
46
46
  },
47
47
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "react": ">=16.9.0 <= 17.0.2",
50
50
  "styled-components": "5.0.1"
51
51
  },
52
- "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
52
+ "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
53
53
  }